De naam “lazy loading” komt uit de programmeerwereld, waar “lazy evaluation” staat voor berekeningen die pas worden uitgevoerd als het resultaat nodig is. Voor webpagina’s betekent dat: afbeeldingen buiten het zichtbare venster worden pas gedownload als de bezoeker erheen scrolt.
Het tegendeel van lazy loading is “eager loading”: alle bestanden worden meteen geladen, ongeacht of de bezoeker ze ooit te zien krijgt. Alle grote browsers ondersteunen lazy loading via het HTML-attribuut loading="lazy", beschikbaar als standaard in Chromium-browsers sinds 2019 en in Firefox en Safari kort daarna.
Lazy loading is iets anders dan een CDN of browsercaching, al werken deze technieken vaak samen. Een CDN verkort de afstand die data aflegt. Caching slaat bestanden lokaal op. Lazy loading beperkt het aantal bestanden dat überhaupt bij het laden wordt opgevraagd.
Waarom is lazy loading belangrijk voor je website?
Lazy loading verkort de tijd die een browser nodig heeft om een pagina zichtbaar te maken. Google meet paginasnelheid via Core Web Vitals en gebruikt die score als ranking-signaal bij het bepalen van posities in de zoekresultaten.
Dat heeft ook praktische gevolgen buiten SEO. Mobiele bezoekers met een tragere verbinding of een beperkt databundel laden een pagina sneller, omdat hun browser minder data hoeft te downloaden bij het eerste bezoek.
Voor websites met tien of meer afbeeldingen per pagina is het verschil het grootst. Een productpagina in een webshop met veertig productfoto’s laadt initieel net zo snel als een pagina met één foto, zolang lazy loading correct is ingesteld.
Hoe werkt lazy loading?
Lazy loading werkt via het loading-attribuut in HTML: de browser slaat elementen die buiten het scherm vallen over bij het eerste laden en downloadt ze pas wanneer de bezoeker ernaar scrolt. Een browser zonder lazy loading downloadt standaard alle afbeeldingen tegelijk, van boven naar beneden, ook als de bezoeker de pagina nooit verder scrolt.
In HTML activeer je dit met één attribuut:
<img src="product-foto.jpg" loading="lazy" alt="Rood leren handtas, zijaanzicht">Browsers die loading="lazy" kennen, wachten met het laden van die afbeelding tot ze hem nodig hebben. Oudere browsers negeren het attribuut en laden de afbeelding gewoon direct, zodat je geen fallback hoeft te schrijven.
Let op: lazy loading schaadt je LCP als je het verkeerd toepast
De grootste zichtbare afbeelding bovenaan een pagina mag geen lazy loading krijgen. Google meet de laadtijd van dat element als Largest Contentful Paint (LCP). Een lazy-geladen hero-afbeelding laadt later dan nodig en schaadt je LCP-score.
Laat het loading-attribuut weg voor de hero-afbeelding, of zet het expliciet op loading="eager". Alle afbeeldingen verder naar beneden op de pagina kunnen wel lazy loading krijgen.
Hoe activeer je lazy loading in WordPress?
Vanaf WordPress versie 5.5 voegt de blokeditor het loading="lazy"-attribuut automatisch toe aan alle afbeeldingen die je via de editor plaatst. De meeste WordPress-websites profiteren hier al van zonder extra plugin of handmatige instellingen.
Controleer wel of jouw thema of page builder dit niet overschrijft. Sommige thema’s of JavaScript-sliders beheren afbeeldingen op eigen houtje en respecteren het native attribuut niet.
Wil je meer controle over lazy loading, dan bieden plugins zoals WP Rocket en Perfmatters uitgebreide instellingen. Die dekken ook video’s en iframes. Rank Math Pro beheert lazy loading niet rechtstreeks, maar signaleert via de SEO-score wel wanneer je Core Web Vitals afwijken van de drempelwaarden van Google.
Gerelateerde termen
- Largest Contentful Paint (LCP)
- First Contentful Paint (FCP)
- CDN
- Alt-attribuut
- Afbeeldingen optimaliseren voor SEO
Veelgestelde vragen over lazy loading
Is lazy loading goed voor SEO?
Ja, als het correct is ingesteld. Lazy loading verkort de laadtijd en verbetert de Core Web Vitals-score, twee factoren die Google meeneemt in zijn rankings. De enige valkuil: pas lazy loading nooit toe op de grootste zichtbare afbeelding van een pagina, want dat schaadt de Largest Contentful Paint-score.
Werkt lazy loading automatisch in WordPress?
Ja. Vanaf WordPress versie 5.5 (uitgebracht in augustus 2020) voegt de blokeditor het loading="lazy"-attribuut automatisch toe aan afbeeldingen. De meeste WordPress-websites profiteren hier al van zonder extra plugin of instellingen. Controleer wel of jouw thema of page builder het attribuut niet overschrijft.
Mag je lazy loading toepassen op de hero-afbeelding?
Nee. De grootste zichtbare afbeelding bovenaan een pagina wordt door Google gemeten als Largest Contentful Paint (LCP). Een lazy-geladen hero-afbeelding laadt later dan nodig en schaadt de LCP-score. Laat het loading-attribuut weg voor de hero-afbeelding, of zet het expliciet op loading="eager".
Wat is het verschil tussen lazy loading en een CDN?
Een CDN (Content Delivery Network) verkort de afstand die data moet afleggen door bestanden op te slaan op servers dicht bij de bezoeker. Lazy loading beperkt het aantal bestanden dat bij het eerste laden wordt opgevraagd. Beide technieken verbeteren de laadsnelheid, maar op een andere manier. Ze vullen elkaar aan.
Werkt lazy loading ook voor video’s en iframes?
Het loading="lazy"-attribuut werkt voor afbeeldingen en iframes. Voor de <video>-tag bestaat geen native lazy loading via dat attribuut. Een YouTube-video die je inlaadt via een iframe kan je wel lazy loaden. Plugins zoals WP Rocket regelen dit automatisch voor iframes en video-embeds.
Wil je weten of de laadsnelheid van jouw website correct is ingesteld? Ik bekijk het graag. Neem contact op.
