Lyttespilleren lastes inn med lazy load som standard. Den laster ikke JavaScript eller CSS før den besøkende scroller nær den. Dette holder sidens Largest Contentful Paint (LCP) rask.
Hva lazy load gjør
- Når siden lastes, vises en liten plassholder der spilleren skal være
- JavaScript og CSS for den fulle lyttespilleren lastes IKKE inn ennå
- Når den besøkende scroller innen 500 px av spilleren, lastes den fulle spilleren og erstatter plassholderen
- Overgangen er visuelt jevn (vanligvis under 100 ms)
Hvorfor det hjelper Core Web Vitals
Uten lazy load betaler hver side med en spiller kostnaden for spiller-JS og CSS ved innlasting. Med lazy load:
- LCP: upåvirket - spilleren er ikke i innholdet over folden
- INP: upåvirket - ingen tung JS kjører ved innlasting
- CLS: upåvirket - plassholderen har samme høyde som den ferdige spilleren
Når du bør skru det av
Lazy load er på som standard. Skru det av hvis:
- Spilleren din er alltid over folden (sjeldent)
- Du bruker autoplay og vil at spilleren skal være klar øyeblikkelig (svært sjeldent)
- Du vil teste uten lazy load for feilsøking
Slik skrur du det av
- Gå til Tekst til Tale → Avansert.
- Slå Lazy load-spiller til av.
- Lagre.
Slik fungerer det teknisk
- Programtillegget bruker
IntersectionObserverfor å oppdage når spilleren scroller inn i visningsfeltet - Ved skjæringspunkt lastes nødvendig JS og CSS dynamisk
- Når de er lastet, forblir skriptene mellomlagret i nettleseren for resten av økten
Nettlesere uten IntersectionObserver (svært gamle) faller tilbake til å laste skript ved sideinnlasting.
Kjente kanttilfeller
Spiller inne i et skjult element
Hvis spilleren din er inne i en display: none-seksjon (som et sammenslått trekkspill), utløses ikke lazy load før seksjonen blir synlig. Vanligvis er dette ønskelig - det er ingen grunn til å laste inn noe som ikke vises.
Lyd autoplay
Hvis du setter autoplay på spilleren og den lastes med lazy load, spiller den ikke av før den besøkende scroller til den. Autoplay starter så snart spilleren lastes.