Wat is lazy loading? Uitleg, voordelen en valkuilen

Lazy loading is een techniek die het laden van afbeeldingen, video’s en iframes uitstelt tot ze bijna in beeld komen. In plaats van alles meteen te downloaden, haalt de browser eerst op wat de bezoeker echt ziet en pas later de rest. Het resultaat is een pagina die sneller zichtbaar en bruikbaar is. In dit artikel lees je wat lazy loading precies is, hoe je het aanzet en wanneer het voor B2B echt loont.

Wat is lazy loading precies?

Een gemiddelde webpagina staat vol beeld. Zonder lazy loading probeert je browser dat allemaal in één keer te downloaden, ook de foto’s helemaal onderaan die de meeste bezoekers nooit bereiken. Dat kost bandbreedte en tijd, en het vertraagt net het bovenste deel van je pagina waar de eerste indruk valt.

Lazy loading draait die volgorde om. De browser laadt eerst wat zichtbaar is (het gedeelte “boven de vouw”) en stelt de rest uit tot de bezoeker naar beneden scrolt. Zo verklein je de hoeveelheid data die meteen nodig is en toon je je pagina sneller.

Dit is een onderdeel van technische SEO, maar het echte doel is niet Google plezieren. Het doel is dat bezoekers blijven. Wil je weten hoeveel een snellere, beter vindbare site oplevert? Bekijk onze aanpak rond SEO.

Hoe werkt lazy loading technisch?

Er zijn twee manieren om lazy loading aan te zetten.

• Native, via het loading-attribuut. Je voegt loading="lazy" toe aan een <img> of <iframe>. De browser regelt de rest, zonder extra code. Volgens MDN stelt dit het laden uit tot het element bijna in beeld komt. Dit wordt ondersteund door alle moderne browsers.
• Via JavaScript. Voor achtergrondbeelden of complexere gevallen gebruik je de Intersection Observer API of een kant-en-klare bibliotheek. Meer werk, maar meer controle.

Voor de meeste B2B-sites is de native aanpak ruim voldoende. Eén attribuut, geen zware scripts, en het werkt meteen. Belangrijk detail: geef je afbeeldingen altijd een vaste width en height, anders kan de pagina verspringen tijdens het laden en verpest je je Core Web Vitals.

Native versus JavaScript: wat kies je?

De twee aanpakken lossen hetzelfde probleem op, maar passen bij verschillende situaties. Onderstaande tabel helpt je kiezen.

In de praktijk zien we dat negen van de tien B2B-sites genoeg hebben aan de native variant. Begin daar, en stap alleen over op JavaScript als je een specifiek geval hebt dat het native attribuut niet dekt.

Waarom is lazy loading goed voor snelheid?

Snelheid is in B2B geen ijdel cijfer, het is een omzetfactor. Een trage pagina jaagt bezoekers weg voor ze je aanbod of formulier zien. Lazy loading helpt op drie punten:

• Snellere eerste weergave. Minder data vooraf betekent dat je pagina eerder zichtbaar en bruikbaar is.
• Minder verspilde bandbreedte. Beeld dat niemand bekijkt, wordt ook niet gedownload.
• Betere mobiele ervaring. Juist op trage verbindingen en telefoons weegt elke bespaarde kilobyte.

Wil je dit combineren met lichtere bestanden, lees dan ook hoe je afbeeldingen optimaliseert voor SEO en hoe je een trage site sneller maakt.

Een voorbeeld uit de praktijk

Denk aan een B2B-referentiepagina met twintig klantlogo’s, een paar screenshots en onderaan een ingesloten video. Zonder lazy loading trekt de browser dat allemaal binnen op het moment dat de pagina opent, ook de video die de meeste bezoekers nooit afspelen. Zet je alles onder de vouw op loading="lazy", dan haalt de browser eerst de kop en de eerste logo’s op, en de rest pas als de bezoeker scrolt. De pagina is meetbaar eerder bruikbaar, en de video kost pas data als iemand er echt naartoe scrolt. Dit soort zware, beeldrijke pagina’s is precies waar de techniek het verschil maakt.

De grootste valkuil: je belangrijkste beeld

Hier gaat het vaak mis. Als je klakkeloos élke afbeeldingen op lazy zet, ook de grote hero-afbeelding bovenaan, dan vertraag je net het element dat je LCP-score bepaalt. Google meet met Largest Contentful Paint hoe snel je grootste zichtbare element verschijnt, en dat beeld lazy laden werkt averechts.

De regel is simpel: zet alleen beeld dat níet meteen zichtbaar is op loading="lazy". Je hero-afbeelding en alles boven de vouw laad je gewoon direct, of expliciet met loading="eager".

Andere veelgemaakte fouten

Naast het lazy laden van je hero zien we nog een paar terugkerende missers die het effect ondermijnen.

• Geen width en height meegeven. Zonder vaste afmetingen weet de browser niet hoeveel ruimte een uitgesteld beeld straks inneemt, dus verspringt de pagina bij het laden. Dat kost je punten op CLS, een andere Core Web Vital.
• Het als wondermiddel zien. Uitstellen maakt je bestanden niet lichter. Een foto van enkele megabytes blijft zwaar, ook al laadt hij later. Combineer het altijd met compressie.
• Álles uitstellen, ook kleine iconen. Voor piepkleine afbeeldingen levert lazy loading niets op en voegt het alleen complexiteit toe. Reserveer het voor zwaardere beelden verderop de pagina.
• Vertrouwen zonder te testen. Controleer na het aanzetten met Google Lighthouse of je LCP-score inderdaad verbeterde en niet stiekem verslechterde.

Eerlijk: wanneer het (niet) telt voor B2B

We zeggen het liever vooraf. Heb je een strakke B2B-site met weinig beeld en snelle hosting, dan is lazy loading laaghangend fruit dat misschien al aanstaat in je CMS. Dan verschuif je je aandacht beter naar content, autoriteit en conversie, want daar zit de omzet.

Lazy loading wordt pas echt waardevol op zware, beeldrijke pagina’s: uitgebreide referentiecases, productoverzichten of lange landingspagina’s. Stuur op klanten en omzet, niet op een perfecte snelheidsscore om de score zelf. Een SEO-audit laat zien of dit voor jouw site überhaupt de moeite loont.

Klaar om je site sneller te maken?

Vertel ons waar je site nu vastloopt op snelheid, en we zeggen je eerlijk wat wél en niet loont voor jouw situatie. We zijn een klein team dat snel beweegt, dus je krijgt concrete stappen in plaats van een rapport dat blijft liggen.

Plan je gratis intake.

Veelgestelde vragen over lazy loading

Is lazy loading goed voor SEO? Indirect wel. Het maakt je pagina sneller, en snelheid is een onderdeel van de Core Web Vitals en een rankingfactor. Belangrijker: het houdt bezoekers vast, en dat levert leads op.

Moet ik lazy loading zelf programmeren? Meestal niet. Met het native loading="lazy"-attribuut werkt het zonder extra code, en veel CMS’en zetten het standaard aan. Alleen voor achtergrondbeelden of speciale gevallen heb je JavaScript nodig.

Welke afbeeldingen zet ik niet op lazy? Alles wat meteen in beeld staat, vooral je hero-afbeelding bovenaan. Die lazy laden vertraagt je LCP-score. Laad zichtbaar beeld direct, uitgesteld beeld pas verderop.

Werkt lazy loading in alle browsers? Ja, alle moderne browsers ondersteunen het native loading-attribuut voor afbeeldingen. Voor iframes is de dekking iets beperkter, maar oudere browsers negeren het attribuut simpelweg en laden gewoon alles.