Techniek · Lazy Loading · Performance
Lazy loading voor afbeeldingen implementeren.
Lazy loading voor afbeeldingen implementeren: native loading=lazy attribute, IntersectionObserver voor custom solutions, 6 SEO best-practices en wanneer je beelden juist NIET wilt lazy-laden.
01 — viewportAbove-the-fold vs below-the-fold: het kern-principe
Lazy loading is een performance-techniek waarbij afbeeldingen pas geladen worden als ze in het zichtbare deel van de browser komen. Het kernconcept: only load wat de gebruiker daadwerkelijk ziet. Hieronder visueel waarom dit werkt — en welke beelden je juist NIET wilt lazy-laden. Voor breder context op performance zie host en SEO.
Viewport · above vs below the foldvisualisatie
A
Hero-image (logo, banner)
loading="eager"
B
Featured image artikel
loading="eager"
C
Diagram halverwege artikel
loading="lazy"
↓ Below the fold — gebruiker moet scrollen ↓
Above-the-fold images = direct laden (eager). Below-the-fold images = lazy-loaded — pas geladen wanneer de gebruiker scrolt. Resultaat: snellere initial pageload + betere LCP.
De native HTML-implementatie — sinds 2020 ondersteund in alle moderne browsers:
<!-- Above-the-fold: NIET lazy-laden -->
<img src="hero.webp" alt="Banner" loading="eager" fetchpriority="high">
<!-- Below-the-fold: lazy-loaden (browser-native) -->
<img src="diagram.webp" alt="Diagram" loading="lazy">
<!-- BELANGRIJK: aspect-ratio voor layout-stabiliteit -->
<img src="foto.webp" width="800" height="600" loading="lazy">
<img src="hero.webp" alt="Banner" loading="eager" fetchpriority="high">
<!-- Below-the-fold: lazy-loaden (browser-native) -->
<img src="diagram.webp" alt="Diagram" loading="lazy">
<!-- BELANGRIJK: aspect-ratio voor layout-stabiliteit -->
<img src="foto.webp" width="800" height="600" loading="lazy">
02 — best-practices6 SEO best-practices voor lazy loading
Lazy loading kan SEO-prestaties verbeteren — maar verkeerd toegepast veroorzaakt het juist problemen. Hieronder mijn 6 best-practices op basis van honderden site-audits.
6 best-practices · SEO + UXimplementation-rules
1
Above-the-fold images NIET lazy-laden
Hero-image, logo, eerste featured image: loading="eager". Lazy-laden van LCP-element verslechtert Core Web Vitals — directe ranking-impact. Identify LCP-image via Lighthouse, geef expliciet loading="eager" + fetchpriority="high".
2
Altijd alt-tekst behouden
Lazy-loading verandert niets aan accessibility-vereisten. Elke image moet alt-attribuut hebben voor screen-readers + Google Image-search. Beschrijvende alt-tekst is ook indirect ranking-signaal voor de pagina.
3
Width + height attributes voor aspect-ratio
Voorkomt Cumulative Layout Shift (CLS). Browser kan ruimte reserveren vóór image laadt. Zonder dimensions = layout-springt bij elke lazy-image-load. Sterk negatief Core Web Vitals impact.
4
Native loading=lazy boven JS-bibliotheken
Sinds 2020 ondersteund door 95%+ van browsers. Geen JavaScript nodig. Snelste, meest robust, geen rendering-blocking. JS-bibliotheken (LazySizes, Lozad) nog steeds nuttig voor IE-support — maar IE is dood (2022).
5
Test of Google de images crawlt
URL Inspection in Search Console. "View crawled page" toont wat Googlebot ziet. Images zichtbaar in screenshot = correct geladen. Niet zichtbaar = lazy-loading-issue blocking indexering. Belangrijk voor Google Images-traffic.
6
Combineer met moderne image-formats
Lazy loading + WebP/AVIF = double win. Lazy loading vermindert aantal requests, modern formats verkleinen elk bestand. Samen kan dit page-weight met 50-70% verminderen. Test via PageSpeed Insights voor concrete savings.
03 — faqVeelgestelde vragen
FAQ · 3 vragenklik om te openen
Heeft lazy loading invloed op Google Image-search?›
Bij correcte implementatie nee. Vijf principes om image-indexering te waarborgen. (1) Googlebot ondersteunt loading=lazy. Native HTML lazy-loading wordt door Google correct verwerkt. Images worden geladen tijdens crawling, niet pas bij scroll-event. Geen verlies van indexering. (2) JS-only lazy loading riskanter. Custom JS-libraries die data-src gebruiken (in plaats van src) zonder fallback = Googlebot ziet mogelijk geen image. Combineer altijd src met data-src. (3) Test via Search Console URL Inspection. "View crawled page" toont images zoals Googlebot ze ziet. Als ze daar zichtbaar zijn = OK. Niet zichtbaar = lazy-loading-config aanpassen. (4) Images moeten in HTML zitten. Lazy loading + JS-rendering combinatie kan problematisch zijn. Image moet ergens in HTML (src of data-src) zodat Googlebot het kan ontdekken. Niet alleen via window.fetch() inladen. (5) Alt-tekst blijft cruciaal. Voor Google Image-search ranking is alt-tekst belangrijker dan lazy-loading-implementatie. Beschrijvende alt + bestandsnaam + omringende content = beste image-ranking. Voor breder context zie on-page SEO checklist.
Wat is fetchpriority en wanneer gebruik ik het?›
Fetchpriority is een 2023-feature voor LCP-optimalisatie. Zes use-cases. (1) fetchpriority="high" voor LCP-image. Boven-de-vouw hero-image of belangrijkste content-image. Browser laad deze met hoogste prioriteit, vóór andere resources. Direct LCP-verbetering. (2) fetchpriority="low" voor decoratieve images. Achtergrond-decoratie, niet-essentiële images. Browser laadt deze ná belangrijke content. Helpt bij bandwidth-management. (3) Combineren met loading-attribuut. fetchpriority="high" + loading="eager" voor LCP-image. fetchpriority="low" + loading="lazy" voor below-fold decoratie. (4) Niet overal high gebruiken. Als alles "high" is, is niets meer prioriteit. Gebruik selectief — alleen voor LCP-element en andere kritieke resources. (5) Browser-support 2026. Chrome, Edge, Safari ondersteunen het. Firefox volgt typisch 12-18 maanden later. Geen breaking behavior bij niet-ondersteunde browsers — default-prioriteit wordt gebruikt. (6) Praktisch impact: LCP-verbetering van 200-800ms bij correct gebruik. Goede ROI voor minimal implementation effort. Voor breder context zie host en SEO.
Hoe combineer ik lazy loading met responsive images (srcset)?›
Volledig compatibel — combineren versterkt elkaar. Vijf principes voor optimale setup. (1) Responsive images via srcset. Bied verschillende image-resoluties aan voor verschillende device-sizes. Browser kiest beste variant op basis van viewport + density. Bespaart bandwidth voor mobile users. (2) Lazy + srcset combinatie. img src="default.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" loading="lazy". Browser past beide regels toe: pick right size + load only when visible. (3) Picture-element voor art direction. Voor verschillende image-versies per breakpoint (niet alleen size maar ook compositie). picture-element met source-tags. Compatibel met loading-attribute op img-tag binnen picture. (4) Modern formats per srcset. picture-element kan ook AVIF/WebP/JPG fallback bieden per breakpoint. Browser pakt beste format dat het ondersteunt. Maximale optimalisatie. (5) Test via DevTools Network-tab. Verifieer dat juiste resolutie + format wordt geladen voor je device + viewport. Mobile-emulator in Chrome DevTools toont andere requests dan desktop. Voor breder context zie afbeeldingen comprimeren.
Lazy loading + image-optimization voor jouw site?
Audit van bestaande image-implementatie, conversie naar WebP/AVIF, native lazy loading-setup, en LCP-optimalisatie via fetchpriority. Plus monitoring van Core Web Vitals impact via Search Console.
Plan een gesprek met Ralf →