De Lighthouse waarschuwing 'Largest Contentful Paint image was lazily loaded' oplossen

Largest Contentful Paint image was lazily loaded: kort samengevat

"Lazy loading van de Largest Contentful Paint afbeelding activeert een Lighthouse waarschuwing." Lazy loaded afbeeldingen worden veel later in de downloadwachtrij geplaatst dan eager afbeeldingen, wat de LCP metric vertraagt. 

Laatst beoordeeld door Arjen Karel in februari 2026

"Browsers zijn slim genoeg om dit zelf uit te zoeken toch? Ja, browsers zijn behoorlijk slim, maar niet in dit geval!"

"Wanneer je een afbeelding lazy load, vertel je de browser expliciet om deze afbeelding een lagere prioriteit te geven."

Dit betekent dat niet-lazy afbeeldingen eerder worden ingepland. Wanneer de lazy afbeelding je LCP element is, zul je waarschijnlijk je LCP vertragen, mogelijk aanzienlijk! JavaScript lazy loading bibliotheken zoals lazysizes.js verergeren dit doordat JS eerst gedownload en uitgevoerd moet worden voordat lazy loading begint.

Volgens de 2025 Web Almanac past 10,4% van de mobiele pagina's nog steeds native lazy loading toe op hun LCP afbeelding en nog eens 5,9% gebruikt JavaScript lazy loading. Dat is ruwweg 1 op de 6 pagina's die actief hun belangrijkste content vertraagt.

Los de Lighthouse waarschuwing op door het loading="lazy" attribuut van je LCP afbeelding te verwijderen of plugin filters bij te werken om lazy loading voor de LCP afbeelding te omzeilen.

Wat is de 'Largest Contentful Paint image was lazily loaded' waarschuwing?

Deze waarschuwing verschijnt wanneer de Largest Contentful Paint afbeelding lazy geladen wordt. Voor paginasnelheid geldt: "je moet dit element zo vroeg mogelijk laden. Lazy loading van dit element kan de Largest Contentful Paint vertragen."

Een snelle opfrisser: lazy loading

"Lazy loading is wanneer een element, vaak een afbeelding, niet direct door de browser wordt ingepland voor download tijdens het laden van de pagina, maar pas wanneer het element dicht bij het zichtbare deel van het scherm is." Er bestaan twee methoden.

Native lazy loading

"Native lazy loading maakt gebruik van de native lazy loading API van de browser. Voor afbeeldingen is het zo simpel als het toevoegen van loading="lazy" aan de image tag." Dit wordt ondersteund door alle moderne browsers.

<img 
     src="image.png"
     width="123"
     height="123"
     alt="a lazy loaded image"
>

JavaScript lazy loading

"JavaScript lazy loading maakt gebruik van een JavaScript API genaamd de Intersection Observer om te bepalen wanneer een afbeelding in of dichtbij de zichtbare viewport is." Wanneer gedetecteerd, wordt de src verwisseld. Herkenbaar aan het data-src attribuut. Hoewel breed ondersteund, "gebruikt het JavaScript", wat download vereist voordat lazy loading begint, waardoor het langzamer is dan native benaderingen.

<img 
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="a lazy loaded image"
>

Hoe beïnvloedt een 'lazy loaded Largest Contentful Paint afbeelding' de paginasnelheid?

"Het Largest Contentful Paint element is het grootste element dat op het scherm is geschilderd, in de zichtbare viewport, tijdens het laden van de pagina." Het markeert wanneer de pagina visueel klaar lijkt. Lazy loading van dit element vertraagt die perceptie, waardoor bezoekers een tragere laadtijd ervaren.

De belangrijkste afbeelding moet direct laden voor de snelste weergave. Echter, expliciet lazy loading geeft het een lagere prioriteit, waardoor andere resources eerder in de wachtrij komen. Met JavaScript lazy loading voeg je extra vertraging toe door te wachten op scriptuitvoering.

Wanneer je loading="lazy" aan een afbeelding toevoegt, slaat de preload scanner van de browser deze volledig over. Normaal ontdekt de preload scanner afbeeldingen terwijl de HTML nog wordt geparsed en begint ze vroeg op te halen. Lazy loading sluit deze vroege ontdekking uit, wat precies de reden is waarom het de LCP resource load delay verhoogt.

In een voorbeeld van een Chrome netwerk tab met één lazy LCP afbeelding en zes eager afbeeldingen, start en eindigt de lazy afbeelding als laatste met downloaden, wat de impact in de praktijk aantoont.

Iets meer detail

Browsers kunnen lazy loading instructies niet automatisch overschrijven. Technische redenen voor LCP vertragingen zijn:

• "Lazy afbeeldingen worden veel later in de downloadwachtrij geplaatst dan niet-lazy (eager) afbeeldingen."
• Lazy afbeeldingen downloaden doorgaans met lage prioriteit.
• "Andere elementen zoals normale afbeeldingen, deferred scripts, fonts etc. kunnen eerder worden ingepland voor download dan lazy afbeeldingen."
• JavaScript lazy loading is afhankelijk van de overhead van scriptdownload en uitvoering.

Hoe los je 'Largest Contentful Paint image was lazily loaded' op

"De oplossing is simpel: pas geen lazy loading toe op deze afbeelding."

In theorie

• Voor native lazy loading, verwijder loading="lazy" of wijzig naar loading="eager"
• Voor JavaScript lazy loading, schakel over naar native benaderingen of sluit de LCP afbeelding uit.
• Voor Next.js next/image, stel priority in om de afbeelding eager te laden met een preload hint.

Als je LCP element een hero afbeelding is, bekijk dan de complete gids over hoe je langzame hero afbeeldingen oplost voor aanvullende optimalisatietechnieken waaronder preloading, fetchpriority en responsive afbeeldingen.

In de praktijk

Optimalisatie plugins passen vaak automatisch lazy loading toe op alle afbeeldingen zonder onderscheid in belang. De meeste bieden de mogelijkheid om lazy loading te omzeilen via bestandsnaam, class of attributen. Raadpleeg je plugin documentatie en werk je templates dienovereenkomstig bij.

WordPress 6.3 en later past geen lazy loading meer toe op de eerste afbeeldingen en voegt automatisch fetchpriority="high" toe aan de waarschijnlijke LCP afbeelding. Als je deze waarschuwing nog steeds ziet op een WordPress site, overschrijft waarschijnlijk een optimalisatie plugin van derden dit gedrag. Volgens het Performance hoofdstuk van de 2022 Web Almanac is 72% van de pagina's met een lazy geladen LCP afbeelding een WordPress site.

Workaround voor 'Largest Contentful Paint image was lazily loaded'

Wanneer CMS beperkingen het wijzigen van lazy loading instellingen verhinderen, minimaliseren workarounds de impact:

• Pas lazy loading toe op alle afbeeldingen zodat eager afbeeldingen onder de vouw niet als eerste downloaden
• Vermijd achtergrondafbeeldingen om concurrerende downloads te voorkomen
• Preload het LCP element om een vroege download in te plannen
• Schakel JavaScript lazy loading uit en gebruik native in plaats daarvan
• Voeg fetchpriority="high" toe aan het LCP element voor vroege inplanning. Voor details over hoe browsers resources prioriteren, zie de gids voor resource prioritering.
• Optimaliseer alle afbeeldingen met responsive technieken en next-gen formaten om de downloadtijd te verkorten.

Na het verwijderen van lazy loading van je LCP afbeelding, verifieer de verbetering met Real User Monitoring. De Lighthouse waarschuwing is lab-gebaseerd, maar Google gebruikt echte gebruikersdata uit het veld voor rankingsignalen. Over sites die worden gevolgd door CoreDash scoren pagina's zonder lazy geladen LCP afbeeldingen 79% 'goed' op LCP vergeleken met 52% voor pagina's die nog steeds lazy loading toepassen op hun LCP element.