Niet elke afbeelding op een pagina hoeft tegelijk te laden. Lazy loading stelt het downloaden uit van afbeeldingen die nog niet in beeld zijn bij de bezoeker. De browser richt zich dan op wat de bezoeker echt ziet, in plaats van de hele pagina in één keer te laden. Bij pagina's met veel afbeeldingen kan alleen deze aanpassing de eerste laadtijd flink verkorten en de metrics verbeteren die tellen voor bezoekerservaring en zoekresultaten. Dit artikel legt uit wat lazy loading is, hoe het technisch werkt, wat je wel en niet lazy laadt en wat het doet met je Core Web Vitals.
Laadt een browser een pagina zonder lazy loading, dan downloadt hij elke afbeelding op de pagina, ook al is er nog geen enkele zichtbaar. Een bezoeker die de pagina opent en direct weer weggaat, zet toch het downloaden van alle afbeeldingen onder de vouw in gang. Dat is verspilde bandbreedte, en het vertraagt het laden van alles boven de vouw dat de bezoeker wél ziet. Met lazy loading wordt alleen gedownload wat op dat moment in beeld is. Hoe dit past in het grotere plaatje van laadsnelheid, lees je in het artikel over hoe je de laadtijd van je website verkort.
Wat is lazy loading?
Lazy loading is een techniek die het laden van niet-kritieke bestanden uitstelt tot ze nodig zijn. Bij afbeeldingen betekent het dat een afbeelding pas wordt gedownload als de bezoeker er dichtbij scrolt. In plaats van alle afbeeldingen bij het laden van de pagina op te vragen, vraagt de browser alleen de afbeeldingen op die in beeld zijn of bijna in beeld komen terwijl de bezoeker de pagina gebruikt.
Wat lazy loading verandert aan het laadproces
- Zonder lazy loading: de browser vraagt alle afbeeldingen op bij het eerste laden van de pagina, of ze nu in beeld zijn of niet
- Met lazy loading: de browser vraagt alleen de afbeeldingen op die in of vlak bij het huidige beeld staan. De rest volgt terwijl de bezoeker ernaartoe scrolt
- De totale hoeveelheid data over een volledige scroll door de pagina is hetzelfde, maar het eerste laden is een stuk lichter
- Bezoekers die niet voorbij een bepaald punt op de pagina scrollen, laten nooit de afbeeldingen downloaden die ze toch niet zien
Hoe werkt lazy loading technisch?
Je kunt lazy loading voor afbeeldingen op twee manieren toepassen: met het ingebouwde browserattribuut of met oplossingen op basis van JavaScript.
Native lazy loading
- Alle grote browsers ondersteunen native lazy loading via het attribuut
loading="lazy", dat je direct aan de afbeeldingstag toevoegt - Je hebt geen JavaScript of externe bibliotheken nodig. De browser regelt het laadgedrag zelf
- Dit is nu de standaardmanier om afbeeldingen op het web lazy te laden en vraagt weinig technische kennis
- De browser bepaalt zelf wanneer hij een afbeelding gaat laden, op basis van de afstand tot het beeld. Die grens verschilt een beetje per browser
Lazy loading met JavaScript
- Voordat native lazy loading breed werd ondersteund, gebruikten ontwikkelaars JavaScript-bibliotheken die de scrollpositie in de gaten hielden en afbeeldingen lieten laden zodra ze in beeld kwamen
- De Intersection Observer API is de standaardaanpak met JavaScript. Die merkt op wanneer een element in of uit beeld gaat, zonder dat je scroll-eventlisteners nodig hebt
- Lazy loading met JavaScript wordt nog steeds gebruikt voor complexere situaties, zoals achtergrondafbeeldingen in CSS of video
- Voor gewone afbeeldingselementen is native lazy loading met
loading="lazy"eenvoudiger en betrouwbaarder
Wat kun je naast afbeeldingen nog lazy laden?
Iframes
- Het attribuut
loading="lazy"werkt in alle grote browsers ook op iframes - Ingesloten kaarten, formulieren en content van derden in iframes kun je uitstellen tot de bezoeker erheen scrolt
- Dat is vooral handig bij pagina's met een ingesloten kaart of widgets van derden onderaan de pagina, want die laden vaak zware externe scripts
Video
- Videobestanden zijn veel groter dan afbeeldingen en kunnen de eerste laadtijd sterk beïnvloeden als ze onder de vouw staan
- Video lazy laden kan alleen met JavaScript, omdat het native attribuut
loadingniet voor video-elementen geldt - Een gangbare aanpak is om eerst alleen een miniatuur of posterafbeelding te laden en het videobestand pas te laden als de bezoeker erop klikt of erheen scrolt
Componenten en secties
- In applicaties met veel JavaScript kunnen hele paginasecties of componenten lazy worden geladen, zodat hun code en inhoud pas worden opgehaald als de bezoeker dat deel van de pagina bereikt
- Dit is een geavanceerde techniek voor complexe webapplicaties en wordt meestal door het framework geregeld in plaats van handmatig ingebouwd
Wat laad je niet lazy?
Lazy loading verbetert de prestaties als je het goed toepast, maar op de verkeerde plek veroorzaakt het juist problemen.
Afbeeldingen boven de vouw
- De hero-afbeelding, het logo of andere opvallende beelden die zichtbaar zijn als de pagina opent, moeten direct laden
- Lazy loading op afbeeldingen boven de vouw vertraagt de LCP, en dat verslechtert je Core Web Vitals-scores en de bezoekerservaring
- De regel is simpel: alles wat je ziet zonder te scrollen, laadt direct. Alles onder de vouw mag lazy laden
Afbeeldingen vlak bij de vouw
- Afbeeldingen net onder het zichtbare deel komen snel in beeld zodra de bezoeker gaat scrollen. Is lazy loading te agressief ingesteld, dan kunnen die afbeeldingen nog aan het laden zijn als de bezoeker ze bereikt, en zie je kort een leeg vlak
- Native lazy loading lost dit op met een drempel: afbeeldingen beginnen te laden voordat ze helemaal in beeld zijn, in plaats van op het laatste moment
Kritieke inhoud op snelle pagina's
- Op pagina's met weinig inhoud en maar een paar afbeeldingen laadt alles al snel. Lazy loading maakt het dan alleen ingewikkelder, zonder echt voordeel
- Lazy loading levert het meest op bij pagina's met veel afbeeldingen of lange scrollbare inhoud
Hoe beïnvloedt lazy loading de Core Web Vitals?
Lazy loading heeft direct effect op twee Core Web Vitals en, als je het goed toepast, geen effect op de derde.
Largest Contentful Paint (LCP)
- Pas lazy loading nooit toe op het element dat waarschijnlijk de LCP-kandidaat is, meestal de hero-afbeelding
- Goed toegepast vermindert lazy loading het aantal bestanden dat tijdens het eerste laden om bandbreedte strijdt. Dat kan de LCP verbeteren, omdat de inhoud boven de vouw sneller laadt
- Verkeerd toegepast op afbeeldingen boven de vouw verslechtert lazy loading de LCP direct, doordat het grootste zichtbare element later komt
Interaction to Next Paint (INP)
- Minder afbeeldingen bij het eerste laden betekent minder netwerkactiviteit die tijdens het kritieke laadmoment met het uitvoeren van JavaScript concurreert
- Dat kan indirect de blokkering van de main thread verminderen en de INP verbeteren op pagina's die eerder veel afbeeldingen tegelijk laadden
Cumulative Layout Shift (CLS)
- Lazy loading heeft geen direct effect op de CLS, maar lazy geladen afbeeldingen zonder vaste breedte en hoogte kunnen bij het laden de indeling laten verspringen
- Geef lazy geladen afbeeldingen altijd vaste afmetingen, zodat de browser de juiste ruimte vrijhoudt voordat de afbeelding laadt
Een volledig overzicht van hoe LCP, INP en CLS worden gescoord en wat de drempelwaarden zijn, vind je in het artikel over wat Core Web Vitals zijn.
Heeft lazy loading invloed op SEO?
Goed toegepast schaadt lazy loading je SEO niet en kan het via betere paginasnelheidsscores juist bijdragen aan betere zoekresultaten.
Hoe zoekmachines omgaan met lazy geladen inhoud
- Crawlers van zoekmachines tonen pagina's ongeveer zoals browsers en kunnen lazy geladen inhoud indexeren
- Lazy geladen afbeeldingen blijven crawlbaar en kunnen in de resultaten van afbeeldingen zoeken verschijnen
- Het SEO-voordeel komt vooral van de snelheidswinst die lazy loading mogelijk maakt. Pagina's met betere Core Web Vitals-scores, die lazy loading kan helpen verbeteren, hebben een voordeel in de ranking
Alt-tekst blijft gewoon nodig
- Lazy geladen afbeeldingen hebben dezelfde alt-tekst nodig als elke andere afbeelding. Vul het alt-attribuut altijd met een beschrijving van de afbeelding, ook als die lazy wordt geladen
- Tips voor goede alt-teksten vind je in het artikel over hoe je afbeeldingen op je website gebruikt
Hoe voeg je lazy loading toe aan je website?
Voor losse afbeeldingen in HTML
- Voeg
loading="lazy"toe aan elke afbeeldingstag onder de vouw - Zorg dat elke lazy geladen afbeelding de attributen
widthenheightheeft, zodat de indeling niet verspringt terwijl afbeeldingen laden - Voeg
loading="lazy"niet toe aan de hero-afbeelding of een afbeelding die je ziet zonder te scrollen
Via je websiteplatform
- Veel websitebouwers passen lazy loading automatisch toe op afbeeldingen onder de vouw, zonder dat je zelf iets hoeft in te bouwen
- Kijk in de prestatiedocumentatie van je platform of dit automatisch gebeurt voordat je het handmatig toevoegt
Een complete gids over afbeeldingen optimaliseren buiten lazy loading om, met bestandsformaten, compressie en responsieve afmetingen, vind je in het artikel over afbeeldingen optimaliseren voor sneller laden.
Hoe WEMASY lazy loading regelt
De Websitebouwer van WEMASY past op alle pagina's automatisch lazy loading toe op afbeeldingen onder de vouw. Afbeeldingen boven de vouw, zoals hero-afbeeldingen en alles wat je ziet zonder te scrollen, worden uitgezonderd, zodat ze direct verschijnen. Afbeeldingen krijgen ook standaard vaste afmetingen, zodat de indeling niet verspringt als lazy geladen afbeeldingen op hun plek komen.
Lazy loading werkt in elk WEMASY-abonnement samen met afbeeldingscompressie en CDN-levering. Die drie verbeteringen samen verlagen zowel het eerste paginagewicht als de leveringstijd van afbeeldingen. Dat draagt direct bij aan een snellere LCP en betere Core Web Vitals-scores in het analytics-dashboard.
Bekijk wat erbij zit op de WEMASY Websitebouwer, of vergelijk de abonnementen op de prijzenpagina.
Veelgestelde vragen
Wat is lazy loading?
Lazy loading is een techniek die het downloaden van afbeeldingen en andere bestanden uitstelt tot de bezoeker er bijna naar kijkt. In plaats van alle afbeeldingen te laden als een pagina opent, laadt de browser alleen de afbeeldingen die in beeld of vlak bij het beeld zijn. Afbeeldingen verderop op de pagina volgen terwijl de bezoeker ernaartoe scrolt. Zo hoeft er eerst minder data te worden gedownload en laadt de zichtbare inhoud sneller. Met de Websitebouwer van WEMASY stel je dit direct op je eigen website in.
Is lazy loading slecht voor SEO?
Nee. Goed toegepast schaadt lazy loading je SEO niet. Crawlers van zoekmachines kunnen lazy geladen afbeeldingen en inhoud indexeren. Het effect op SEO is meestal positief, omdat lazy loading paginasnelheidsmetrics verbetert die zoekmachines als rankingsignaal gebruiken. De belangrijkste voorwaarde is dat je lazy loading niet op inhoud boven de vouw toepast, want dat vertraagt de Largest Contentful Paint en schaadt je Core Web Vitals-scores.
Moeten alle afbeeldingen op een pagina lazy worden geladen?
Nee. Afbeeldingen die zichtbaar zijn als de pagina opent, boven de vouw, moeten direct laden. Lazy loading op die afbeeldingen vertraagt de Largest Contentful Paint, en dat verslechtert je Core Web Vitals en de bezoekerservaring. Alleen afbeeldingen onder de vouw hebben baat bij lazy loading. In de praktijk betekent dit dat de hero-afbeelding en andere opvallende inhoud bovenaan de pagina nooit het lazy-attribuut moeten krijgen.
Hoe voeg ik lazy loading toe aan afbeeldingen?
Voeg bij gewone afbeeldingselementen het attribuut loading="lazy" direct aan de afbeeldingstag toe. Alle grote browsers ondersteunen dit zelf, zonder JavaScript-bibliotheek. Zorg dat elke lazy geladen afbeelding ook een vaste breedte en hoogte heeft, zodat de browser de juiste ruimte vrijhoudt voordat de afbeelding laadt en de indeling niet verspringt. Voeg lazy loading niet toe aan de hero-afbeelding of een afbeelding die je ziet zonder te scrollen.
Werkt lazy loading op mobiel?
Ja. Native lazy loading met het attribuut loading="lazy" wordt door alle grote mobiele browsers ondersteund. Het helpt op mobiel extra, omdat mobiele verbindingen trager en wisselvalliger zijn dan vaste verbindingen. Een lager eerste paginagewicht maakt dan meer verschil. Mobiele bezoekers die niet de hele pagina doorscrollen, downloaden bovendien geen afbeeldingen die ze nooit bereiken.
Wat is het verschil tussen lazy loading en preloading?
Lazy loading stelt het downloaden van bestanden uit tot ze nodig zijn. Preloading doet het tegenovergestelde: het zegt tegen de browser dat hij een bepaald bestand zo vroeg mogelijk moet downloaden, eerder dan hij het normaal tegenkomt in het laadproces. Preloading gebruik je voor kritieke bestanden zoals de hero-afbeelding of belangrijke lettertypen, zodat ze zo snel mogelijk laden. De twee technieken vullen elkaar aan: preload kritieke bestanden boven de vouw en laad alles onder de vouw lazy.