Een videothumbnail in plaats van een zware embed

Begin met een nulmeting, anders weet je achteraf niet wat de thumbnail heeft veranderd. Open de pagina in een privévenster en open de netwerkweergave van de ontwikkelaarstools van je browser. De exacte plek verschilt per browser, dus zoek dit op in de hulp van jouw browser. Zet het cachegebruik uit of leeg de cache, laad de pagina en wacht tot er geen nieuwe activiteit meer is. Klik niet op de video.

Noteer het aantal requests, de totale overdracht, de requests naar domeinen van de videodienst en welke scripts en frames daarbij zitten. MDN beschrijft resource timing als gedetailleerde netwerkmetingen voor de bronnen die een pagina opvraagt (MDN over webprestaties). Dat is precies de lijst die je nodig hebt.

Herhaal de meting drie keer, want netwerkmetingen schommelen. Doe één extra meting met een gesimuleerde tragere verbinding. Schrijf erbij welk toestel, welke browser en welke datum je gebruikte, zodat de meting na de wijziging onder dezelfde omstandigheden kan gebeuren.

Niet elke video is even zwaar. Het aantal en de aard van de requests hangt af van je videodienst en van hoe de embed is ingesteld. De cursus Learn Performance van web.dev bevat volgens het overzicht een module over videoprestaties (web.dev over prestaties). Gebruik die als achtergrond, maar bekijk ook de documentatie van je eigen videodienst, want die bepaalt welke opties je hebt.

Stel jezelf bij de nulmeting vijf vragen:

• Verschijnen er requests naar het videodomein terwijl niemand heeft geklikt?
• Staat de video zichtbaar bij het openen van de pagina of pas na scrollen?
• Staan er meerdere video's op dezelfde pagina?
• Laadt de embed eigen lettertypes, scripts of trackingonderdelen?
• Is er al een posterafbeelding, en met welke afmetingen?

Zijn de antwoorden vooral nee, dan is de winst van een thumbnail waarschijnlijk klein. Zijn ze vooral ja, dan is een test de moeite waard. Meer dan een hypothese is het nog niet, tot je na de wijziging opnieuw meet.

Gebruik deze tabel als beslisblad. Eigen cijfers over kijkgedrag haal je uit je eigen statistieken, als je die hebt.

Verslechtert de bediening merkbaar, dan is de thumbnail de verkeerde keuze, ook als de requests dalen.

1. Maak een afbeelding in dezelfde verhouding als de video, met vaste breedte en hoogte, zodat de lay-out niet verspringt.
2. Plaats een echte knop boven op de afbeelding. Een klikbare afbeelding zonder toetsenbordtoegang is geen startbediening.
3. Geef de knop een duidelijke naam met de videotitel, en zet de duur zichtbaar in tekst.
4. Laat de knop bij activering de thumbnail vervangen door de embed, en bepaal waar de focus daarna landt.
5. Test of één klik volstaat. Moet de bezoeker na de thumbnail nog eens in de speler klikken, dan is dat extra wrijving.
6. Test met toetsenbord (Tab, Enter, spatiebalk) en met aanraking op een telefoon.
7. Voorzie een gewone tekstlink naar de video voor wie de knop niet kan gebruiken, bijvoorbeeld als scripts niet laden.

Zet de thumbnail niet bovenaan als zware afbeelding zonder afmetingen. Dan ruil je de ene vertraging voor de andere.

Captions leven meestal in de speler. Vóór de klik zijn ze er dus niet, en wie de speler niet kan starten, bereikt ze niet. Zorg daarom voor tekstalternatieven op de pagina zelf:

• een transcript als gewone tekst, of een zichtbare link ernaar
• een bronlink naar de video op het platform, als tekstlink met de titel
• een korte beschrijving van wat de video toont, voor beeldinformatie die niet in het geluid zit

De tutorials van het W3C bieden richtlijnen voor toegankelijke inhoud en vermelden per pagina de gebruikte succescriteria (W3C-tutorials). Gebruik ze als algemene achtergrond voor toegankelijke inhoud en loop je alternatieven zelf na. Ze beschrijven geen specifieke thumbnailoplossing en deze controle bewijst geen volledige WCAG-conformiteit.

Controleer ook na het laden van de embed of de captionknop van de speler werkt en of de taal klopt. Weet je dat niet zeker, dan hoort die vraag bij de acceptatietest.

Herhaal na de wijziging exact de nulmeting: dezelfde drie metingen, dezelfde omstandigheden, dezelfde pagina. Vergelijk de requests voor de klik en na de klik, en noteer niet alleen dat er iets verandert, maar welke bronnen verdwenen of bijkwamen.

Fictief voorbeeld (alleen invoer en controles): een pagina met één video onder de vouw, direct als embed. Invoer: drie nulmetingen met requests, totale overdracht en videodomeinen. Wijziging: thumbnail, knop, tekstlink, transcript. Te controleren: bij het laden verschijnen geen requests naar het videodomein, of minder dan in de nulmeting. De thumbnail laadt met vaste afmetingen. Na de klik start de speler met één handeling. De knop werkt met toetsenbord en aanraking. Transcript en bronlink zijn bereikbaar zonder de speler.

Blijven er toch videorequests bij het laden, zoek dan een tweede embed, een preloadinstructie of een script elders op de pagina. Is de bediening slechter, draai dan terug. Wil je de zichtbare signalen van je eigen website bekijken, dan kan dat via Marketing Scan. Een publieke scan meet wat zichtbaar is en voert niet al deze controles uit.