'Defer Offscreen Images' beheben: Lazy-Loading-Leitfaden für Core Web Vitals

Was ist 'defer offscreen images'?

Die Warnung defer offscreen images war ein Lighthouse-Audit, das Seiten mit Bildern markierte, die mit Lazy Loading geladen werden könnten. Lighthouse markierte Bilder, die alle folgenden Kriterien erfüllten:

• Das Bild endet unterhalb der 3-fachen Viewport-Höhe.
  Wenn ein Bild nicht mit Lazy Loading geladen wird und unterhalb des 3-fachen der Höhe des sichtbaren Teils der Seite endet, und unterhalb des sichtbaren Teils der Seite beginnt.
• Das Bild ist größer als 0,02 MB oder das Laden dauert länger als 50 ms.
  Bilder, die entweder klein oder inlined sind, werden ignoriert. Lazy-Loading-Skripte verwenden oft kleine Platzhalterbilder, die unter diesen Schwellenwert fallen.
• Das Bild hat kein definiertes Ladeattribut (loading).
  Lighthouse ignoriert Bilder, die entweder das Attribut loading="lazy" oder loading="eager" haben.

Dieses Audit wurde in Lighthouse 13 entfernt

Seit Lighthouse 13 (Oktober 2025) wurde dieses Audit vollständig entfernt. Das Chrome-Team hat festgestellt, dass moderne Browser Offscreen-Bilder bereits depriorisieren, sodass das Audit mehr Rauschen als nützliches Feedback erzeugte.

Aber hier ist die Sache: Die Optimierung selbst ist immer noch wichtig. Das Lazy Loading von Offscreen-Bildern reduziert die Bandbreite, gibt Netzwerkverbindungen für kritische Ressourcen frei und verbessert Ihren Largest Contentful Paint (LCP). Die Tatsache, dass Lighthouse dies nicht mehr markiert, bedeutet, dass Sie es selbst überprüfen müssen. Verwenden Sie Real User Monitoring oder auditieren Sie Ihre Seiten manuell auf Bilder, die ohne loading="lazy" geladen werden.

Eine kurze Erinnerung: Was ist Lazy Loading?

Lazy Loading bedeutet, dass Bilder, die sich nicht im sichtbaren Teil der Seite befinden, zu einem späteren Zeitpunkt geladen werden, normalerweise kurz bevor sie in den Viewport scrollen. Der Browser ruft das Bild erst dann ab, wenn der Benutzer in seine Nähe kommt. Das spart Bandbreite und lässt den Browser sich auf die Ressourcen konzentrieren, die für den initialen Render tatsächlich wichtig sind.

Was verursacht mit Eager-Loading geladene Offscreen-Bilder?

Bilder werden standardmäßig nicht verzögert (deferred). Offscreen-Bilder, die nicht verzögert werden, landen auf der Seite, weil das Ladeattribut fehlt oder das Bild nicht von einer Lazy-Loading-Bibliothek behandelt wird. Häufige Ursachen:

• Schlecht codierte Plugins in Ihrem CMS.
• Plugins, die das native Lazy Loading deaktivieren.
• Hintergrundbilder (Background images) (diese erfordern einen anderen Ansatz als loading="lazy").
• Page Builder, die schlechtes HTML generieren (zum Beispiel: Elementor oder WP Bakery).
• Text, der kopiert und in einen WYSIWYG-Editor (wie TinyMCE) eingefügt wird.
• Schlechtes Template-Coding.

Wie wirken sich Offscreen-Bilder auf Ihre Core Web Vitals aus?

Offscreen-Bilder wirken sich nicht direkt auf die Lighthouse-Metriken aus. Aber sie machen das Rendern einer Webseite unnötig kompliziert. Ihr Browser muss mehr Ressourcen herunterladen, bevor die Seite auf dem Bildschirm angezeigt werden kann. Es gibt 3 Probleme mit mit Eager-Loading geladenen Offscreen-Bildern:

• Mehr Downloads vor dem Rendern. Ihr Browser muss Bilder herunterladen, die der Benutzer noch gar nicht sehen kann.
• Kritische Ressourcen werden depriorisiert. Die Bilder konkurrieren um Bandbreite mit Ressourcen, die tatsächlich für das Rendern benötigt werden, wie Ihr CSS und Ihr LCP-Bild.
• Höhere Speichernutzung. Das Dekodieren von Bildern, zu denen der Benutzer noch nicht gescrollt hat, verschwendet Speicherplatz, insbesondere auf mobilen Low-End-Geräten.

Laut dem Page Weight-Kapitel des Web Almanac 2025 lädt die mediane mobile Seite 15 Bilder. Beim 90. Perzentil springt diese Zahl auf 52. Bei bildlastigen Seiten kann das Lazy Loading der Offscreen-Bilder einen echten Unterschied machen. Über die von CoreDash überwachten Seiten hinweg bestehen [CD:placeholder] % der Seiten, die Offscreen-Bilder ordnungsgemäß mit Lazy Loading laden, den LCP, verglichen mit [CD:placeholder] % der Seiten, die dies nicht tun.

So beheben Sie 'defer offscreen images'

Um mit Eager-Loading geladene Offscreen-Bilder zu beheben, fügen Sie jedem Bild, das sich Below-the-fold befindet, loading="lazy" hinzu. Natives Lazy Loading wird jetzt weltweit von 95 % der Browser unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Sie benötigen dafür keine Bibliothek.

<img loading="lazy"
     src="image.webp"
     alt="ein natives mit Lazy Loading geladenes Bild"
     width="300" height="300">

Verfolgen Sie die Ursprünge Ihrer Eager-geladenen Bilder zurück. Überprüfen Sie, welche Bilder ohne ein loading-Attribut geladen werden, und finden Sie heraus, was sie auf der Seite platziert. Es gibt 5 übliche Verdächtige:

1. Schlecht codierte Plugins in Ihrem CMS.
   Einige Plugins fügen HTML direkt in die Seite ein und verwenden nicht die korrekten Hooks, die Lazy Loading aktivieren.
2. Plugins, die das native Lazy Loading deaktivieren.
   Einige Plugins deaktivieren das native Lazy Loading standardmäßig. Überprüfen Sie Ihre Plugin-Einstellungen.
3. Page Builder, die schlechtes HTML generieren.
   Page Builder wie Elementor oder WP Bakery erstellen oft aufgeblähten Code, der alles andere als perfekt ist. Es gibt dafür keinen einfachen Fix. Die Lösung umfasst das Bereinigen Ihres Codes und das Ändern Ihres Workflows.
4. Text, der in einen WYSIWYG-Editor kopiert und eingefügt wird.
   Die meisten WYSIWYG-Editoren wie TinyMCE leisten beim Bereinigen von eingefügtem Code schlechte Arbeit, insbesondere wenn er aus einer anderen Rich-Text-Quelle wie Microsoft Word eingefügt wird. Diese Editoren fügen Ihren Bildern möglicherweise kein Lazy Loading hinzu.
5. Schlechtes Template-Coding.
   Selbst wenn Lazy Loading aktiviert ist, werden fest codierte Bilder in Ihren Templates möglicherweise immer noch nicht mit Lazy Loading geladen. Überprüfen Sie Ihre Templates auf Offscreen-Bilder und laden Sie diese mit Lazy Loading.

Laden Sie Ihr LCP-Bild nicht mit Lazy Loading

Dies ist die wichtigste Regel für Lazy Loading: Wenden Sie niemals loading="lazy" auf Ihr Largest Contentful Paint-Bild an. Das LCP-Bild ist fast immer das Hero-Bild oder das größte sichtbare Element im Viewport. Laut dem Web Almanac 2025 laden immer noch 16 % der mobilen Seiten ihr LCP-Bild mit Lazy Loading. Dieses einzige Attribut kann Ihrem LCP 200 bis 500 Millisekunden hinzufügen.

Tun Sie stattdessen das Gegenteil für Ihr LCP-Bild. Stellen Sie sicher, dass es mit fetchpriority="high" so schnell wie möglich geladen wird:

<img fetchpriority="high"
     loading="eager"
     src="hero.webp"
     alt="Hero image"
     width="1200" height="600">

Wenn Sie Ihr LCP-Bild versehentlich mit Lazy Loading geladen haben, lesen Sie Wie man ein mit Lazy Loading geladenes LCP-Bild behebt. Für einen vollständigen Leitfaden zur Optimierung von Bildern siehe Bilder für Core Web Vitals optimieren.

Cheatsheet zum Laden von Bildern

Nicht jedes Bild sollte auf die gleiche Weise behandelt werden. Hier ist, wie Sie mit den 4 häufigsten Szenarien umgehen:

Natives Lazy Loading im Vergleich zu Lazy-Loading-Skripten

Verwenden Sie natives loading="lazy". Im Jahr 2026 gibt es keinen Grund mehr, eine JavaScript-Lazy-Loading-Bibliothek für Standard-<img>-Elemente hinzuzufügen. Natives Lazy Loading wird von allen gängigen Browsern einschließlich Safari (seit Version 15.4) unterstützt und deckt weltweit 95 % der Benutzer ab. Es erfordert kein JavaScript, fügt keinen Overhead hinzu und funktioniert Out-of-the-Box.

Bibliotheken wie lazysizes waren unerlässlich, bevor Browser natives Lazy Loading unterstützten. Sie werden nicht mehr gepflegt und sind für die meisten Sites nicht mehr notwendig. Die einzigen Szenarien, in denen Sie möglicherweise noch eine JavaScript-Lösung benötigen:

• CSS-Hintergrundbilder. Natives Lazy Loading funktioniert nur bei <img>- und <iframe>-Elementen. Für Hintergrundbilder benötigen Sie IntersectionObserver oder content-visibility: auto.
• Benutzerdefinierte Ladeschwellenwerte. Chrome beginnt mit dem Laden von "Lazy"-Bildern bei schnellen Verbindungen etwa 1250 px unterhalb des Viewports und bei langsamen Verbindungen bei 2500 px. Sie können diesen Abstand nicht anpassen. Wenn Sie eine strengere Kontrolle benötigen, bietet Ihnen ein IntersectionObserver mit einem benutzerdefinierten rootMargin diese.

Wenn Sie dennoch eine Bibliothek benötigen, verwenden Sie vanilla-lazyload anstelle von lazysizes. Sie wird aktiv gepflegt, verwendet IntersectionObserver und unterstützt Hintergrundbilder.

Layout Shift bei Bildern mit Lazy Loading verhindern

Schließen Sie immer die Attribute width und height bei Bildern mit Lazy Loading ein. Ohne explizite Dimensionen weiß der Browser nicht, wie viel Platz er reservieren soll. Wenn das Bild schließlich geladen wird, drückt es den umgebenden Inhalt nach unten, was zu Cumulative Layout Shift (CLS) führt. Laut dem Web Almanac 2025 haben immer noch 62 % der mobilen Seiten mindestens ein Bild ohne Dimensionen.

<!-- Schlecht: verursacht Layout Shift -->
<img loading="lazy" src="photo.webp" alt="Foto">

<!-- Gut: Dimensionen reservieren Platz -->
<img loading="lazy" src="photo.webp" alt="Foto" width="800" height="600">

Workarounds, wenn Sie Lazy Loading nicht verwenden können

Manchmal ist es nicht möglich, Offscreen-Bilder zu verzögern. Möglicherweise haben Sie keinen Zugriff auf das Template oder Ihr CMS unterstützt kein Lazy Loading. Es gibt ein paar Workarounds, um die Auswirkungen zu verringern. Diese sind alles andere als perfekt und könnten neue Herausforderungen mit sich bringen.

• Komprimieren Sie Ihre Bilder. Kleinere Bilder wirken sich weniger auf die Ladeleistung aus als große Bilder. Verwenden Sie moderne Komprimierungstechniken, um die Dateigröße zu reduzieren.
• Verwenden Sie schnellere Bildformate. Wechseln Sie von PNG und JPEG zu WebP oder AVIF. WebP komprimiert laut dem Media-Kapitel des Web Almanac 2024 auf etwa 1,3 Bit pro Pixel im Vergleich zu 2,0 bei JPEG.
• Teilen Sie große Seiten in mehrere Seiten auf. Das Aufteilen großer Seiten reduziert die Anzahl der Bilder, die gleichzeitig geladen werden müssen.
• Implementieren Sie Infinite Scroll. Infinite Scroll ist im Grunde Lazy Loading, nur nicht für Bilder, sondern für ganze Teile der Webseite. Bei Seiten mit vielen wiederholten Elementen (denken Sie an Pinterest) kann Infinite Scroll das initiale Laden erheblich beschleunigen.

Bei mobilspezifischen Überlegungen sind Offscreen-Bilder ein noch größeres Problem, da mobile Verbindungen langsamer und mobile Viewports kleiner sind, was bedeutet, dass mehr Bilder Offscreen landen.

Welchen Ansatz Sie auch wählen, stellen Sie sicher, dass er bei echten Benutzern funktioniert. Richten Sie Real User Monitoring ein, um zu verfolgen, ob Ihre Änderungen tatsächlich den LCP und die gesamten Core Web Vitals in der Praxis (in the field) verbessern.