Lazy loading van afbeeldingen: loading=lazy

Stel loading="lazy" nooit in voor afbeeldingen boven de vouw of voor je LCP-kandidaat (Largest Contentful Paint). Het uitgestelde laden vertraagt het belangrijkste visuele element, wat zowel de waargenomen snelheid als Core Web Vitals verslechtert.

Geef het <img>-element voor effectieve lazy loading expliciete width en height (of gebruik CSS met aspect-ratio). Zonder afmetingen kan de browser geen ruimte reserveren, verandert de lay-out tijdens het scrollen en werkt de heuristiek voor lazy loading niet goed.

Hetzelfde attribuut werkt op <iframe>. <iframe loading="lazy"> stelt het laden uit van kaarten, video's en insluitingen van sociale media onder de vouw — die anders bij elke weergave van de pagina megabytes aan JavaScript van derden zouden ophalen.

De standaardwaarde is loading="eager" (onmiddellijk laden) en wordt zelden expliciet geschreven. eager instellen voor afbeeldingen boven de vouw kan nuttig zijn als documentatie, omdat het aan reviewers laat zien dat de keuze voor eager bewust is gemaakt.

Lazy loading werkt perfect samen met responsieve afbeeldingen. De browser kiest nog steeds de juiste kandidaat uit srcset; alleen het downloaden wordt uitgesteld. Er is geen extra afstemming nodig tussen loading="lazy" en srcset.

Combineer lazy loading met decoding="async" zodat de browser de afbeelding buiten de hoofdthread kan decoderen. Zo wordt invoer niet geblokkeerd tijdens het scrollen wanneer na een lange scrollactie veel afbeeldingen tegelijk binnenkomen.

CSS background-image kan niet standaard met lazy loading worden geladen. Voor hero-achtergronden boven de vouw is dat geen probleem; gebruik voor achtergronden onder de vouw IntersectionObserver om de URL in te vullen wanneer het element de viewport nadert.

Wanneer de pagina wordt afgedrukt, laadt de browser elke afbeelding eager, ongeacht loading="lazy", zodat de afdruk compleet is. Je hoeft lazy afbeeldingen niet apart te behandelen in afdrukstijlen.

De controle "Defer offscreen images" van Lighthouse vermeldt elke afbeelding waarvoor loading="lazy" zou moeten worden gebruikt. Door het Netwerkpaneel te filteren op "Img" en de weergave "Waterfall" te gebruiken, zie je de gespreide laadmomenten die lazy loading veroorzaakt — bij afbeeldingsgalerijen neemt het aantal eerste aanvragen drastisch af.

loading="lazy" op <img>- en <iframe>-elementen buiten de viewport levert met één attribuut prestatiewinst op. Combineer dit met expliciete width/height (om ruimte te reserveren), srcset (voor responsiviteit) en decoding="async" (voor soepel scrollen). Pas het nooit toe op de LCP-afbeelding of op iets dat in de eerste viewport zichtbaar is.