Beheben Sie, dass das Largest Contentful Paint Bild in Lighthouse lazily geladen wurde

Largest Contentful Paint Bild lazily loaded - kurz gesagt.

Das Lazy-Loading des Largest Contentful Paint Bildes löst eine Lighthouse-Warnung aus. Lazy loaded Bilder werden zu einem viel späteren Zeitpunkt zum Herunterladen in die Warteschlange gestellt als die nicht-lazy (eager) Bilder. Dies führt dazu, dass das Bild später gerendert wird und verzögert die Largest Contentful Paint Metrik. 

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

Wenn Sie ein Bildelement lazy loaden, teilen Sie dem Browser explizit mit, dieses Bild zu depriorisieren.

Das bedeutet, dass alle anderen nicht-lazy Bilder früher zum Herunterladen eingeplant werden als Ihre lazy Bilder. Wenn dieses lazy Bild Ihr LCP-Element ist, werden Sie Ihren LCP wahrscheinlich verzögern. Vielleicht sogar um viel!

Die Dinge werden noch schlimmer, wenn Sie JavaScript-basierte Lazy-Loading-Bibliotheken wie lazysizes.js verwenden. Jetzt verzögert der Browser nicht nur Ihr LCP-Bildelement, Sie müssen sogar warten, bis JavaScript heruntergeladen und ausgeführt ist.

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

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

Diese Warnung, die ausgegeben wird, wenn das Largest Contentful Paint Bild vom Browser lazy-loaded wird. Warum? Weil das Lazy-Loading des wichtigsten Bildes auf der Seite (das Largest Contenful Paint Element) eine schlechte Idee ist. Für Pagespeed-Zwecke sollten Sie dieses Element so früh wie möglich laden. Das Lazy Loading dieses Elements könnte den Largest Contentful Paint verzögern.

Eine kurze Erinnerung: Lazy Loading

Lazy Loading ist, wenn ein Element, oft ein Bild, nicht sofort während des Seitenladens vom Browser zum Herunterladen eingeplant wird, sondern erst, wenn das Element nahe am sichtbaren Teil des Bildschirms ist. Es gibt 2 Methoden des Lazy Loading.

Natives Lazy Loading

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

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

JavaScript-basiertes Lazy Loading

JavaScript-basiertes Lazy Loading verwendet eine JavaScript API namens Intersection Observer, um zu bestimmen, wann sich ein Bild im oder nahe am sichtbaren Viewport befindet. Wenn sich ein Bild im sichtbaren Viewport befindet, wird die Bild-Quelle gegen das endgültige Bild ausgetauscht. Normalerweise können Sie JavaScript-basiertes Lazy Loading am data-src-Attribut auf dem Bild erkennen. JavaScript Lazy Loading wird von noch mehr Browsern unterstützt, hat aber einen gravierenden Nachteil: 'es verwendet JavaScript'. Damit Lazy Loading überhaupt beginnen kann, muss eine JavaScript-Datei heruntergeladen werden. Das bedeutet, dass JavaScript-basiertes Lazy Loading niemals so schnell und effizient sein kann wie natives Lazy Loading

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

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

Das Lazy Loading dieses Elements verzögert den Moment, in dem das LCP-Bild auf den Bildschirm gemalt wird. Dies führt dazu, dass ein Besucher glaubt, die Seite lädt langsamer, weil es länger dauert, bis sie 'visuell bereit' ist

Das wichtigste Bild, oft das LCP-Element, sollte sofort geladen werden, um sicherzustellen, dass es so schnell wie möglich auf den Bildschirm gemalt werden kann.

Nun könnten Sie denken, dass ein Browser schlau genug ist, das herauszufinden? Sie irren sich! Wenn Sie ein Bildelement lazy loaden, weisen Sie den Browser explizit an, dieses Bild zu depriorisieren. Das bedeutet, dass alle anderen nicht-lazy Bilder früher zum Herunterladen eingeplant werden als Ihre lazy Bilder. Wenn dieses lazy Bild Ihr LCP-Element ist, werden Sie wahrscheinlich Ihren LCP verzögern. Vielleicht sogar um viel!

Die Dinge werden noch schlimmer, wenn Sie JavaScript-basierte Lazy-Loading-Bibliotheken wie lazysizes.js verwenden. Jetzt verzögert der Browser nicht nur Ihr LCP-Bildelement, Sie müssen sogar warten, bis JavaScript heruntergeladen und ausgeführt ist.

Schauen Sie sich einfach diesen Chrome-Netzwerk-Tab an, wo ich das LCP-Bild (HERO.jpg) lazy geladen und 6 andere Bilder eager geladen habe. Sie werden sehen, dass das HERO-Bild das letzte Bild ist, das mit dem Herunterladen beginnt, und auch das letzte Bild, das mit dem Herunterladen fertig ist!

Ein bisschen mehr Detail

Lassen Sie uns nun etwas technischer werden. Warum kann ein Browser das nicht selbst herausfinden? Das heißt, mit Lazy Loading weisen Sie einen Browser speziell an, ein Bild zu depriorisieren. In vielen Fällen bedeutet dies, dass ein Browser zuerst andere Ressourcen herunterlädt. Und genau das verursacht die Verzögerung im LCP.

• Lazy Bilder werden viel später zum Herunterladen in die Warteschlange gestellt als nicht-lazy (eager) Bilder.
• Lazy Bilder werden oft mit niedriger Priorität heruntergeladen.
• Andere Elemente wie normale Bilder, verzögerte Skripte, Schriftarten usw. könnten früher zum Herunterladen eingeplant werden als lazy Bilder.
• JavaScript-basiertes Lazy Loading hängt von einem JavaScript ab, das herunterladen und ausführen muss, bevor das Lazy Loading überhaupt beginnen kann.
  

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

Die Behebung der Warnung über das lazy Largest Contentful Paint Bild ist einfach. Laden Sie dieses Bild einfach nicht lazy.

In der Theorie

• Wenn Sie natives Lazy Loading verwenden, entfernen Sie loading="lazy" vom LCP-Element oder ändern Sie es in loading="eager"
• Wenn Sie JavaScript-basiertes Lazy Loading verwenden, könnten Sie in Betracht ziehen, zum schnelleren nativen Lazy Loading zu wechseln oder einfach das LCP-Bild vom Lazy Loading auszuschließen.
• Wenn Sie eine Art Bildkomponente wie next/image verwenden, setzen Sie strategy="eager".

Im echten Leben

Im echten Leben könnte dies einige Kopfschmerzen verursachen. Viele Seiten verwenden Optimierungs-Plugins, die alle Bilder auf dem Bildschirm für Sie lazy loaden. Diese Plugins unterscheiden nicht zwischen wichtigen, immer sichtbaren Bildern und Bildern below-the-fold.

Die meisten Plugins erlauben es Ihnen, 'Lazy Loading zu umgehen', basierend auf Dateiname, Klassenname oder anderen Attributen. Das bedeutet, dass Sie die Dokumentation für Ihr Plugin lesen oder einfach '[Ihr Plugin-Name] + bypass lazy loading' googeln müssen. Bearbeiten Sie dann Ihre Template-Datei und ändern Sie Ihr Hauptbild entsprechend oder ändern Sie die Bilder in Ihrem Seiteneditor.

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

Manchmal erlaubt Ihr CMS Ihnen nicht, die Lazy-Loading-Einstellungen von Bildern zu ändern. In diesem Fall gibt es immer noch einige Workarounds, die Sie verwenden können, um die Auswirkungen zu minimieren.

• Lazy loaden Sie alle Bilder, um sicherzustellen, dass 'eager' Bilder below-the-fold nicht vor dem LCP-Bild heruntergeladen werden
  
• Vermeiden Sie Hintergrundbilder, um sicherzustellen, dass keine Hintergrundbilder vor dem LCP-Element heruntergeladen werden
  
• Preloaden Sie das LCP-Element. Dies stellt sicher, dass das LCP-Bild so früh wie möglich zum Herunterladen eingeplant wird
  
• Deaktivieren Sie JavaScript-basiertes Lazy Loading und wechseln Sie zu nativem Lazy Loading. Dies entfernt zumindest die JavaScript-Verzögerung
  
• Fügen Sie fetchpriority = "high" zum LCP-Element hinzu. Dies plant das Bild für einen frühen Download ein
  
• Optimieren Sie alle Ihre Bilder. Verwenden Sie responsive Bilder und Next-Gen-Bildformate, um die Zeit zu verkürzen, die das Herunterladen der Bilder kostet.