Snelheid Gemiddelde impact Makkelijk 10–30 minuten

Lui laden van afbeeldingen

Laad afbeeldingen buiten het scherm alleen tijdens het scrollen.

Wat het is

Lui laden betekent dat afbeeldingen buiten het zichtbare gebied niet onmiddellijk worden geladen, maar alleen wanneer de gebruiker ernaartoe scrollt. Het kenmerk load="lazy" is voldoende.

Waarom het belangrijk is

Zonder lazyloading downloadt de browser zelfs afbeeldingen helemaal onderaan de pagina die de gebruiker misschien nooit te zien krijgt. Dit vertraagt de eerste weergave en verspilt gegevens. Lui laden versnelt de start en bespaart overdracht.

Hoe je het doet

1Voeg load="lazy" toe aan afbeeldingen en iframes onder het zichtbare gebied.
2Gebruik GEEN lazy op de hoofdafbeelding boven de vouw (de LCP-afbeelding). U wilt die zo vroeg mogelijk hebben (laad deze indien nodig vooraf).
3Geef altijd breedte en hoogte op, zodat de lay-out niet verspringt (CLS).

Voorbeeld

Goed

<img src="gallery-12.webp" alt="..." loading="lazy" width="800" height="600">

Conclusie

Lazy Loading is tegenwoordig standaard (één kenmerk) en versnelt pagina's met veel afbeeldingen vrijwel gratis. Let wel op de hoofdafbeelding boven de vouw; maak die niet lui. Voeg afmetingen toe voor lay-outstabiliteit.

Gerelateerde onderwerpen