Hoe implementeer ik lazy loading voor afbeeldingen en iframes zonder SEO te schaden?
De veiligste manier om lazy loading te implementeren is via het native HTML-attribuut `loading="lazy"`. Dit zorgt ervoor dat browsers de vertraging afhandelen, terwijl zoekmachines (zoals Googlebot) de bron-URL's van afbeeldingen nog steeds kunnen zien en correct kunnen indexeren. Vermijd complexe JavaScript-only lazy loading die content verbergt voor crawlers.
Lazy loading is een techniek die het laden van niet-kritieke bronnen (zoals afbeeldingen en iframes) uitstelt tot ze nodig zijn, meestal wanneer de gebruiker naar het betreffende deel van de pagina scrollt. Dit verbetert de initiële laadsnelheid en vermindert het dataverbruik aanzienlijk. Voor SEO is de belangrijkste zorg of zoekmachines de 'luie' content kunnen vinden en indexeren. In het verleden verborg JavaScript-gebaseerde lazy loading vaak URL's voor bots. Tegenwoordig is de 'best practice' om native lazy loading te gebruiken door het `loading="lazy"` attribuut toe te voegen aan `<img>` en `<iframe>` tags. Dit wordt ondersteund door alle moderne browsers en is volledig SEO-vriendelijk, omdat Googlebot het `src` attribuut nog steeds kan lezen. Als je een JavaScript-bibliotheek moet gebruiken voor oudere browsers, zorg dan dat deze de richtlijnen van Google volgt via de Intersection Observer API en een `<noscript>` fallback biedt. Belangrijk: pas nooit lazy loading toe op afbeeldingen 'boven de vouw' (direct zichtbaar bij het laden), zoals je logo of hero-image, omdat dit je Largest Contentful Paint (LCP) score negatief beïnvloedt.
Stap-voor-stap gids
Content onder de vouw identificeren
Bepaal welke afbeeldingen en iframes niet zichtbaar zijn wanneer de pagina voor het eerst wordt geladen.
Loading-attribuut toevoegen
Voeg `loading="lazy"` toe aan de HTML-tags van alle geïdentificeerde afbeeldingen en iframes onder de vouw.
Hero-media uitsluiten
Zorg ervoor dat je belangrijkste hero-image en andere content bovenaan de pagina NIET op lazy loading staan.
Dimensies toevoegen
Voeg altijd width- en height-attributen toe om lay-outverschuivingen (CLS) te voorkomen wanneer afbeeldingen later laden.
Indexering testen
Gebruik de GSC URL-inspectietool om te verifiëren dat Google je lazy-loaded afbeeldingen nog steeds kan 'zien'.
Pro Tips
- Combineer lazy loading met het 'decoding="async"' attribuut voor nog betere prestaties.
- Gebruik een placeholder van lage kwaliteit (LQIP) of een gekleurd blok om de gebruikerservaring tijdens het laden te verbeteren.
- Test lazy loading specifiek op mobiele apparaten, aangezien de 'vouw' daar veel hoger ligt.
- Controleer of je lazy loading niet conflicteert met je print-stylesheets.
Hoe pSeoMatic helpt
De audit-engine van pSeoMatic controleert op de correcte implementatie van lazy loading op je gehele site. We markeren 'LCP-afbeeldingen' die onterecht op lazy loading staan (wat je paint-metrieken vertraagt) en identificeren ontbrekende lazy-load attributen op zware media onder de vouw. Zo blijft je site razendsnel én volledig indexeerbaar.
Probeer pSeoMatic gratisGerelateerde vragen
Kan Google lazy-loaded afbeeldingen indexeren?
Ja, Googlebot kan afbeeldingen indexeren via het native `loading="lazy"` attribuut of SEO-vriendelijke JS-methoden.
Helpt lazy loading bij PageSpeed-scores?
Absoluut. Het vermindert het initiële paginagewicht en verbetert de Time to Interactive (TTI).
Moet ik mijn logo op lazy loading zetten?
Nee, het logo staat meestal boven de vouw en moet onmiddellijk worden geladen.
Gerelateerde gidsen
Klaar om dit in de praktijk te brengen?
pSeoMatic genereert duizenden SEO-geoptimaliseerde pagina's op basis van jouw data.