Een introductievideo op je homepage, is dat een goed idee?

5
minuten

Het is natuurlijk gewoon vet, zo’n paginabrede introductievideo bovenaan je homepage, waar dan een transparant menu en eventueel je bedrijfsmotto overheen geplaatst zijn. Modern, aantrekkelijk, pakt direct de aandacht. Maar wat betekent dit voor de laadsnelheid van je pagina, en de milieu-impact?

Voor de duidelijkheid: we hebben het hier niet over een embedded Youtubespeler die je naast een stuk tekst plaatst, en waar mensen zelf op kunnen klikken om hem af te spelen. We hebben het over een paginabrede introductievideo die als een soort header of eerste sfeerbeeld dient. Vaak zonder geluid, speelt automatisch af, en blijft zichzelf herhalen.

Mogelijke problemen

  • Uploadlimiet
    Wanneer je het bestand naar je website wilt uploaden, krijg je de melding dat het te groot is en de uploadlimiet overschrijdt. Ja, kak. Dit kun je meestal oplossen aan de kant van de hosting, of als je niet zo technisch bent, kun je een WordPress plugin als Tuxedo gebruiken.
  • Laadtijd van je pagina
    Problematischer is dat het de laadtijd van je pagina ENORM vertraagt. Echt no joke. Zie de berekeningen hieronder. Alleen om deze reden is het belangrijk om je video zo klein mogelijk te houden, en dan heb je vanzelf waarschijnlijk al geen last meer van die uploadlimiet.
  • CO2-uitstoot
    En tot slot hebben we het nog even over de milieu-impact. Een grote video die automatisch afspeelt, en daarmee dus ongevraagd automatisch inlaadt, dat is heel veel data die verstuurd moet worden. Ofwel: heel veel energie en dus CO2-uitstoot.

Zo bereken je de laadtijd van je video

Laten we even een voorbeeldje nemen van een case waar ik laatst mee te maken kreeg. De klant had een ontzettend toffe video, maar die was 57 seconden lang en 74 MB groot. Hoeveel tijd kost het dan om die video te laden?

  • Laten we even uitgaan van een normale 4G-verbinding, dat is 20 mbit per seconde.
  • Je video is in totaal 74 MB x 8 bits per byte = 592 mbit.
  • Dus het laden via een 4G verbinding duurt 592 / 20 = 29,6 seconden.

Dat betekent dat het een halve minuut duurt voordat je pagina geladen is. Wil je dat? NEE. Je bezoeker is waarschijnlijk al weg voordat hij je website heeft bekeken.

Nemen we een video van 10 MB (nog steeds erg groot en zwaar), dan scheelt dat al behoorlijk wat:

  • 10 MB x 8 bits per byte = een video van 80 mbit
  • 80 / 20 = 4 seconden

Ziet er al beter uit, maar is alsnog erg lang.

Internetsnelheid kan variëren

Afhankelijk van de soort verbinding kan de snelheid variëren. Een vaste internetverbinding ligt in Nederland gemiddeld op zo’n 100-120 mbit per seconde. De video van 74 MB zal ongeveer 5-6 seconden nodig hebben om te laden via zo’n verbinding, en de video van 10 MB minder dan een seconde.

Wij hebben thuis een verbinding van 80 mbit, maar toen ik op de universiteitscampus woonde, hadden we gigabit internet, ofwel 1000 mbit!

Houd er wel rekening mee dat in Nederland het internet uitzonderlijk goed geregeld is. In andere landen kan dat een stuk minder zijn. Wil je met je website een internationaal publiek aanspreken, houd daar dus rekening mee en ga uit van de berekeningen voor 4G als handvat.

Zo bereken je de CO2-uitstoot van je video

Op basis van de gegevens in dit artikel, stoot 1 MB dataverkeer 0,358 g CO2 uit.

Volledige berekening
  • 442 g CO2 * 0,81 kWh = 358,02 g CO2 / GB
  • 358,02 / 1000 = 0,35802 g CO2 / MB
  • 0,35802 * 3 = 1,07406 g CO2 / 3 MB

Hieruit volgt dat een video van 74 MB zorgt voor afgerond 26,5 g CO2 per keer dat je video wordt geladen. Wordt de pagina in kwestie 1000x bezocht, dan is dat bij elkaar 26,5 kg. En heb je een beetje goedbezochte website, dan zit je daar ontzettend snel aan!

Ook de video van 10 MB is nog steeds niet mals: die zorgt per keer dat hij geladen wordt voor 3,58 g CO2-uitstoot.

Conclusie: om duurzaamheidsredenen wil je dus liever geen paginabrede video’s als hero header. Het ziet er hip uit, maar als je duurzaamheid belangrijk vindt, kun je beter naar een alternatief zoeken.

Tips voor video op je website

  • Gebruik alleen video als het écht nodig is
    Vraag jezelf heel streng af: is video echt de enige of beste manier om je doel te bereiken? Kan dat niet op een lichtgewichter manier?
  • Exporteer geen geluid mee
    Heeft je video geen geluidsspoor nodig, exporteer het dan ook niet mee. Scheelt in je bestandsgrootte, plus geen enkele internetter waardeert automatisch afspelend geluid. Dus doe vooral geen moeite 😉
  • Niet groter dan nodig
    Tot nu toe is de grootste schermgrootte die ik ben tegengekomen in mijn Analytics 1920 pixels breed. Pas je video hier dus op aan. * Toon je de video niet fullscreen, dan kun je nog kleiner gaan.
  • Gebruik een moderne codec
    Zo kun je je video zeer goed comprimeren zonder in te boeten op kwaliteit. Met slechtere kwaliteit codecs kan je video soms wat wazig worden bij het verkleinen en comprimeren, en dat brengt je natuurlijk in de verleiding om toch voor een groter formaat te gaan. Gebruik je een goede kwaliteit codec, dan kun je ook prima de exportkwaliteit omlaag schroeven zonder dat je daar iets van merkt.
  • Houd je video zo kort mogelijk
    Goes without saying. Kom direct terzake. Gaat het om een videoloopje voor sfeer, houd dat dan zo kort mogelijk.
  • Vermijd automatisch afspelen
    Zet autoplay uit en preload op “none” of eventueel op “meta”.
  • Size matters!
    Last but nog least: Zorg dat de bestandsgrootte van je video zo klein mogelijk is. Probeer het onder de 1MB te houden, liefst nog kleiner.

* Okee, je hebt altijd van die mensen (zoals mijn wederhelft) die een dubbelbreed of zelfs driedubbelbreed scherm kopen, maar die zijn zeldzaam, en het browservenster opent doorgaans niet op volledige schermbreedte.

Disclaimer: Met dank aan Paul voor de berekeningen!

Wil jij een website of webshop laten bouwen die niet alleen mooi en functioneel is, maar ook met aandacht voor duurzaamheid gebouwd is? Digihobbit at your service!

Scroll naar boven