Video’s sneller laten laden op je website

« Back to Glossary Index

Een video laadt snel als hij klein is, pas wordt opgehaald op het moment dat iemand hem nodig heeft, en van een server komt die daarop is ingericht. Alle drie die punten worden bij de meeste websites overgeslagen. Het gevolg is een homepage die op papier mooi is, maar op een 4G-verbinding tien seconden lang een grijs vlak toont.

Waarom video je laadtijd zo hard raakt

Een afbeelding weegt tienden van een megabyte. Een videobestand weegt al snel tientallen megabytes. Zet je zo’n bestand als achtergrond in je header, dan concurreert hij om bandbreedte met precies de dingen die je bezoeker eerst wil zien: je tekst, je logo, je knop. Google meet dat mee in de Core Web Vitals. Vooral Largest Contentful Paint loopt op als het grootste element in beeld een video is die nog moet binnenkomen.

Wat je in de praktijk tegenkomt: een bureau levert een sfeervideo aan van 4K, 60 beelden per seconde, 80 MB, en die wordt ongewijzigd als hero geplaatst. Op een goede laptop met glasvezel valt het niet op. Op een telefoon buiten de stad is het een leeg scherm.

Comprimeer voordat je uploadt

De meeste winst pak je nog voordat het bestand op je server staat. Een paar vuistregels:

• Een achtergrondvideo hoeft geen 4K te zijn. 1280 bij 720 pixels is voor een sfeerbeeld ruim genoeg.
• Zet je framerate op 24 of 30. Meer beelden per seconde ziet niemand, maar het kost wel bestandsgrootte.
• Kort de video in. Vijf tot acht seconden die naadloos loopt, doet hetzelfde werk als dertig seconden.
• Exporteer naar MP4 met H.264 voor compatibiliteit, en lever daarnaast een WebM-versie aan. Browsers pakken zelf de lichtste variant.
• Heeft de video geen geluid nodig? Strip de audiotrack. Dat scheelt zomaar een paar megabyte.

Een sfeervideo van 80 MB is met die stappen vaak terug te brengen tot onder de 3 MB, zonder dat een bezoeker het verschil ziet.

Zelf hosten of uitbesteden

Een video vanaf je eigen gedeelde hosting serveren is de traagste optie die er is. Die servers zijn gebouwd voor kleine HTML-verzoeken, niet voor het uitleveren van grote bestanden aan tientallen bezoekers tegelijk. Zet langere video’s op YouTube of Vimeo, of gebruik een CDN. Je krijgt er automatische compressie, meerdere kwaliteitsniveaus en servers dicht bij je bezoeker voor terug.

Let wel op: een standaard YouTube-embed trekt al bij het laden van je pagina honderden kilobytes aan scripts binnen, ook als niemand op play drukt. Gebruik daarom een lichte variant die alleen een afbeelding en een play-knop toont, en de echte speler pas inlaadt na een klik.

Laad de video pas als het nodig is

Voor video’s die je wel zelf host, doe je het volgende:

1. Geef een poster mee. Dat is de afbeelding die direct zichtbaar is terwijl de video nog laadt. Zonder poster zie je een zwart vlak.
2. Zet preload op none of op metadata. Zonder die instelling begint de browser het hele bestand te downloaden, ook als de video onder de vouw staat en niemand er ooit komt.
3. Autoplay alleen zonder geluid en alleen als de video echt decoratief is. Een pratend hoofd dat vanzelf begint, jaagt mensen weg.
4. Laad video’s die verder op de pagina staan pas in wanneer ze bijna in beeld komen.

Controleer of het geholpen heeft

Meet altijd na. Draai je pagina door PageSpeed Insights en kijk naar de mobiele score, niet naar de desktopscore. Open het netwerktabblad van je browser en check hoeveel megabyte er binnenkomt voordat je iets hebt aangeklikt. Zie je daar nog steeds je videobestand volledig langskomen, dan is je preload-instelling niet doorgekomen.

Twijfel je of je laadtijd je rankings in de weg zit, vraag dan een gratis SEO-scan aan. Daarin zie je meteen welke pagina’s op snelheid onderuitgaan en waar het aan ligt.

« Back to Glossary Index