Lazy loading
Lazy loading is de techniek waarbij afbeeldingen, iframes of scripts pas worden geladen zodra ze bijna in de viewport verschijnen, waardoor initial pagelaad sneller is.
Lazy loading verlaagt de initiële laadtijd door elementen below-the-fold pas binnen te halen wanneer ze relevant worden. Het native attribuut loading="lazy" op <img> en <iframe> werkt in alle moderne browsers. Correct toegepast verbetert lazy loading zowel LCP als mobiel databundel-gebruik aanzienlijk.
Voorbeeld
Een recepten-blog met 40 foto's per artikel liet alle beelden eager laden. Met loading="lazy" op alles behalve de eerste afbeelding daalt de gemiddelde LCP van 4,1s naar 2,2s.
Veelgestelde vragen
Lazy loading op het LCP-element?
Nooit. Het grootste zichtbare element moet meteen beschikbaar zijn. Lazy loading op LCP maakt je score slechter.
Werkt lazy loading zonder JavaScript?
Ja, via het native browser-attribuut. IntersectionObserver-based JS-lazyload is alleen nodig voor achtergrondafbeeldingen of oudere browser-support.
Kan Google lazy-loaded content indexeren?
Ja, mits correct geïmplementeerd (native attribuut of IntersectionObserver met paged loading). Infinite-scroll zonder pagineringsalternatief kan wel indexering-issues geven.
Gerelateerde termen
Verder lezen
- → Onze dienst: SEO