Lydafspilleren indlæses som standard via lazy load. Den indlæser ikke sit JavaScript eller CSS, før den besøgende scroller tæt på den. Det holder sidens Largest Contentful Paint (LCP) hurtig.
Hvad lazy load gør
- Ved sideindlæsning vises en lille pladsholder i afspillerens position
- JavaScript og CSS til den fulde afspiller indlæses IKKE endnu
- Når den besøgende scroller inden for 500 px af afspilleren, indlæses den fulde afspiller og erstatter pladsholderen
- Overgangen er visuelt glat (normalt under 100 ms)
Hvorfor det hjælper Core Web Vitals
Uden lazy load betaler hver side med en afspiller omkostningen for afspillerens JS og CSS ved den første indlæsning. Med lazy load:
- LCP: upåvirket - afspilleren er ikke i indholdet over folden
- INP: upåvirket - ingen tung JS kører ved indlæsning
- CLS: upåvirket - pladsholderen har samme højde som den færdige afspiller
Hvornår skal du slå det fra
Lazy load er slået til som standard. Slå det fra, hvis:
- Din afspiller altid er over folden (sjældent)
- Du bruger autoplay og vil have afspilleren klar med det samme (meget sjældent)
- Du vil teste uden lazy load til fejlfinding
Sådan slår du det fra
- Gå til Tekst til tale - Avanceret.
- Slå Lazy load-afspiller fra.
- Gem.
Sådan fungerer det teknisk
- Pluginet bruger
IntersectionObservertil at registrere, hvornår afspilleren scroller ind i visningsfeltet - Ved skæring indlæses det nødvendige JS og CSS dynamisk
- Når det er indlæst, forbliver scripts cachelagret i browseren for resten af sessionen
Browsere uden IntersectionObserver (meget gamle) falder tilbage til at indlæse scripts ved sideindlæsning.
Kendte grænsetilfælde
Afspiller inde i et skjult element
Hvis din afspiller er inde i en display: none-sektion (som et sammenfoldet akkordeon), udløses lazy load ikke, før sektionen bliver synlig. Det er som regel ønsket - ingen grund til at indlæse det, der ikke vises.
Audio autoplay
Hvis du indstiller autoplay på afspilleren, og den indlæses via lazy load, afspilles den ikke, før den besøgende scroller hen til den. Autoplay starter, så snart afspilleren indlæses.