Beheben von Largest Contentful Paint image was lazily loaded in Lighthouse

Largest Contentful Paint image was lazily loaded: kurz gesagt

"Das Lazy-Loading des Largest Contentful Paint-Bildes löst eine Lighthouse-Warnung aus." Mit Lazy Loading geladene Bilder werden viel später zum Herunterladen in die Warteschlange gestellt als Eager-Bilder, was die LCP-Metrik verzögert. 

Zuletzt überprüft von Arjen Karel im Februar 2026

"Browser sind schlau genug, um das herauszufinden, oder? Ja, Browser sind ziemlich schlau, aber nicht in diesem Fall!"

"Wenn Sie ein Bildelement mit Lazy Loading laden, weisen Sie den Browser explizit an, dieses Bild zu depriorisieren."

Das bedeutet, dass Non-Lazy-Bilder früher geplant werden. Wenn das Lazy-Bild Ihr LCP-Element ist, werden Sie Ihren LCP wahrscheinlich verzögern, potenziell um einen erheblichen Betrag! JavaScript-basierte Lazy-Loading-Bibliotheken wie lazysizes.js verschlimmern dies noch, da sie das Herunterladen und Ausführen von JS erfordern, bevor das Lazy Loading beginnt.

Laut dem Web Almanac 2025 laden immer noch 10,4 % der mobilen Seiten ihr LCP-Bild mit nativem Lazy Loading und weitere 5,9 % verwenden JavaScript-basiertes Lazy Loading. Das bedeutet, dass etwa 1 von 6 Seiten ihren wichtigsten Inhalt aktiv verzögert.

Beheben Sie die Lighthouse-Warnung, indem Sie das loading="lazy"-Attribut aus Ihrem LCP-Bild entfernen oder Plugin-Filter aktualisieren, um das Lazy Loading für das LCP-Bild zu umgehen.

Was ist die Warnung 'Largest Contentful Paint image was lazily loaded'?

Diese Warnung wird angezeigt, wenn das Largest Contentful Paint-Bild mit Lazy Loading geladen wird. Aus Gründen der Seitengeschwindigkeit sollten Sie "dieses Element so früh wie möglich laden. Das Lazy Loading dieses Elements kann den Largest Contentful Paint verzögern."

Eine kurze Erinnerung: Lazy Loading

"Lazy Loading ist, wenn ein Element, oft ein Bild, vom Browser während des Ladens der Seite nicht sofort zum Herunterladen geplant wird, sondern erst dann, wenn sich das Element in der Nähe des sichtbaren Teils des Bildschirms befindet." Es gibt zwei Methoden.

Natives Lazy Loading

"Natives Lazy Loading nutzt die native Lazy-Loading-API des Browsers. Für Bilder ist es so einfach wie das Hinzufügen von loading="lazy" zum Image-Tag." Dies wird von allen modernen Browsern unterstützt.

<img loading="lazy"
     src="image.png"
     width="123"
     height="123"
     alt="ein mit Lazy Loading geladenes Bild"
>

JavaScript-basiertes Lazy Loading

"JavaScript-basiertes Lazy Loading verwendet eine JavaScript-API namens Intersection Observer, um zu bestimmen, wann sich ein Bild im sichtbaren Viewport oder in dessen Nähe befindet." Wenn es erkannt wird, wird die src ausgetauscht. Sie erkennen es am data-src-Attribut. Obwohl es weithin unterstützt wird, "verwendet es JavaScript", was einen Download erfordert, bevor das Lazy Loading beginnt, was es langsamer macht als native Ansätze.

<img data-src="image.png"
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="ein mit Lazy Loading geladenes Bild"
>

Wie wirkt sich ein 'lazy loading Largest Contentful Paint image' auf die Seitengeschwindigkeit aus?

"Das Largest Contentful Paint-Element ist das größte Element, das während des Ladens der Seite auf dem Bildschirm im sichtbaren Viewport gemalt wurde." Es markiert den Zeitpunkt, an dem die Seite visuell bereit zu sein scheint. Das Lazy Loading dieses Elements verzögert diese Wahrnehmung, sodass Besucher ein langsameres Laden wahrnehmen.

Das wichtigste Bild sollte für das schnellste Painting sofort geladen werden. Explizites Lazy Loading depriorisiert es jedoch und stellt andere Ressourcen früher in die Warteschlange. Beim JavaScript-Lazy-Loading fügen Sie weitere Verzögerungen hinzu, während Sie auf die Skriptausführung warten.

Wenn Sie einem Bild loading="lazy" hinzufügen, überspringt der Preload-Scanner des Browsers es vollständig. Normalerweise entdeckt der Preload-Scanner Bilder, während er noch das HTML parst, und beginnt frühzeitig mit dem Abrufen. Lazy Loading verzichtet auf diese frühzeitige Entdeckung, was genau der Grund ist, warum es die LCP-Ressourcenladeverzögerung (resource load delay) erhöht.

In einem Beispiel der Chrome-Netzwerk-Registerkarte mit einem LCP-Bild (Lazy) und sechs Eager-Bildern beginnt und endet das Herunterladen des Lazy-Bildes zuletzt, was die Auswirkungen in der realen Welt demonstriert.

Ein bisschen mehr Detail

Browser können Lazy-Loading-Direktiven nicht automatisch außer Kraft setzen. Zu den technischen Gründen für LCP-Verzögerungen gehören:

• "Lazy-Bilder werden viel später in die Warteschlange zum Herunterladen gestellt als Non-Lazy-Bilder (Eager-Bilder)."
• Lazy-Bilder werden in der Regel mit niedriger Priorität heruntergeladen.
• "Andere Elemente wie normale Bilder, verzögerte Skripte (deferred scripts), Schriftarten usw. können früher für den Download geplant werden als Lazy-Bilder."
• JavaScript-Lazy-Loading hängt vom Overhead für das Herunterladen und Ausführen von Skripten ab.

Wie man 'Largest Contentful Paint image was lazily loaded' behebt

"Das Beheben der Warnung ist einfach: Laden Sie dieses Bild nicht mit Lazy Loading."

In der Theorie

• Entfernen Sie beim nativen Lazy Loading loading="lazy" oder ändern Sie es in loading="eager"
• Wechseln Sie beim JavaScript-Lazy-Loading zu nativen Ansätzen oder schließen Sie das LCP-Bild aus.
• Setzen Sie bei Next.js next/image die Eigenschaft priority, um das Bild mit einem Preload-Hint als "eager" zu laden.

Wenn Ihr LCP-Element ein Hero-Bild ist, lesen Sie den vollständigen Leitfaden zur Behebung langsamer Hero-Bilder für zusätzliche Optimierungstechniken, einschließlich Preloading, fetchpriority und responsiver Bilder.

Im echten Leben

Optimierungs-Plugins laden oft alle Bilder automatisch mit Lazy Loading, ohne die Wichtigkeit zu unterscheiden. Die meisten erlauben das Umgehen von Lazy Loading über Dateinamen, Klassen oder Attribute. Überprüfen Sie Ihre Plugin-Dokumentation und aktualisieren Sie Ihre Templates entsprechend.

WordPress 6.3 und neuere Versionen laden die ersten paar Bilder nicht mehr mit Lazy Loading und fügen dem wahrscheinlichen LCP-Bild automatisch fetchpriority="high" hinzu. Wenn Sie diese Warnung auf einer WordPress-Website immer noch sehen, überschreibt wahrscheinlich ein Optimierungs-Plugin eines Drittanbieters dieses Verhalten. Laut dem Performance-Kapitel des Web Almanac 2022 sind 72 % der Seiten mit einem LCP-Bild, das mit Lazy Loading geladen wird, WordPress-Websites.

Workaround für 'Largest Contentful Paint image was lazily loaded'

Wenn CMS-Einschränkungen das Ändern der Lazy-Loading-Einstellungen verhindern, minimieren Workarounds die Auswirkungen:

• Laden Sie alle Bilder mit Lazy Loading, damit Eager-Bilder Below-the-fold nicht zuerst heruntergeladen werden
• Vermeiden Sie Hintergrundbilder, um konkurrierende Downloads zu verhindern
• Laden Sie das LCP-Element vorab (Preload), um einen frühen Download zu planen
• Deaktivieren Sie JavaScript-Lazy-Loading und verwenden Sie stattdessen natives
• Fügen Sie dem LCP-Element fetchpriority="high" hinzu, um eine frühzeitige Planung zu ermöglichen. Details dazu, wie Browser Ressourcen priorisieren, finden Sie im Leitfaden zur Ressourcenpriorisierung.
• Optimieren Sie alle Bilder mithilfe responsiver Techniken und Next-Gen-Formaten, um die Downloadzeit zu reduzieren.

Nachdem Sie Lazy Loading von Ihrem LCP-Bild entfernt haben, überprüfen Sie die Verbesserung mit Real User Monitoring. Die Lighthouse-Warnung ist laborbasiert, aber Google verwendet Felddaten (field data) von echten Nutzern für Ranking-Signale. Auf Websites, die von CoreDash getrackt werden, erreichen Seiten ohne LCP-Bilder mit Lazy Loading einen LCP-Wert von 79 % "gut" (good), verglichen mit 52 % bei Seiten, die ihr LCP-Element immer noch mit Lazy Loading laden.