Een zware achtergrondvideo op mobiel vervangen

Vervang niets voordat je weet wat de video kost. De MDN-pagina over webperformance beschrijft prestatie als objectieve metingen én als gepercipieerde ervaring: laadtijd, reactiesnelheid en hoe vloeiend de pagina aanvoelt. Een video kan beide beïnvloeden.

Doe deze diagnose op een echte smartphone en niet alleen op je bureaucomputer:

1. Open de pagina op mobiel met een gewone verbinding en daarna met een tragere (veel browsers hebben een ontwikkeltool om netwerk te vertragen).
2. Kijk in het netwerkoverzicht van de ontwikkeltools hoeveel gegevens de video aanvraagt en wanneer die begint te laden.
3. Observeer wanneer de belangrijkste tekst en knop zichtbaar worden. Verschijnen ze pas na de video?
4. Let op haperingen bij scrollen.
5. Noteer deze waarnemingen als uitgangspunt, zodat je na de wijziging kunt vergelijken.

Als de video weinig laadt of nauwelijks invloed heeft op wat de bezoeker ziet, is vervangen mogelijk niet nodig. Dan is de winst klein en kost de wissel onnodig werk.

Een goed vervangbeeld geeft dezelfde sfeer als de video zonder af te leiden of te vervormen. Kies een beeld dat rustig is, waarop je tekst goed leesbaar blijft en dat past bij de verhoudingen van een smal scherm.

Gebruik een kader uit de video zelf of een bestaande foto die bij je aanbod past. Let op de volgende punten:

• Compositie: het onderwerp moet zichtbaar blijven wanneer het beeld op een staand scherm bijgesneden wordt.
• Contrast: controleer of de tekst erboven leesbaar blijft, ook in felle buitenlucht.
• Bestandsgrootte: pas het beeld aan op de breedte die het werkelijk krijgt en kies een efficiënt bestandsformaat. De cursus web.dev Learn Performance bevat een module over beeldprestaties over het optimaliseren en doelmatig serveren van afbeeldingen, en een aparte module over videoprestaties. Welk bestand een toestel echt laadt, hangt onder meer af van schermbreedte, pixeldichtheid en cache. Controleer dat daarom in het netwerkoverzicht op je eigen toestellen.
• Toegankelijkheid: als het beeld louter decoratief is, hoeft het geen beschrijvende tekst te krijgen. Als het inhoud draagt, voeg dan een passende alternatieve tekst toe.

Het doel is niet het mooiste beeld, maar een beeld dat de pagina niet vertraagt en de boodschap niet verstoort.

De uitvoering hangt af van je website of pagina-bouwer. Controleer in de beheeromgeving van je eigen site of er een instelling bestaat om op mobiel een ander beeld te tonen; verzin geen menunamen en vraag zo nodig je webbouwer. Het stappenplan is technologieonafhankelijk.

1. Leg de huidige toestand vast. Maak schermafbeeldingen van desktop en mobiel, en noteer de metingen uit de diagnose.
2. Bereid het beeld voor. Snij bij op staand formaat en verklein tot de werkelijk getoonde afmeting.
3. Stel de voorwaarde in. Toon het stilstaande beeld op smalle schermen en de video alleen op brede schermen, of verwijder de video volledig als je dat verkiest.
4. Laad de video niet onnodig. Zorg dat een mobiele bezoeker de videobestanden niet toch ophaalt en daarna verbergt. Controleer dit in het netwerkoverzicht, bij een verse bezoeker zonder cache en bij meerdere schermbreedtes.
5. Behoud de inhoud. Zorg dat tekst, knoppen en eventuele ondertitels of betekenisvolle beelden uit de video elders op de pagina behouden zijn.
6. Test op meerdere toestellen. Minstens één iPhone- en één Android-toestel indien mogelijk, plus een smalle browservenster op desktop.
7. Publiceer en vergelijk. Herhaal de metingen uit de diagnose.

Doe dit in een testomgeving of buiten piekuren als je site veel verkeer heeft.

Gebruik deze tabel om per pagina te beslissen. Het zijn richtlijnen voor je eigen afweging, geen vaste drempels.

Als je twijfelt, begin met de pagina die het meeste mobiele verkeer krijgt en vergelijk voor en na.

Dit is een invoerscenario met verwachte controles, zonder verzonnen resultaten. Stel dat een fictieve kmo een homepage heeft met een achtergrondvideo achter de kop en de belangrijkste knop.

Opdracht aan de webbouwer: 'Toon op smalle schermen een stilstaand beeld in plaats van de video. De kop en de knop blijven op dezelfde plaats. De video blijft op brede schermen.'

Verwachte controles:

• Op een smal scherm verschijnt het stilstaande beeld en speelt er geen video.
• In het netwerkoverzicht van de ontwikkeltools wordt het videobestand op een smal scherm niet opgehaald.
• De kop en de knop zijn zichtbaar en leesbaar boven het beeld.
• Op een breed scherm speelt de video nog zoals voorheen.
• Het toetsenbord bereikt de knop zonder dat een video de focus verstoort.

Vraag de bouwer om te melden wat er niet kon worden getest. Zo weet je waar een extra controle nodig is.

Herhaal na de wijziging de metingen uit de diagnose op dezelfde toestellen en verbindingen, zodat je eerlijk kunt vergelijken. Let op wat de bezoeker ziet en wanneer, niet alleen op getallen. De toegankelijkheidstutorials van het W3C benadrukken inhoud die voor iedereen bruikbaar is; controleer daarom ook of bijschriften, tekstalternatieven en contrast nog kloppen nu de video verdwenen is.

Meet niet eenmalig. Controleer na enkele weken opnieuw, want een nieuwe plug-in, een grotere afbeelding of een ander script kan het resultaat teniet doen. Een verbetering van de snelheid is niet gegarandeerd; het is een aanname die je met je eigen metingen toetst.

Wil je zien welke publieke signalen je website vandaag afgeeft? Bekijk de publieke signalen van je eigen website via Marketing Scan. Een publieke scan meet zichtbare signalen en vervangt geen test op je eigen toestellen.