oktober 2, 2026

Lazy Loading

Lazy loading is een techniek die het laden van niet-kritieke bronnen, zoals afbeeldingen of video’s, uitstelt tot het moment dat deze daadwerkelijk in het zichtveld van de bezoeker komen. Hierdoor hoeft de browser bij het openen van een pagina niet direct alle zware bestanden te downloaden.

Technische werking

De browser analyseert de HTML-code en identificeert welke elementen het attribuut voor lazy loading hebben.
In plaats van de definitieve bron in het src-attribuut te plaatsen, toont de browser een tijdelijke placeholder of laat hij het veld leeg.
De browser monitort de scrollpositie van de bezoeker via een interne mechanisme of een script.
Zodra het element nadert naar de viewport (het zichtbare deel van het scherm), wordt de werkelijke URL van de bron opgehaald.
De browser vervangt de placeholder door het echte bestand, waardoor de content zichtbaar wordt voor de gebruiker.

Belangrijke begrippen

Native loading=lazy
Een standaard HTML-attribuut dat door moderne browsers wordt herkend om lazy loading uit te voeren zonder dat er JavaScript aan te pas komt.

Intersection Observer API
Een JavaScript-interface die detecteert wanneer een specifiek element het zichtbare gedeelte van de pagina overlapt, wat nauwkeuriger is dan het handmatig berekenen van scroll-posities.

Placeholder
Een lichtgewicht afbeelding of een gekleurd vlak dat de ruimte van de uiteindelijke content reserveert om verspringen van de pagina te voorkomen.

Viewport
Het gedeelte van de webpagina dat op dit moment zichtbaar is op het scherm van de gebruiker.

Ontdekken wat we voor uw organisatie kunnen bereiken?

Vul ons contactformulier in en ontvang binnen 24 uur een persoonlijke reactie.

Geen enkele organisatie is hetzelfde, daarom stellen we altijd een op maat gemaakt plan van aanpak op.

Laat onze ervaren consultants u begeleiden naar succes!

Praktijkvoorbeeld

Een productpagina van een webshop bevat bijvoorbeeld twintig hoge-resolutie afbeeldingen in een galerij onderaan de pagina. Zonder lazy loading downloadt de browser alle twintig afbeeldingen direct bij het laden van de pagina, wat zorgt voor een trage start. Door lazy loading toe te passen, worden alleen de afbeeldingen die direct in beeld zijn geladen.

<img src="product-1.jpg" loading="lazy" alt="Product afbeelding">

Wanneer de bezoeker naar beneden scrollt, ziet hij dat afbeelding drie en vier pas worden ingeladen op het moment dat ze in beeld komen. De bezoeker merkt hierdoor geen vertraging bij het openen van de pagina.

Veelgemaakte fouten

Lazy loading toepassen op de bovenste afbeelding: Als het hoofdafbeelding (hero image) wordt uitgesteld, stijgt de Largest Contentful Paint, omdat de belangrijkste content van de pagina later verschijnt.
Geen afmetingen meegeven: Wanneer de breedte en hoogte van een afbeelding niet zijn gedefinieerd, weet de browser de ruimte niet te reserveren. Dit veroorzaakt een Cumulative Layout Shift waarbij content verspringt zodra de afbeelding verschijnt.
Te late trigger: Het instellen van een te kleine marge voor het laden, waardoor de bezoeker een wit vlak ziet voordat de afbeelding verschijnt tijdens het snel scrollen.

SEO begint bij kwalitatieve content

Verhoog je conversies met onze doelgerichte content!

Het geheim achter een bloeiende SEO-strategie? Kwalitatieve content die het hart van de doelgroep verovert. Met de juiste inhoud die naadloos inspeelt op de behoeften en verlangens van jouw potentiële klanten, til je jouw zichtbaarheid naar een hoger niveau.

Als je een sterke online aanwezigheid wilt opbouwen, is hoogwaardige content de sleutel tot jouw succes.

Gebruik en afwegingen

Wel gebruiken bij: Contentrijke websites met veel afbeeldingen, video’s of infographics die zich onder de vouw bevinden. Dit vermindert de initiële hoeveelheid data die een browser moet verwerken.

Niet gebruiken bij: Elementen die direct zichtbaar zijn in het eerste scherm. Het uitstellen van deze content vertraagt de waargenomen laadsnelheid en verslechtert de gebruikerservaring.

Controle van de werking

Open de website in Google Chrome en open de Developer Tools (F12).
Ga naar het tabblad ‘Network’ en selecteer het filter ‘Img’.
Vernieuw de pagina en observeer welke afbeeldingen direct worden gedownload.
Scroll langzaam naar beneden en controleer of er nieuwe bestanden in de lijst verschijnen op het moment dat de content in beeld komt.
Controleer via PageSpeed Insights of er meldingen zijn over het uitstellen van afbeeldingen die bovenin de pagina staan.

Stel voor afbeeldingen die bovenin de pagina staan het attribuut fetchpriority="high" in om de laadsnelheid van de belangrijkste content te optimaliseren.

Gratis SEO scan van uw website?

Ontdek nu de verborgen potentie van uw website met onze GRATIS SEO scan! Onze geavanceerde tools en deskundige analyse bieden u een gedetailleerd inzicht in de verbeterpunten van uw online aanwezigheid.

Ontvang een uitgebreid rapport met waardevolle optimalisatie-tips die uw website naar nieuwe hoogten zullen stuwen. Neem vandaag nog de eerste stap naar een betere vindbaarheid en meer organisch verkeer. Mis deze kans niet – claim nu uw GRATIS SEO scan en maak uw website klaar voor succes!

Onze Specialisaties

Website development

Search Engine Optimization

Content Marketing

Search Engine Advertising

Symblings Digital Marketing

4.9

Gebaseerd op 14 beoordelingen

Categorieën

Onze SEO technieken

ONTVANG EEN GRATIS SEO ARTIKEL

Ontvang een gratis SEO artikel van 1000-1200 woorden die gegarandeerd jouw zoekposities zullen versterken.

Vraag direct aan

Veelgestelde vragen

Wat is lazy loading en hoe werkt het?

Lazy loading is een techniek waarbij het laden van zware bestanden, zoals afbeeldingen en video’s, wordt uitgesteld. De browser downloadt deze bronnen pas wanneer ze in het zichtveld van de bezoeker komen. Dit gebeurt door de scrollpositie te monitoren en placeholders te vervangen door de werkelijke content zodra deze de viewport nadert.

Hoe implementeer je lazy loading voor afbeeldingen in HTML?

Je kunt lazy loading eenvoudig toepassen door het attribuut loading=”lazy” toe te voegen aan een img-element. Moderne browsers herkennen dit standaardattribuut en voeren het uitstel van het laden automatisch uit zonder dat je JavaScript nodig hebt. Dit is de meest directe manier om afbeeldingen efficiënt te laden.

Kan ik lazy loading ook met JavaScript regelen?

Ja, dat kan via de Intersection Observer API. Deze JavaScript-interface detecteert nauwkeurig wanneer een specifiek element het zichtbare gedeelte van de pagina overlapt. Dit is nauwkeuriger dan het handmatig berekenen van scroll-posities, waardoor je beter kunt bepalen op welk moment de werkelijke bron moet worden opgehaald.

Wanneer moet je lazy loading niet gebruiken?

Gebruik deze techniek niet voor elementen die direct zichtbaar zijn in het eerste scherm, zoals de hero image. Het uitstellen van deze content vertraagt de waargenomen laadsnelheid en verslechtert de gebruikerservaring. Voor deze belangrijke content kun je juist fetchpriority=”high” gebruiken om het laden te versnellen.

Wat is een placeholder bij lazy loading?

Een placeholder is een lichtgewicht afbeelding of een gekleurd vlak dat de ruimte van de uiteindelijke content reserveert. Dit voorkomt dat de pagina verspringt wanneer de werkelijke afbeelding wordt ingeladen. Door de ruimte vooraf te definiëren, blijft de lay-out van de pagina stabiel tijdens het scrollen.

Waarom moet je afmetingen meegeven aan afbeeldingen?

Als je de breedte en hoogte van een afbeelding niet definieert, weet de browser niet hoeveel ruimte hij moet reserveren. Dit veroorzaakt een Cumulative Layout Shift, waarbij de content verspringt zodra de afbeelding verschijnt. Door afmetingen op te geven, voorkom je deze storende verschuivingen voor de bezoeker.

Wat gebeurt er als je een te kleine marge instelt voor het laden?

Bij een te kleine trigger-marge worden afbeeldingen pas geladen op het moment dat ze al in beeld zijn. Hierdoor ziet de bezoeker kortstondig een wit vlak of een placeholder voordat de afbeelding verschijnt. Dit is vooral zichtbaar wanneer iemand snel naar beneden scrollt over de pagina.

Hoe controleer ik of lazy loading correct werkt?

Open de Developer Tools in Google Chrome en ga naar het tabblad Network met het filter Img. Vernieuw de pagina en observeer welke afbeeldingen direct laden. Scroll vervolgens langzaam naar beneden om te controleren of nieuwe bestanden pas in de lijst verschijnen op het moment dat ze in beeld komen.