Vårstäda din webbplats: Lazy loading

Lazy loading

Lazy loading innebär att innehåll laddas in fördröjt, vanligtvis när användaren behöver innehållet. Exempelvis om en bild ligger långt ner på en sida laddas bilden först när användaren scrollat ner på sidan. Detta leder till att mindre data behöver skickas när en webbsida laddas. Webbsidan laddar snabbare och mindre resurser används.

Bilder, iframes, ljud och video kan idag laddas in fördröjt med HTMLs loading-attribut. Trots detta är det väldigt vanligt att stöta på webbsidor som använder JavaScript för detta.

Så här enkelt är det att ladda in bilder med fördröjning

En annan fördel är att detta också gör att dolda bilder inte laddas in förrän de visas. Det är lätt att tro att webbläsare inte kommer ladda in bilder för img-element som döljs med CSS display: none, men bilden laddas faktiskt in även fast den inte syns. I kombination med loading="lazy" laddas bilden inte förrän bilden blir synlig.

Om en video från YouTube bäddas in med ett iframe-element kommer det att laddas in över en megabyte data innan användaren ens har scrollat till eller startat videon. Genom att använda fördröjd inladdning för iframe laddas informationen först när videon är på väg att bli synlig på skärmen.

Exempel på iframe med lazy loading

Webbläsarstöd

Loading-attributet har haft stöd i alla webbläsare sedan 2022 och är markerat som Baseline Widely available.

Du hittar fler tips i artikelserien Vårstäda din webbplats.