Lazy loading: uitstellen zonder verstoppen

Bij lazy loading worden afbeeldingen, iframes of complete componenten pas opgehaald wanneer de gebruiker er bijna is. De browser downloadt dan bij het eerste bezoek alleen wat direct zichtbaar is. Op een pagina met dertig productfoto's scheelt dat gemakkelijk enkele megabytes en seconden, vooral op mobiel.

Correct toegepast verbetert lazy loading je Largest Contentful Paint, omdat de browser zijn bandbreedte besteedt aan wat er als eerste in beeld komt. Verkeerd toegepast doet het exact het omgekeerde: zet je de grote hero-afbeelding op lazy, dan wordt die pas na de layout opgehaald en schiet je LCP omhoog. Reserveer daarnaast altijd hoogte en breedte, anders veroorzaak je layout shift.

Gebruik het native attribuut loading="lazy" op afbeeldingen en iframes onder de vouw, en loading="eager" met fetchpriority="high" op de hero. Geef elke afbeelding expliciete width- en height-attributen. Voeg srcset toe voor responsieve varianten en gebruik moderne formaten als WebP of AVIF. Eigen JavaScript-oplossingen met data-src zijn zelden nog nodig en vaker een risico.

Voor afbeeldingen is lazy loading veilig; voor tekst en links is het dat niet altijd. Content die pas verschijnt na een scroll-event, een klik op 'meer laden' of een oneindige scroll, kan door crawlers gemist worden — zeker door AI-crawlers die geen JavaScript uitvoeren. Zorg dat belangrijke tekst, interne links en paginering ook in de initiële HTML staan of via echte URL's bereikbaar zijn.

Gebruik URL-inspectie in Search Console en bekijk de gerenderde HTML: staat je tekst erin en zijn de afbeeldingen opgehaald? Draai daarnaast Lighthouse of PageSpeed Insights en let specifiek op de LCP-melding over lazy geladen hero-afbeeldingen. Haal ten slotte je pagina op met een simpele HTML-fetch zonder JavaScript om te zien wat een AI-crawler ervan overhoudt.