Stel: je pagina heeft 20 afbeeldingen, maar iemand ziet direct alleen de eerste 2 in beeld. Waarom zou de browser dan alle 20 tegelijk downloaden? Precies dat probleem lost lazy loading op.
Wat gebeurt er zonder lazy loading?
De browser downloadt alle afbeeldingen zodra de pagina laadt. Ook de foto's onderaan die de bezoeker misschien nooit ziet. Resultaat:
- Trage initial laadtijd (bezoeker wacht op alles)
- Verspilde mobiele data (afbeeldingen die nooit gezien werden)
- Slechte PageSpeed-score
Wat doet lazy loading?
Bij lazy loading laadt de browser alleen de afbeeldingen die zichtbaar zijn (of bijna in beeld komen). Zodra de bezoeker naar beneden scrolt, laden de volgende afbeeldingen 'net op tijd' in.
Voordelen:
- Snellere initial laadtijd, want minder te downloaden
- Minder data-verbruik voor mobile bezoekers
- Betere PageSpeed en LCP-scores
- Als bezoeker halverwege stopt met scrollen: nog minder data verspild
Wanneer NIET lazy-loaden?
Belangrijk: de hero-afbeelding bovenaan de pagina NOOIT lazy-loaden. Die moet direct laden, want dat is meestal je LCP-element (Largest Contentful Paint). Als je die lazy-loadt, gaat je LCP-score juist omlaag.
Vuistregel: eerste 1-2 afbeeldingen 'eager' (direct), alle rest 'lazy'.
Hoe zet je lazy loading aan?
Sinds 2020 is er een native HTML-attribuut: loading="lazy". Je websitebouwer voegt dat toe aan de afbeeldings-tag:
<img src="foto.jpg" alt="..." loading="lazy">
In WordPress: sinds versie 5.5 (2020) is lazy loading standaard aan. Nieuwe afbeeldingen krijgen automatisch het loading="lazy" attribuut. Voor sites van vóór 2020 kun je een plugin gebruiken zoals a3 Lazy Load of WP Rocket.
Hoe check je of het aan staat?
Rechtsklik op een afbeelding op je pagina (niet de hero-image), klik 'inspecteren', en kijk in de code of er loading="lazy" staat bij die img-tag. Zo ja: perfect. Zo nee: contact je websitebouwer.