De audiospeler wordt standaard lazy-loaded. De JavaScript en CSS worden pas geladen wanneer de bezoeker er naartoe scrolt. Zo blijft de Largest Contentful Paint (LCP) van je pagina snel.
Wat lazy load doet
- Bij het laden van de pagina wordt een kleine placeholder weergegeven op de positie van de speler
- JavaScript en CSS voor de volledige speler worden NOG NIET geladen
- Wanneer de bezoeker binnen 500px van de speler scrolt, laadt de volledige speler en vervangt de placeholder
- De overgang verloopt visueel vloeiend (meestal onder 100 ms)
Waarom het Core Web Vitals verbetert
Zonder lazy load betaalt elke pagina met een speler de prijs van de speler-JS en CSS bij het eerste laden. Met lazy load:
- LCP: niet beinvloed - de speler bevindt zich niet in de zichtbare inhoud boven de vouw
- INP: niet beinvloed - er wordt geen zware JS bij het laden uitgevoerd
- CLS: niet beinvloed - de placeholder heeft dezelfde hoogte als de uiteindelijke speler
Wanneer je het uitschakelt
Lazy load staat standaard aan. Schakel het uit als:
- Je speler altijd boven de vouw staat (zelden)
- Je autoplay gebruikt en de speler direct klaar wil hebben (heel zelden)
- Je wil testen zonder lazy load voor foutopsporing
Hoe je het uitschakelt
- Ga naar Tekst naar spraak - TTSWP → Geavanceerd.
- Zet Lazy load speler uit.
- Sla op.
Hoe het technisch werkt
- De plugin gebruikt
IntersectionObserverom te detecteren wanneer de speler in beeld scrollt - Bij intersectie worden de benodigde JS en CSS dynamisch geladen
- Eenmaal geladen blijven de scripts gecached in de browser voor de rest van de sessie
Browsers zonder IntersectionObserver (zeer oud) vallen terug op het laden van scripts bij het laden van de pagina.
Bekende randgevallen
Speler in een verborgen element
Als je speler zich in een display: none-sectie bevindt (zoals een ingeklapt accordeon), wordt lazy load niet geactiveerd totdat de sectie zichtbaar wordt. Dat is meestal gewenst - het heeft geen zin om te laden wat niet wordt getoond.
Audio autoplay
Als je autoplay op de speler instelt en deze lazy-loaded is, speelt hij pas af wanneer de bezoeker ernaartoe scrolt. Autoplay start zodra de speler geladen is.