Video op je website zonder vertraging: zo doe je dat

Een YouTube-video insluiten voelt als niets: je plakt een stukje code en de video staat er. Maar onder de motorkap haalt die code de volledige YouTube-speler binnen: scripts, stylesheets, voorbeeldbeelden en trackers. Webontwikkelaar Zach Leatherman mat het na en kwam uit op bijna 1,2 megabyte per embed, en dat gewicht wordt geladen nog voor iemand op afspelen drukt.

Ter vergelijking: dat is meer dan het gewicht van een complete, goed gebouwde kmo-pagina. Zet je twee of drie video's op één pagina, dan delen die embeds hun bestanden bovendien nauwelijks met elkaar en betaal je het gewicht meermaals.

Het gaat niet alleen om kilobytes. De speler draait ook scripts die de processor van je bezoeker bezighouden, precies in de seconden waarin je pagina zich probeert op te bouwen. Op een recente laptop merk je dat amper; op de smartphone van je klant, in de trein tussen Gent en Brussel, des te meer.

Het wrange is dat de meeste bezoekers die prijs betalen zonder iets terug te krijgen. Lang niet iedereen speelt de video af: veel mensen komen voor je openingsuren, je prijzen of je contactgegevens. Toch downloadt hun toestel braaf de volledige speler.

En die vertraging kost bezoekers. Google stelde vast dat 53% van de mobiele bezoekers afhaakt wanneer een pagina langer dan 3 seconden laadt. Eén onnodig geladen videospeler kan op mobiel het verschil zijn tussen onder en boven die grens.

De omgekeerde beweging loont net zo hard: het onderzoek Milliseconds Make Millions van Deloitte en Google toonde dat 0,1 seconde snelheidswinst de conversie in retail met 8,4% verhoogt. Een video slimmer laden levert makkelijk het veelvoud van die 0,1 seconde op. Zelden ligt er op een kmo-site zoveel winst voor het rapen met zo weinig werk.

De oplossing heet een facade, letterlijk een gevel. In plaats van de echte videospeler toon je alleen een voorbeeldbeeld met een afspeelknop erop. Dat is gewoon een lichte afbeelding van enkele tientallen kilobytes. Pas wanneer een bezoeker echt op de knop klikt, wordt de volledige speler geladen en start de video meteen.

Voor je bezoeker verandert er zo goed als niets: hij ziet een video, klikt en kijkt. Voor je laadtijd verandert alles: wie niet klikt, downloadt de speler nooit. Leatherman berekende dat een lichte facadecomponent rond de 100 kB uitkomt in plaats van bijna 1,2 MB, zonder functionaliteit in te leveren, en meerdere video's op één pagina delen hun bestanden wel netjes.

Praktisch hoef je hiervoor geen ontwikkelaar te zijn. Voor WordPress bestaan er performanceplugins met een aanvinkoptie die embeds automatisch door facades vervangt. Wie zelf bouwt of laat bouwen, vraagt de webbouwer naar componenten zoals lite-youtube. Het is een klus van minuten, geen dagen.

Naast de facade zijn er nog een paar routes om video te tonen. Dit overzicht helpt je kiezen:

Aanpak	Voordeel	Nadeel	Voor wie
Gewone YouTube- of Vimeo-embed	Snel geregeld, gratis bandbreedte	Ruim 1 MB extra gewicht per video, ook zonder afspelen	Niemand, gebruik minstens een facade
Embed met facade	Zelfde gemak, fractie van het gewicht	Vraagt een plugin of klein stukje code	Vrijwel elke kmo-site
Zelf hosten (mp4 op je server)	Geen externe scripts of trackers	Belast je server en hosting, geen automatische kwaliteitsaanpassing	Korte clips van enkele seconden
Achtergrondvideo die vanzelf afspeelt	Oogt indrukwekkend	Vreet data en batterij, vertraagt alles, stoort op mobiel	Bijna nooit een goed idee op mobiel

De rode draad: hoe minder er geladen wordt zonder dat de bezoeker erom vraagt, hoe beter. Video op verzoek is een cadeau; video die zich opdringt is ballast.

Wil je het in één keer goed doen, hou dan deze regels aan:

1. Altijd een facade of klik-om-af-te-spelen. Geen enkele videospeler hoort te laden voor iemand erom vraagt.
2. Kies een scherp voorbeeldbeeld. De facade is een gewone afbeelding: optimaliseer ze zoals je andere beelden, in een modern formaat en op maat.
3. Zet video's onder de vouw als het kan. Staat de video lager op de pagina, dan kan het voorbeeldbeeld lui geladen worden en kost het bovenste deel van je pagina niets.
4. Wees zuinig met autoplay. Een achtergrondvideo die vanzelf start, kost data en batterij van je bezoeker en duwt je belangrijkste inhoud naar achteren. Overweeg op mobiel een stilstaand beeld.
5. Eén video per pagina volstaat meestal. Wil je er meer tonen, bundel ze dan op een aparte pagina, zodat je startpagina licht blijft.

Met deze aanpak kan zelfs een videorijke site verrassend snel zijn. Het geheim is niet minder video, maar later geladen video.

Video hoort op je website thuis: het overtuigt zoals tekst dat zelden kan. Zorg er alleen voor dat de rekening bij de kijker ligt en niet bij elke bezoeker.

Wil je weten of je video's, beelden of scripts vandaag je grootste vertrager zijn? De gratis marketing scan legt het in enkele minuten bloot, zodat je gericht kunt opruimen in plaats van te gokken.