Een video-achtergrond in de 'hero' sectie van je website is enorm populair. Het ziet er dynamisch, modern en indrukwekkend uit. We hebben het zelf ook geïmplementeerd op onze eigen homepage.
Een logische vervolgvraag is dan: "Kan die video niet gewoon op alle pagina's? Dat is toch een mooie, consistente look?"
Mijn antwoord daarop is: Nee, dat is een heel slecht idee.
Het is een klassiek geval van esthetiek versus prestaties. En als je serieus bent over je website, wint prestatie (snelheid en vindbaarheid) altijd. Hier is waarom.
Het verschil: de 'voordeur' vs. de 'binnenkamers'
Je homepage is je digitale voordeur. Bezoekers komen daar vaak binnen door direct je naam in te typen. Hier wil je een verpletterende eerste indruk maken. Een (perfect geoptimaliseerde) video is hier op zijn plaats.
Al je andere pagina's (je diensten, je blog, je 'over ons' pagina) zijn geen voordeuren; het zijn binnenkamers of zijingangen. Bezoekers komen hier direct binnen vanuit Google, op zoek naar specifieke informatie.
De 3 nadelen van een video op elke pagina
Wanneer je diezelfde video op elke subpagina plaatst, gebeuren er drie dingen die funest zijn voor je online succes:
1. Het sloopt je SEO (Core Web Vitals) Een bezoeker die zoekt op "wat kost een website" en op jouw dienstenpagina landt, heeft geen interesse in je sfeervideo. Toch moet zijn browser eerst die video laden (in ons geval 1.11 MB) voordat de pagina bruikbaar is.
Dit vernietigt je LCP-score (Largest Contentful Paint), een van de allerbelangrijkste Core Web Vitals van Google. Elke afzonderlijke pagina op je site wordt onnodig traag. Het resultaat: Google zal je lager ranken omdat je pagina's niet voldoen aan de snelheidseisen.
2. Het werkt niet op mobiel (en frustreert wel) De meeste mobiele browsers (vooral op iPhones) blokkeren het automatisch afspelen van video's om data en batterij te besparen. Mobiele bezoekers (meer dan de helft van je verkeer) zien de video dus niet eens. Wat ze wel doen, is die 1.11 MB data onnodig downloaden, om vervolgens alleen de statische 'poster' afbeelding te zien. Zonde van hun databundel en funest voor de laadtijd.
3. Het leidt af van het doel Wat indrukwekkend is op de homepage, wordt een afleiding op een dienstpagina. Een bezoeker op je 'Over ons' pagina probeert te lezen wie je bent. Een constant bewegende achtergrond leidt de aandacht af van de daadwerkelijke inhoud en de call-to-action.
Bonus: hoe krijg je een video wél onder de 2MB?
Een video op je homepage is alleen acceptabel als deze extreem goed is geoptimaliseerd. Onze eigen video van 5 seconden is slechts 1.11 MB. Hoe?
We gebruiken hiervoor een gratis, open-source tool genaamd HandBrake. Dit is onze 'no-nonsense' methode:
-
Verwijder de audio: Een achtergrondvideo heeft geen geluid nodig. In HandBrake kun je onder het tabblad 'Audio' de audiotrack volledig verwijderen. Dit scheelt direct.
-
Maak het kort: Elke seconde telt. Onze video is maar 5 seconden.
-
Forceer de bitrate: Dit is de échte truc. Ga naar het tabblad 'Video', kies voor 'Avg Bitrate (kbps)' en stel een doel in (bv. 3000 kbps). Vink '2-Pass Encoding' aan. Dit duurt langer, maar geeft een veel betere kwaliteit bij een kleiner bestand.
De Welldotcom-oplossing: het beste van twee werelden
Hoe krijg je wel de 'wow'-factor van video, zonder de nadelen voor je SEO en je mobiele bezoekers? De oplossing is om slimme keuzes te maken op basis van het paginatype en het apparaat.
1. Op de homepage (De 'voordeur') Hier wil je indruk maken, maar je mobiele bezoekers niet straffen. De beste aanpak is om twee versies van je hero-sectie te maken:
-
Desktop-versie: Een sectie met je geoptimaliseerde video-achtergrond. In YOOtheme Pro stel je deze in op "Zichtbaar op: Medium (tablet) en groter".
-
Mobiele versie: Een gedupliceerde, lichtere sectie met een geoptimaliseerde statische afbeelding. Deze stel je in op "Zichtbaar op: Small (mobiel) en kleiner".
Resultaat: Desktopbezoekers krijgen de volledige video-ervaring, terwijl mobiele bezoekers (die de video vaak toch niet kunnen afspelen) een razendsnelle pagina krijgen zonder onnodige data te laden.
2. Op alle subpagina's (Je 'zijingangen') Hier is het startpunt altijd snelheid en focus. Gebruik op de hero-sectie van deze pagina's alleen de statische afbeelding (bv. een 'poster frame' van je video).
3. De YOOtheme Pro 'Ken Burns' truc Wil je toch subtiele beweging op die subpagina's? Activeer het 'Ken Burns' effect (langzaam in- of uitzoomen) op die statische afbeelding. Dit geeft een levendig en premium gevoel, en kost geen extra laadtijd.
Een website bouwen is keuzes maken. En de juiste, nuchtere keuze is om je homepage te optimaliseren voor elk apparaat, en je subpagina's altijd te optimaliseren voor snelheid en conversie.
Kennis omzetten in resultaat?
Een informatief artikel is een goed startpunt. Maar de echte groei voor je bedrijf zit in de professionele uitvoering. Geen tijd of zin om zelf met de techniek, het ontwerp of de vindbaarheid van je website aan de slag te gaan? Als jouw partner nemen we dit werk graag volledig uit handen. Zo kun jij je focussen op wat echt telt: je onderneming.