Een tandartspraktijk in Haarlem liet een prachtige praktijkvideo maken. Drie minuten, gefilmd met een drone, gemonteerd door een professional. De webbouwer zette hem bovenaan de homepage als achtergrond, automatisch afspelend. Twee weken later belde de praktijkmanager: de site was onbruikbaar traag geworden op telefoons en de mobiele score was gekelderd naar 12.
Het is een klassiek voorbeeld van hoe video op een website de laadtijd om zeep helpt. Toch is het niet nodig om video te vermijden. Met een paar bewuste keuzes kunt u video gebruiken zonder dat bezoekers wachten. Dit artikel is een stappenplan, van de beslissing waar u de video zet tot de instellingen die in de praktijk het verschil maken.
Eerst de keuzes: doel en hosting
Stap 1: bepaal wat de video moet doen
Voordat u iets technisch doet, beantwoordt u één vraag: is de video de boodschap, of is hij decoratie? Een uitlegvideo over een behandeling, een bedrijfsfilm, een productdemonstratie: dat is inhoud. Bezoekers klikken erop als ze willen kijken. Een sfeerfilmpje op de achtergrond van de homepage is decoratie. Het speelt zonder dat iemand erom vroeg.
Dit onderscheid bepaalt alles wat volgt. Inhoud mag pas laden als de bezoeker erom vraagt. Decoratie is vrijwel altijd het probleem, omdat hij bovenaan staat, automatisch speelt en meeweegt in het grootste element dat Google meet. Als u maar één ding uit dit artikel meeneemt: zet geen automatisch afspelende video bovenaan uw pagina, en al helemaal niet op mobiel.
Stap 2: kies waar de video gehost wordt
Een videobestand op uw eigen server zetten lijkt logisch en het houdt u onafhankelijk. Maar een gewone webserver is niet gebouwd om video te streamen. Hij stuurt het hele bestand als één brok, zonder aanpassing aan de verbinding van de kijker. Op een telefoon met matig bereik betekent dat wachten. Bovendien telt elke kijker mee in het dataverkeer van uw hostingpakket en in de reservekopieën die u laat maken.
Een videoplatform als YouTube of Vimeo lost dat op: het past de kwaliteit aan de verbinding aan en de bestanden staan op servers die daarvoor gemaakt zijn. YouTube is gratis en vertoont soms aanbevelingen van anderen na afloop; Vimeo is betaald en oogt strakker, zonder reclame. Voor de meeste bedrijfssites is Vimeo of YouTube een betere keuze dan zelf hosten, tenzij het om een heel korte clip gaat.
- Zelf hosten: alleen voor korte clips onder ongeveer 10 seconden, geluidloos, sterk gecomprimeerd.
- YouTube: gratis, breed ondersteund, extra vindbaarheid via YouTube zelf.
- Vimeo: betaald, geen reclame, meer controle over de speler en privacy.
Dan de techniek: video zonder laadtijd te verliezen
Stap 3: laad de speler pas bij een klik
Hier zit de grootste winst. Een ingesloten YouTube-video laadt standaard een compleet frame met speler, scripts en tracking, ook als niemand op afspelen drukt. Dat kost al snel een halve megabyte en tientallen verzoeken per video, nog voordat er één seconde beeld is.
De oplossing heet een “facade” of klik-om-te-laden: u toont alleen een stilstaand voorbeeldbeeld met een afspeelknop. Pas bij een klik wordt de echte speler geladen. Voor de bezoeker ziet het er hetzelfde uit; voor de laadtijd scheelt het bijna alles. In WordPress is dit te regelen via de meeste cacheplugins (zoek naar een optie als “YouTube-iframe vervangen door voorbeeldafbeelding”) of via een lichte plugin die alleen dit doet. Let erop dat u niet twee plugins tegelijk dit laat doen.
Voor Vimeo geldt hetzelfde principe; niet elke tool ondersteunt dat, controleer het dus na het instellen door de pagina op een telefoon te openen en te kijken of de speler pas na de klik verschijnt.
Stap 4: doe iets met de achtergrondvideo
Wilt u toch een achtergrondvideo, dan zijn dit de voorwaarden om hem te mogen houden:
- Maximaal 10 tot 15 seconden, in een lus, zonder geluid.
- Gecomprimeerd tot een paar megabyte, in het MP4-formaat, eventueel met een WebM-variant erbij. Een videobewerker of een gratis tool als HandBrake doet dit.
- Op mobiel uitgeschakeld en vervangen door een stilstaande afbeelding. Vrijwel alle paginabouwers hebben daarvoor een schakelaar.
- Een voorbeeldafbeelding ingesteld, zodat er direct beeld staat terwijl de video laadt.
De tandartspraktijk uit de inleiding koos uiteindelijk voor een stilstaande foto uit de video bovenaan, met daaronder de volledige film als klik-om-te-laden. De mobiele score ging van 12 terug naar boven de 80, en de video wordt nu vaker helemaal bekeken dan toen hij automatisch speelde.
Stap 5: beperk het aantal video’s per pagina
Eén video per pagina is prima. Een pagina met tien ingesloten video’s, bijvoorbeeld een overzicht van klantverhalen, wordt zonder klik-om-te-laden een ramp. Overweeg dan een lijst met voorbeeldbeelden die naar aparte pagina’s linken, of één speler met een afspeellijst. Ook hier geldt: alles wat pas laadt als iemand erom vraagt, kost niets zolang niemand erom vraagt.
Stap 6: meet het resultaat
Meet de pagina op mobiel voor en na het plaatsen van de video. Kijk naar het paginagewicht, het aantal verzoeken en de LCP in seconden. Als de video het grootste element bovenaan is, ziet u dat direct terug. Een korte uitleg van welke tool wat meet, staat in deze vergelijking van meettools. En bedenk dat video vaak samengaat met andere zware elementen, zoals grote foto’s; wat u daaraan doet leest u in dit artikel over afbeeldingen optimaliseren.
Wanneer u hulp inschakelt
De stappen hierboven kunt u grotendeels zelf zetten, zeker als uw site een cacheplugin met een facade-optie heeft. Het wordt lastiger als de video door een paginabouwer of thema wordt afgehandeld op een manier die u niet kunt aanpassen, of als de site na uw wijziging op mobiel iets anders toont dan bedoeld. In dat geval is het verstandig om het als onderdeel van een bredere optimalisatie van de laadtijd te laten oppakken, zodat video, afbeeldingen en scripts in samenhang worden afgesteld. WebMaintor doet dat met een meting vooraf en achteraf, maar welk bureau u ook kiest: vraag om de mobiele meting, want daar valt of staat het.
Video op uw website is dus geen keuze tussen mooi en snel. Het is een kwestie van de speler pas laden wanneer iemand erom vraagt. Wie dat ene principe toepast, kan zonder zorgen filmen.
