Attributten loading="lazy" fortæller browseren at udskyde indlæsning af et billede eller iframe, indtil det er ved at komme ind i viewport — hvilket sparer båndbredde og fremskynder initial indlæsning, helt uden JavaScript.
html
Attributten loading="lazy" fortæller browseren at udskyde indlæsning af et billede eller iframe, indtil det er ved at komme ind i viewport — hvilket sparer båndbredde og fremskynder initial indlæsning, helt uden JavaScript.
lazy — indlæs kun når scrolling bringer det tæt på viewport.eager (standard) — indlæs med det samme, uanset position.Browseren bruger en margin (indlæser lidt før elementet scrolles ind i view), så billedet er normalt klar, når brugeren ser det.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Uden dimensioner (eller en aspect-ratio) har det lazy-indlæst billede intet reserveret plads, så når det indlæses springer siden — hvilket skader Cumulative Layout Shift (CLS). Reserver altid plads.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lazy-loading af Largest Contentful Paint billedet faktisk skader performance — det forsinker de vigtigste pixels. Lazy-load kun media uden for skærmen.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
Native loading="lazy" fjernede behovet for dette i de fleste tilfælde (selvom IntersectionObserver stadig er nyttig til custom logik).
Native lazy loading reducerer indledende bytes og requests for lange sider med mange billeder — en stor gevinst på mobil — gratis.
Nuancerne betyder noget: reserver dimensioner for at beskytte CLS, og hold billeder over fold/LCP eager (selv fetchpriority="high") så vigtigt indhold stadig indlæses hurtigt.