Fix Defer offscreen images Lighthouse-Warnung

Was ist die 'defer offscreen images' Lighthouse-Warnung?

Was ist die defer offscreen images Warnung in Lighthouse? Lighthouse markiert Seiten, die entweder:

• Bilder haben, die unter 3-mal der Viewport-Höhe enden.
  Wenn ein Bild nicht lazy loaded ist und unter 3-mal der Höhe des sichtbaren Teils der Seite endet und unter dem sichtbaren Teil der Seite beginnt.
• Und größer als 0.02MB sind oder mehr als 50ms zum Laden benötigen.
  Bilder, die entweder klein oder inlined sind, werden von Lighthouse ignoriert. Oft verwenden Lazy-Loading-Skripte kleine Platzhalterbilder.
• Und das loading-Attribut nicht definiert haben.
  Lighthouse ignoriert Bilder, die entweder das loading="lazy" oder loading="eager" Attribut haben.

Die 'defer offscreen images' Warnung wirkt sich nicht direkt auf Lighthouse-Metriken aus. Theoretisch könnten Seiten mit Offscreen-Bildern ziemlich schnell laden. In der Praxis tun sie das oft nicht. Zu viele Offscreen-Bilder wirken sich höchstwahrscheinlich indirekt auf wichtige Lighthouse-Metriken wie Largest Contentful Paint (LCP) aus.

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 dürfen, normalerweise kurz bevor sie in den sichtbaren Bereich scrollen.

Was verursacht 'eager loaded' Offscreen-Bilder?

Bilder werden standardmäßig nicht verschoben. Offscreen-Bilder, die nicht verschoben werden, werden auf der Seite platziert, weil das loading-Attribut für das Bild leer ist oder die Bilder nicht mit der benutzerdefinierten Lazy-Loading-Bibliothek kompatibel sind. Offscreen-Bilder werden normalerweise verursacht durch:

• Schlecht codierte Plugins in Ihrem CMS.
• Plugins, die natives Lazy Loading deaktivieren
• Hintergrundbilder
• Page Builders, die schlechtes HTML generieren (zum Beispiel: Elementor oder WP Bakery).
  
• Text, der in einen WYSIWYG-Editor kopiert und eingefügt wurde (wie TinyMCE).
• Schlechtes Template-Coding.

Wie beeinflussen 'offscreen images' PageSpeed

Offscreen-Bilder wirken sich nicht direkt auf die Lighthouse-Metriken aus. Es macht das Rendern einer Webseite jedoch unnötig kompliziert, was es fast unmöglich macht, diese hohe Lighthouse-Bewertung zu erhalten. Ihr Browser muss mehr Ressourcen herunterladen, bevor die Webseite auf dem Bildschirm angezeigt werden kann. Es gibt 3 Probleme mit Offscreen-Bildern.

• Ihr Browser muss mehr Bilder herunterladen, bevor die Seite gerendert wird.
• Andere Ressourcen, die für das Rendern der Seite erforderlich sind, könnten verzögert werden, da sie eine niedrigere Priorität erhalten.
• Ihr Browser kann beim Rendern der Seite viel mehr Speicher verwenden.

Wie man 'defer offscreen images' behebt

Um 'defer offscreen images' zu beheben, müssen Sie Bilder lazy loaden, die sich nicht im sichtbaren Viewport befinden. Sie können dies tun, indem Sie natives Lazy Load oder eine Lazy-Loading-Bibliothek hinzufügen. Um natives Lazy Load hinzuzufügen, fügen Sie einfach 'loading="lazy" zum Bildelement hinzu'.

<img loading="lazy"
     src="image.webp" 
     alt="ein native lazy loaded Bild" 
     width="300" height="300">

Alternativ könnten Sie eine native Lazy-Loading-Bibliothek wie lazysizes hinzufügen oder Ihr eigenes Lazy Loading implementieren (das ist einfacher als Sie vielleicht denken).

Von dort aus müssen Sie ein bisschen suchen. Versuchen Sie herauszufinden, was dazu führt, dass diese Bilder nicht verschoben auf der Seite platziert werden. Es gibt 5 übliche Verdächtige:

1. Schlecht codierte Plugins in Ihrem CMS.
   Einige Plugins fügen HTML direkt zur Seite hinzu und verwenden nicht die richtigen Hooks, die Lazy Loading ermöglichen.
2. Plugins, die natives Lazy Loading deaktivieren.
   Es gibt Plugins da draußen, die natives Lazy Loading standardmäßig deaktivieren.
3. Page Builders, die schlechtes HTML generieren
   Page Builders wie Elementor oder WP Bakery erstellen oft aufgeblähten Code, der weit von perfekt entfernt ist. Es gibt keine einfache Lösung dafür. PageBuilders sind oft Teil des Workflows. Die Lösung umfasst das Bereinigen Ihres aufgeblähten Codes und das Ändern Ihres Workflows.
4. Text, der in einen WYSIWYG-Editor kopiert und eingefügt wurde
   Die meisten WYSIWYG-Editoren wie TinyMCE leisten schlechte Arbeit beim Bereinigen von eingefügtem Code, insbesondere wenn er aus einer anderen Rich-Text-Quelle wie Microsoft Word eingefügt wurde. Diese Editoren fügen Ihren Bildern möglicherweise kein Lazy Loading hinzu.
5. Schlechtes (Template-)Coding.
   Selbst wenn Lazy Loading aktiviert ist, könnten hardcodierte Bilder in Ihren Templates immer noch nicht lazy loaded sein. Überprüfen Sie Ihre Templates auf Offscreen-Bilder und lazy loaden Sie sie.

Welches ist besser - Natives Lazy Loading vs Lazy Loading-Skripte?

Welches ist besser? Sollten Sie das Browser-native loading="lazy" oder ein Lazy-Loading-Skript verwenden? Persönlich bevorzuge ich Browser-natives Lazy Loading. Warum? Weil ich kein externes Skript verwenden muss, das Overhead verursacht. Natives Lazy Loading ist einfach schneller. Natives Lazy Loading wird jedoch nicht von Safari unterstützt. Wenn die meisten Ihrer Benutzer das Web auf ihren iPhones oder Macs surfen, ziehen Sie die Verwendung eines Lazy-Loading-Skripts in Betracht. Meistens überwiegen die Vorteile von nativem Lazy Loading die Nachteile der fehlenden Safari-Unterstützung.

Workaround für 'defer offscreen images'

Manchmal ist es nicht möglich, Offscreen-Bilder zu verschieben. Sie haben vielleicht keinen Zugriff auf das Template oder Ihr CMS unterstützt möglicherweise kein Lazy Loading. Es gibt einige Workarounds, um die Auswirkungen von Offscreen-Bildern zu verringern. Diese Workarounds sind weit von perfekt entfernt und könnten eine ganz neue Reihe von Herausforderungen mit sich bringen.

• Minimieren und komprimieren Sie Ihre Bilder.
  Minimieren und komprimieren Sie Ihre aktuellen Bilder. Kleinere Bilder haben weniger Einfluss auf die Ladeleistung als große Bilder.
• Verwenden Sie neue und schnellere Dateiformate.
  Anstatt png und jpeg Dateiformate, wechseln Sie zu einem schnelleren Dateiformat wie WebP.
• Teilen Sie große Seiten in mehrere Seiten auf.
  Das Aufteilen großer Seiten in mehrere Seiten könnte die Anzahl der auf einer Seite angezeigten Bilder verringern.
• Implementieren Sie Infinite Scroll.
  Infinite Scroll ist im Grunde Lazy Loading, nur nicht für Bilder, sondern für ganze Teile der Webseite. Beim Scrollen durch wiederholte Elemente wie Bilder (siehe Pinterest als Beispiel) könnte Infinite Scroll Ihre Seite erheblich beschleunigen.