Lazy Loading

Lazy loading is een techniek waarbij afbeeldingen, video's en andere media pas worden geladen op het moment dat de bezoeker naar dat deel van de pagina scrollt. In plaats van alle content in één keer te downloaden bij het openen van de pagina, laadt de browser alleen wat direct zichtbaar is. De rest volgt pas wanneer de gebruiker ernaartoe navigeert. Voor MKB-bedrijven met beeldrijke websites of webshops betekent dit een snellere initiële laadtijd, minder datagebruik en een betere gebruikerservaring, vooral op mobiele apparaten.

Hoe lazy loading technisch werkt

De techniek gebruikt het loading="lazy"-attribuut in HTML of een JavaScript-library die de viewport monitort. Wanneer een afbeelding of iframe buiten het zichtbare scherm staat, krijgt het een tijdelijke placeholder of blijft het ongeladen. Zodra de bezoeker scrollt en het element binnen een vooraf ingestelde marge komt, bijvoorbeeld 200 pixels voor de onderkant van het scherm, start de browser het downloaden. Moderne browsers zoals Chrome, Firefox en Safari ondersteunen native lazy loading sinds 2020. Voor oudere browsers of complexere scenario's kun je libraries zoals lazysizes of Intersection Observer API gebruiken. In WordPress wordt lazy loading sinds versie 5.5 standaard toegepast op afbeeldingen, maar niet altijd op iframes of achtergrondafbeeldingen.

Waarom lazy loading ontstond en waarom het nu telt

De techniek kwam op toen mobiel internet groeide en datalimits een bottleneck werden. Pagina's met tientallen productfoto's of lange blogartikelen met visueel materiaal konden seconden laden, wat bezoekers deed afhaken. Google introduceerde lazy loading als best practice in hun Page Experience-richtlijnen en integreerde het in de Core Web Vitals-metingen. Largest Contentful Paint (LCP) en Cumulative Layout Shift (CLS) verbeteren vaak aanzienlijk door lazy loading, omdat de browser minder werk heeft in de eerste seconden. Voor webshops met honderden producten per categoriepagina is het verschil tussen een laadtijd van 4 seconden en 1,5 seconden direct merkbaar in het conversiepercentage.

Wat lazy loading oplevert voor MKB-bedrijven

Een webshop met 200 productfoto's per pagina bespaart gemiddeld 60 tot 70 procent aan initiële datagebruik door lazy loading. Dat vertaalt zich in snellere laadtijden, lagere bounce rates en een hogere positie in Google. Bezoekers op mobiele netwerken merken het verschil direct, vooral in gebieden met 3G-verbindingen. Daarnaast vermindert het de serverbelasting, omdat niet alle afbeeldingen tegelijk worden opgevraagd. Bij een doordachte SEO-strategie is lazy loading een van de technische optimalisaties die weinig tijd kosten maar meetbaar effect hebben op zowel gebruikerservaring als rankings. Let wel: foutieve implementatie kan juist leiden tot langere render-tijden of ontbrekende alt-teksten, dus test altijd in verschillende browsers en apparaten.

Lazy loading is niet voor elke situatie geschikt, maar in specifieke scenario's levert het meetbare winst. Hieronder vier veelvoorkomende toepassingen in de Nederlandse MKB-praktijk, plus een besliskader wanneer je de techniek wel of niet moet inzetten.

Productoverzichten in webshops met veel afbeeldingen

Een webshop met 500 producten verdeeld over categoriepaginas laadt zonder lazy loading alle productfoto's tegelijk. Dat kan 3 tot 5 MB aan data betekenen, zelfs als de bezoeker alleen de eerste tien producten bekijkt. Met lazy loading worden alleen de zichtbare foto's geladen, plus een buffer van enkele producten eronder. Scroll de bezoeker verder, dan volgen de rest. Dit versnelt de initiële laadtijd van 4 seconden naar vaak 1,2 seconden. Shopify, WooCommerce en andere platforms bieden lazy loading standaard of via plugin. Test altijd of de placeholders niet leiden tot layout shifts, want dat schaadt juist de CLS-score. Een goede implementatie toont een lichtgrijze placeholder met de juiste aspect ratio terwijl de afbeelding laadt.

Blogartikelen en kennisbank-pagina's met visueel materiaal

Een artikel met tien screenshots of infographics kan 8 MB wegen. Lazy loading zorgt dat alleen de hero-afbeelding en de eerste paragrafen direct laden. De rest volgt tijdens het scrollen. Dit is vooral relevant voor mobiele bezoekers met beperkte bandbreedte. In WordPress wordt lazy loading sinds versie 5.5 automatisch toegepast op afbeeldingen in de content. Let op: afbeeldingen above the fold, dus in het direct zichtbare deel, moet je uitsluiten van lazy loading. Anders meet Google een trage LCP, omdat de belangrijkste afbeelding pas na een vertraging verschijnt. Voeg loading="eager" toe aan de hero-afbeelding of eerste paragraaf-afbeelding om dit te voorkomen. Voor een goed werkende website met sterke UX is dit detail cruciaal.

Embedded video's en iframes op landingspagina's

Een YouTube-iframe of Vimeo-embed laadt standaard meteen, ook als de video onderaan de pagina staat. Dat kost 500 KB tot 1 MB aan extra data en vertraagt de rendering. Door lazy loading toe te passen op iframes verschijnt eerst een thumbnail met een play-knop. Pas wanneer de bezoeker naar dat deel scrollt, laadt de iframe daadwerkelijk. Dit scheelt seconden in de initiële laadtijd. Plugins zoals WP Rocket of Autoptimize bieden deze functie out-of-the-box. Let op: sommige marketing-tools zoals chatbots of tracking-scripts laden via iframes. Lazy loading daarop kan leiden tot gemiste conversies of incomplete data. Test dus altijd of kritieke functionaliteit niet wordt vertraagd.

Achtergrondafbeeldingen en decoratieve elementen

Veel websites gebruiken grote achtergrondafbeeldingen in secties verderop op de pagina. Die afbeeldingen worden standaard niet door native lazy loading gedekt, omdat het attribuut alleen werkt op <img> en <iframe>. Hier heb je een JavaScript-library nodig zoals lazysizes of een custom Intersection Observer-script. Het voordeel: een homepage met vijf full-width hero-secties laadt alleen de eerste, de rest volgt tijdens het scrollen. Dit scheelt 2 tot 3 seconden laadtijd. Nadeel: extra JavaScript betekent extra parse-tijd. Voor kleine websites met weinig afbeeldingen weegt de overhead soms zwaarder dan de winst. Meet dus altijd met analytics of de Core Web Vitals daadwerkelijk verbeteren.

Wanneer lazy loading de juiste keuze is en wanneer niet

Lazy loading werkt goed op pagina's met veel content buiten de viewport: webshops, blogs, portfolio's, nieuwsoverzichten. Het werkt niet goed op single-page designs waar alle content direct zichtbaar is, of op pagina's waar de belangrijkste afbeelding onderaan staat. Zet lazy loading nooit aan op afbeeldingen above the fold, want dat vertraagt de LCP-meting en schaadt je SEO-score. Ook op kritieke content zoals productfoto's in de eerste rij of logo's is lazy loading ongewenst. Test altijd in verschillende browsers en op mobiel. Een foutieve implementatie kan leiden tot witte vlakken, ontbrekende afbeeldingen of een trage scroll-ervaring. Voor complexere situaties kun je terecht bij een developer die de techniek maatwerk integreert in je front-end.