Lazy loading (uitgesteld laden) is een techniek waarbij afbeeldingen en resources van een webpagina pas worden geladen wanneer ze op het punt staan op het scherm te worden weergegeven, in plaats van alles tegelijk te laden bij de eerste render. Voor e-commercewinkels met tientallen of honderden productafbeeldingen vermindert deze optimalisatie drastisch het initiële paginagewicht en verbetert de waargenomen prestaties voor bezoekers.
Hoe werkt lazy loading?
Zonder lazy loading downloadt de browser alle afbeeldingen in de HTML bij het initiële laden — inclusief die onderaan de pagina die de bezoeker misschien nooit zal zien. Met lazy loading worden alleen afbeeldingen die zichtbaar zijn in het weergavevenster (viewport) of in de directe nabijheid geladen. De overige afbeeldingen blijven in de wacht totdat de gebruiker ernaartoe scrolt.
Het resultaat is onmiddellijk: de pagina wordt sneller weergegeven, er worden minder gegevens verbruikt en de server ontvangt minder gelijktijdige verzoeken. Op een PrestaShop-productlijstpagina met 40 artikelen kan dit het aantal initieel geladen afbeeldingen terugbrengen van 40 naar 6 of 8 — een aanzienlijke gewichtswinst.
Natieve HTML lazy loading: het attribuut loading="lazy"
Sinds 2019-2020 ondersteunen alle moderne browsers lazy loading native via een eenvoudig HTML-attribuut op de img-tag: `loading="lazy"`. Dit attribuut toevoegen volstaat zodat de browser het uitgesteld laden automatisch beheert, zonder JavaScript of externe bibliotheek.
Voorbeeld: `
`. Het opgeven van de attributen width en height is belangrijk: het laat de browser toe ruimte te reserveren in de lay-out voordat de afbeelding wordt geladen, waardoor visuele verschuivingen worden vermeden (CLS — Cumulative Layout Shift).
De JavaScript-benadering: de Intersection Observer API
Vóór de native ondersteuning, en ook nu nog voor geavanceerde gebruiksscenario's, werd lazy loading geïmplementeerd via de JavaScript Intersection Observer API. Deze API detecteert precies wanneer een DOM-element het viewport binnenkomt en activeert dan het laden van de afbeelding. Deze benadering biedt meer controle: je kunt een activeringsmarge instellen (bijvoorbeeld beginnen te laden 300px voordat de afbeelding in beeld komt) om elk visueel 'flash'-effect te elimineren.
Nooit lazy loading toepassen op above-the-fold-afbeeldingen!
Impact op Core Web Vitals
Correct toegepast lazy loading verbetert meerdere Core Web Vitals-statistieken. Het vermindert het totale initieel geladen gewicht, wat de LCP (Largest Contentful Paint) verbetert voor above-the-fold-afbeeldingen — de browser besteedt zijn bandbreedte aan prioritaire resources in plaats van deze te verspreiden over alle afbeeldingen op de pagina. Het vermindert ook de TBT (Total Blocking Time) door de initiële netwerkverwerking te verlagen.
Slecht toegepast — met name door de hero-afbeelding lazy te laden — kan het de LCP doen exploderen. Dit is een van de meest voorkomende fouten die worden geconstateerd bij geauditeerde PrestaShop-winkels: een thema dat loading="lazy" toepast op alle afbeeldingen zonder onderscheid, waardoor precies de statistiek wordt verslechterd die men wil verbeteren.
Indexeert Google afbeeldingen met lazy loading?
Ja. Googlebot kan afbeeldingen die met lazy loading worden geladen zien en indexeren. Google heeft bevestigd dat zijn crawler JavaScript uitvoert en wacht op de activering van uitgestelde laadprocessen. Het wordt echter aanbevolen om native HTML lazy loading (loading-attribuut) te gebruiken in plaats van een aangepaste JavaScript-implementatie om optimale indexering te garanderen.
Lazy loading en CDN: een winnende combinatie
Lazy loading in PrestaShop
PrestaShop biedt geen native lazy loading aan dat in één klik in de backoffice kan worden geactiveerd. De implementatie hangt af van het gebruikte thema. Recente thema's (Classic 1.7+, Hummingbird) integreren doorgaans het attribuut loading="lazy" op lijstafbeeldingen. Als jouw thema dit niet voorziet, moet je ofwel de betrokken Smarty-templates aanpassen, ofwel een speciale module installeren.
- Lijstafbeeldingen (categorieën, zoeken, nieuwkomers): ideaal voor lazy loading — ze bevinden zich vaak buiten het initiële viewport
- Hoofdafbeelding op de productpagina: NIET lazy laden — dit is vaak de LCP van de pagina
- Miniaturen in de winkelwagen of 'gerelateerde producten'-blokken: lazy loading aanbevolen
- Hero-banners op de startpagina: NIET lazy laden, gebruik fetchpriority="high"
- Afbeeldingen in klantbeoordelingen of accordeon-inhoud: lazy loading aanbevolen