Ljudspelarens inläsning sker som standard med lazy load. Den laddar inte sitt JavaScript eller CSS förrän besökaren scrollar nära den. Det håller sidans Largest Contentful Paint (LCP) snabb.
Vad lazy load gör
- Vid sidinläsning visas en liten platshållare i spelarens position
- JavaScript och CSS för den fullständiga spelaren laddas INTE än
- När besökaren scrollar inom 500 px av spelaren laddas den fullständiga spelaren och ersätter platshållaren
- Övergången är visuellt smidig (vanligtvis under 100 ms)
Varför det hjälper Core Web Vitals
Utan lazy load betalar varje sida med en spelare kostnaden för spelarens JS och CSS vid den första inläsningen. Med lazy load:
- LCP: opåverkad - spelaren finns inte i innehållet ovanför mitten
- INP: opåverkad - inget tungt JS körs vid inläsning
- CLS: opåverkad - platshållaren har samma höjd som den slutliga spelaren
När du ska stänga av det
Lazy load är aktiverat som standard. Stäng av det om:
- Din spelare alltid är ovanför mitten (sällsynt)
- Du använder autoplay och vill att spelaren är redo direkt (mycket sällsynt)
- Du vill testa utan lazy load för felsökning
Så stänger du av det
- Gå till Text till tal - TTSWP → Avancerat.
- Slå av Lazy load-spelare.
- Spara.
Hur det fungerar tekniskt
- Insticksprogrammet använder
IntersectionObserverför att upptäcka när spelaren scrollas in i vyn - Vid korsning laddas nödvändigt JS och CSS dynamiskt
- När de väl laddats sparas skripten i webbläsarens cache under resten av sessionen
Webbläsare utan IntersectionObserver (mycket gamla) faller tillbaka på att ladda skript vid sidinläsning.
Kända kantfall
Spelare inuti ett dolt element
Om din spelare finns inuti ett display: none-avsnitt (som ett ihopfällt dragspel) utlöses inte lazy load förrän avsnittet blir synligt. Det är vanligtvis önskvärt - det är ingen idé att ladda det som inte visas.
Autoplay för ljud
Om du ställer in autoplay på spelaren och den laddas med lazy load, spelas den inte upp förrän besökaren scrollar till den. Autoplay startar så snart spelaren laddas.