Lazy loading: sneller laden zonder SEO-risico
Lazy loading is goed voor SEO zolang je twee regels volgt. Zet loading="lazy" alleen op afbeeldingen en iframes onder de vouw; het grootste beeld boven de vouw laadt juist direct, anders verslechtert je Largest Contentful Paint. Laadt je content via JavaScript pas na scrollen of klikken, controleer dan of Googlebot die content ook zonder interactie te zien krijgt. Wat niet in de gerenderde HTML staat, wordt namelijk niet geïndexeerd.
- Zet loading="lazy" alleen op afbeeldingen en iframes onder de vouw.
- Het grootste beeld boven de vouw mag nooit lazy laden, anders verslechtert je LCP.
- Googlebot scrolt en klikt niet; content die pas na interactie verschijnt wordt niet geïndexeerd.
- Test via URL-inspectie of laat-geladen content in de gerenderde HTML staat.
Snelheidstools adviseren lazy loading, maar verkeerd toegepast kost het je juist posities: een traag hoofdbeeld of content die Google nooit te zien krijgt. Dit artikel laat zien hoe je lazy loading veilig instelt, welke uitzondering je altijd maakt en hoe je controleert of alles geïndexeerd wordt.
Waarom uitgesteld laden je pagina's sneller maakt
Lazy loading stelt het ophalen van afbeeldingen, iframes en soms hele contentblokken uit tot de bezoeker ze bijna in beeld scrolt. De browser laadt bij het openen van de pagina dus alleen wat direct zichtbaar is. Dat scheelt data, versnelt de eerste weergave en verlaagt het verbruik op mobiel.
Het effect is het grootst op lange pagina’s met veel beeld: productoverzichten, portfolios en blogartikelen met tientallen foto’s. Zonder lazy loading haalt de browser al die bestanden meteen op, ook als de bezoeker na de eerste alinea alweer vertrekt. Met lazy loading betaal je alleen voor wat echt bekeken wordt.
Native lazy loading: één attribuut, geen script
De veiligste vorm is het HTML-attribuut loading=”lazy”, dat alle gangbare browsers ondersteunen voor afbeeldingen en iframes:
<img src="voorbeeld.webp" loading="lazy"
width="600" height="400"
alt="Werkplaats met houten meubels in aanbouw">Voor zoekmachines is deze variant probleemloos, omdat de afbeeldings-URL gewoon in de HTML staat. Googlebot hoeft niets uit te voeren om het beeld te vinden. WordPress voegt het attribuut sinds versie 5.5 automatisch toe aan afbeeldingen en iframes in de content.
Geef lazy geladen beelden altijd width en height mee. Zonder vaste afmetingen verspringt de pagina zodra een beeld binnenkomt en loopt je Cumulative Layout Shift op, een van de Core Web Vitals. Hoe je beelden verder verkleint met WebP, AVIF en srcset lees je in het artikel over afbeeldingen optimaliseren.
De uitzondering die alles bepaalt: het LCP-element
Largest Contentful Paint meet wanneer het grootste element boven de vouw zichtbaar is. Op de meeste pagina’s is dat een afbeelding, vaak het hero-beeld. Zet je daar loading=”lazy” op, dan geeft de browser dat bestand een lagere prioriteit en schuift precies het verkeerde moment naar achteren. Je pagina voelt trager en scoort slechter op de Core Web Vitals.
- Sluit het grootste beeld boven de vouw altijd uit van lazy loading; laat het loading-attribuut daar weg of zet het op eager.
- Geef dat beeld eventueel fetchpriority=”high” mee, zodat de browser het als eerste ophaalt.
- Controleer in PageSpeed Insights welk element als LCP wordt gemeten; dat is niet altijd het beeld dat je verwacht.
WordPress slaat het eerste beeld van een pagina tegenwoordig zelf over, maar thema’s en pagebuilders met eigen hero-blokken of sliders breken die logica geregeld. Controleer je belangrijkste templates dus handmatig.
JavaScript-varianten: hier zit het echte SEO-risico
Het risico van lazy loading zit niet in het HTML-attribuut, maar in scripts die content pas ophalen na een actie van de bezoeker. Googlebot rendert je pagina in een lange viewport, maar scrolt niet en klikt nergens op. Content die pas na scrollen of klikken verschijnt, bestaat voor Google dus niet.
- Gebruik voor eigen scripts een IntersectionObserver die content laadt zodra die de viewport nadert; dat patroon werkt ook tijdens het renderen door Google.
- Vermijd verouderde scripts die de afbeeldings-URL in een data-src-attribuut verstoppen zonder fallback. Zonder draaiend script ziet Google dan alleen een lege placeholder.
- Werkt je overzichtspagina met infinite scroll, bied dan ook paginering aan waarbij elke vervolgpagina een eigen SEO-vriendelijke URL heeft. Anders blijven producten of artikelen dieper in de lijst onvindbaar.
- Zorg dat ook je structured data in de gerenderde HTML staat en niet pas na interactie door een script wordt toegevoegd, anders tellen je markup-inspanningen niet mee.
Zo test je of Google alles ziet
Vertrouw niet op wat je zelf in de browser ziet, maar test wat een zoekmachine binnenkrijgt:
- URL-inspectie in Search Console. Vraag de live-URL op en bekijk de gerenderde HTML. Staan je laat-geladen afbeeldingen en tekstblokken erin, dan zit je goed.
- Herlaad de pagina zonder JavaScript. Verdwijnen er afbeeldingen of hele secties, dan hangt die content van scripts af en verdient die extra controle in stap 1.
- Draai PageSpeed Insights. Controleer welk element als Largest Contentful Paint wordt gemeten en of daar geen lazy loading op staat.
- Zoek een letterlijke zin op in Google. Combineer een site:-zoekopdracht met een unieke zin uit laat-geladen content. Vind je niets terug, dan is die content waarschijnlijk niet geïndexeerd.
Herhaal deze test na elke thema-update of pluginwissel, want juist die wijzigingen zetten lazy loading ongemerkt op de verkeerde elementen.
Veelgemaakte fouten met lazy loading
Deze fouten zie ik in audits het vaakst terug:
- Lazy loading op alle afbeeldingen zetten. Inclusief het hero-beeld, waardoor de pagina juist trager aanvoelt. Fix: sluit het grootste beeld boven de vouw uit.
- Afmetingen weglaten. Beelden schuiven de tekst opzij zodra ze binnenkomen. Fix: geef elk beeld width en height mee, ook binnen een pagebuilder.
- Een extra lazy load-plugin naast WordPress zelf draaien. Twee systemen vechten om dezelfde beelden en de uitzonderingen werken niet meer. Fix: kies één mechanisme en schakel het andere uit.
- Data-src zonder fallback gebruiken. Beelden verschijnen niet in Google Afbeeldingen en tellen niet mee voor de pagina. Fix: stap over op het native attribuut of voeg een noscript-variant toe.
- Infinite scroll zonder gepagineerde URL’s. Alles voorbij de eerste lading blijft buiten de index. Fix: voeg paginering met eigen URL’s toe onder de scroll-lijst.
- Belangrijke tekst achter een klik verstoppen. Tabs of accordeons die content pas na een klik ophalen, blijven leeg voor Google. Fix: lever de tekst mee in de HTML en gebruik alleen de weergave als interactie.
Of Google je laat-geladen content echt binnenkrijgt, zie je pas als je elke belangrijke pagina afzonderlijk controleert, en dat houdt niemand maandelijks vol. De technische SEO-module van ViRank scant je site doorlopend, signaleert beelden zonder afmetingen, lazy geladen LCP-elementen en content die voor zoekmachines onbereikbaar is, en sorteert die punten op omzetimpact. Na jouw akkoord gaan fixes live op je WordPress-site en elke wijziging is terug te draaien. Verdieping over renderen en indexatie vind je in de ViRank-kennisbank. Testen kan 14 dagen gratis, zonder creditcard.