Forestil dig, at din side har 20 billeder, men at en besøgende i starten kun ser de 2 første. Hvorfor skulle browseren hente alle 20 på én gang? Det er præcis det problem, lazy loading (udskudt indlæsning) løser.
Hvad sker der uden lazy loading?
Browseren henter alle billeder, så snart siden indlæses. Også fotos helt nede i bunden, som den besøgende måske aldrig ser. Resultat:
- En langsom første indlæsning (den besøgende venter på, at alt er indlæst)
- Spildt mobildata (billeder, som ingen ser)
- En dårlig PageSpeed-score
Hvad bruges lazy loading til?
Med lazy loading indlæser browseren kun de synlige billeder (eller dem, der snart bliver synlige). Så snart den besøgende scroller ned, indlæses de næste billeder »lige til tiden«.
Fordele:
- En hurtigere første indlæsning, fordi der hentes mindre
- Mindre dataforbrug for besøgende på mobilen
- Bedre PageSpeed- og LCP-scorer
- Stopper en besøgende med at læse midt på siden: endnu mindre spildt data
Hvornår du IKKE skal bruge lazy loading
Vigtigt: brug ALDRIG udskudt indlæsning på hovedbilledet øverst på siden. Det skal indlæses med det samme, fordi det som regel er dit LCP-element (Largest Contentful Paint, altså det største synlige element ved indlæsningen). Udskyder du det, bliver din LCP-score dårligere i stedet for bedre.
Enkel regel: de 1 eller 2 første billeder på »eager« (med det samme), alle de andre på »lazy«.
Hvordan slår du lazy loading til?
Siden 2020 har der været en indbygget HTML-attribut: loading="lazy". Din webdesigner tilføjer den til billedets tag:
<img src="foto.jpg" alt="..." loading="lazy">
I WordPress: siden version 5.5 (2020) har lazy loading været slået til som standard. Nye billeder får automatisk attributten loading="lazy". Til hjemmesider fra før 2020 kan du bruge et plugin som a3 Lazy Load eller WP Rocket.
Hvordan tjekker du, at det er slået til?
Højreklik på et billede på din side (ikke hovedbilledet), vælg »Inspicér«, og se i koden, om img-tagget indeholder loading="lazy". Gør det det: perfekt. Hvis ikke: kontakt din webdesigner.