Lazy loading betyder, at en ressource først hentes, når den nærmer sig det synlige område eller bliver nødvendig. Teknikken bruges især til billeder og iframes længere nede på en side og kan spare data og arbejde ved den første indlæsning.
Hvornår hjælper lazy loading?
På lange eller billedtunge sider undgår browseren at hente alt med det samme. Det kan give flere ressourcer til det indhold, brugeren ser først. Billeder og iframes kan ofte bruge browserens indbyggede attribut loading="lazy".
Hvad bør ikke lazy loades?
Et centralt billede eller andet vigtigt indhold above the fold bør normalt indlæses med det samme. Lazy loading af sidens største synlige element kan forsinke oplevelsen. Prioritér derfor det indhold, der er nødvendigt i den første skærmvisning.
Lazy loading og SEO
Google anbefaler løsninger, der ikke kræver brugerhandlinger som klik eller scrolling for at gøre indhold tilgængeligt. Google Search scroller eller klikker ikke for at udløse indhold. Hvis JavaScript bruges, skal ressourcerne kunne indlæses automatisk ud fra synlighed og være tilgængelige for crawlere.
Typiske fejl
- Billedets URL findes kun i en specialattribut, som aldrig omsættes til en rigtig kilde.
- Indhold hentes først efter klik eller scroll-hændelser.
- Billeder mangler bredde og højde, så layoutet hopper, når de indlæses.
- En placeholder har samme alt-tekst som det endelige billede og skaber støj.
- Fejl i JavaScript efterlader tomme områder.
Sådan tester du
Indlæs siden på en langsom mobilforbindelse, og kontrollér netværksloggen. Bekræft, at indhold tæt på visningen hentes i tide, at billeder har plads reserveret, og at en gengivet test kan se tekst og links uden brugerhandling.