Het attribuut loading="lazy" vertelt de browser laden uit te stellen van een afbeelding of iframe totdat deze bijna in beeld komt — bespaart bandbreedte en versnelt het initiële laden, zonder JavaScript.
html
Het attribuut loading="lazy" vertelt de browser laden uit te stellen van een afbeelding of iframe totdat deze bijna in beeld komt — bespaart bandbreedte en versnelt het initiële laden, zonder JavaScript.
lazy — laden alleen wanneer scrollen het dicht bij de viewport brengt.eager (standaard) — onmiddellijk laden, ongeacht positie.De browser gebruikt een marge (laadt iets voordat het element in beeld scrollt) zodat de afbeelding meestal gereed is wanneer de gebruiker het ziet.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Zonder afmetingen (of een aspect-ratio), heeft de lui geladen afbeelding geen gereserveerde ruimte, dus wanneer deze laadt springt de pagina — wat schadelijk is voor Cumulative Layout Shift (CLS). Reserveer altijd ruimte.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lui laden van de Largest Contentful Paint afbeelding schaadt eigenlijk de prestatie — het vertraagt de meest belangrijke pixel. Laad alleen off-screen media lui.
// 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; });
});
Natief loading="lazy" maakte dit in de meeste gevallen overbodig (hoewel IntersectionObserver nog steeds nuttig is voor aangepaste logica).
Natief lazy loading verlaagt initiële bytes en verzoeken voor lange pagina's met veel afbeeldingen — een groot voordeel op mobiel — gratis.
De nuances zijn belangrijk: reserveer afmetingen om CLS te beschermen, en houd above-the-fold/LCP afbeeldingen eager (zelfs fetchpriority="high") zodat de belangrijke inhoud nog steeds snel laadt.