Video op je website zonder vertraging

Het probleem

Videobestanden zijn groot. Als de browser bij het openen van de pagina meteen een volledige video downloadt, duurt het laden lang en verbruikt de bezoeker data. Dat is slecht voor de ervaring en voor je Core Web Vitals. Lees waarom laadtijd telt.

Comprimeren

Lever video op je website niet in de kwaliteit van je master aan. Maak een versie met een passende resolutie en bitrate voor het web. Een achtergrondvideo kan vaak lager in resolutie dan je denkt, zeker als er tekst overheen staat. Moderne codecs geven bij hetzelfde bestandsformaat een kleiner bestand.

Posterbeeld

Geef elke video een posterafbeelding: een stilstaand beeld dat direct verschijnt. Zo ziet de bezoeker meteen iets, ook voordat de video geladen is. Gebruik een gecomprimeerd beeldformaat zoals WebP.

Pas laden als het nodig is

Met de instelling preload="none" laadt de browser de video niet vooraf. Met een klein stukje JavaScript start je de video pas als hij in beeld komt, en pauzeer je hem als hij uit beeld gaat. Zo laden video's onderaan de pagina pas als de bezoeker daar is.

Achtergrondvideo's

Een achtergrondvideo moet stil zijn (muted), kort, als lus afspelen en de inhoud niet storen. Bied een manier om beweging te stoppen, en respecteer de instelling 'beweging beperken' van de bezoeker. Lees toegankelijke website.

Zelf hosten of een platform?

Video's via YouTube of Vimeo insluiten is makkelijk, maar laadt veel scripts en kan cookies plaatsen. Een alternatief is het platform pas laden na een klik op een voorbeeldbeeld. Zelf hosten op een snelle server of CDN geeft meer controle over laadtijd en privacy.

Afmetingen vastleggen

Geef de videocontainer een vaste beeldverhouding, zodat de opmaak niet verspringt als de video laadt.

Ondertitels en tekst

Voeg ondertitels toe als de video gesproken tekst heeft, en zet de belangrijkste informatie ook als tekst op de pagina. Zoekmachines en bezoekers die geen video kunnen afspelen, missen dan niets.

Meten

Test je pagina met PageSpeed Insights op mobiel. Kijk vooral naar het grootste element bij het laden. Is dat een video, zorg dan voor een lichte poster.

Formaat en compressie

Een video voor de achtergrond van je homepage hoeft niet in de hoogste kwaliteit. Een korte, goed gecomprimeerde loop in een moderne codec scheelt veel megabytes. Haal geluid eruit als de video toch zonder geluid speelt. Maak voor mobiel eventueel een lichtere versie.

Laden pas als het nodig is

Een video onderaan de pagina hoeft niet te laden voordat iemand ernaartoe scrolt. Met de juiste instellingen laadt de browser eerst alleen een voorbeeldbeeld, en de video pas als hij in beeld komt. Zo blijft de eerste weergave van de pagina snel.

Ingesloten video's

Een ingesloten YouTube- of Vimeo-speler laadt veel extra scripts, ook als niemand op afspelen klikt. Een veelgebruikte oplossing is eerst alleen een afbeelding met een afspeelknop te tonen, en de speler pas te laden na een klik. Dat is ook prettiger voor de privacy van bezoekers.

Toegankelijkheid

Automatisch afspelende video's moeten te pauzeren zijn, en bij voorkeur stil starten. Houd ook rekening met bezoekers die in hun instellingen hebben aangegeven minder beweging te willen zien.

Meten

Controleer na het plaatsen van video met PageSpeed Insights of de laadtijd goed blijft. Lees waarom de laadtijd van je website telt.

Poster

Kies een scherp voorbeeldbeeld dat ook zonder video goed werkt.

Bestandsgrootte

Controleer de grootte van elk videobestand voordat je het uploadt.

Kort samengevat: geef elke video een lichte posterafbeelding, laad het videobestand pas wanneer het in beeld komt en kies een formaat dat past bij de grootte waarop het getoond wordt. Meet de laadtijd voor en na de wijziging om het effect te zien.

FilmForge bouwt websites met video die snel blijven en maakt de video's zelf. Neem contact op.

Hulp nodig?

FilmForge maakt AI-video's en traditionele video's vanuit Voorthuizen. AI maakt het beeld, editors maken de film: script, regie, montage, kleur en geluid. We werken voor ondernemers in Barneveld, Amersfoort en Gelderland, en AI-video's maken we volledig op afstand voor heel Nederland. We zijn eerlijk als filmen op locatie beter past dan AI, en we gebruiken geen beschermde merken, personen of bestaande beelden zonder toestemming.

Bekijk onze diensten, lees de veelgestelde vragen of neem contact op.

Veelgestelde vragen over video op je website zonder vertraging

Lees ook

• Kleur en geluid: waarom de afwerking het verschil maakt
• Feedbackrondes efficiënt laten verlopen bij een videoproject
• Wat bepaalt het budget van een AI-video?

Vertel wat je
wilt bereiken

Mail je aanvraag naar daniel@filmforge.nl of bel 06 22 88 44 63. Je krijgt een voorstel op maat.