Lazy Loading von Bildern: Ein umfassender Leitfaden

„Lazy Loading“ ist eine Technik des verzögerten Ladens von Inhalten, die die Geschwindigkeit des Seitenaufbaus optimiert. Bilder und andere Ressourcen werden nur dann geladen, wenn sie sich dem Sichtfeld des Benutzers nähern.

Wobei genau hilft diese Technik?

• Sie reduziert die anfängliche Ladezeit der Seite (Metrik First Contentful Paint)
• Sie hilft, das LCP-Element schneller darzustellen (verbessert die Metrik Largest Contentful Paint).
• Sie spart Datenvolumen und die Anzahl der Anfragen.

Insgesamt verbessert diese Methode das Benutzererlebnis, insbesondere auf mobilen Geräten oder bei langsamen Verbindungen.

In diesem umfassenden Leitfaden zum Lazy Loading erfahren Sie, wie Sie diese Technik implementieren, die Auswirkungen messen und welche Geschwindigkeitsverbesserungen wir nach der Implementierung gesehen haben.

Der Lade-Attribut bei IMG-Tags#

HTML bietet das Attribut loading, mit dem Sie die Ladeweise von Elementen bestimmen können. Dieses Attribut fügen Sie einfach dem <img>-Tag hinzu.

<img src="image.webp" loading="lazy" alt="…" width="200" height="200" />

Das loading-Attribut kann zwei nützliche Werte haben:

• lazy – Bilder werden nur geladen, wenn sie sich nahe oder innerhalb des Viewports befinden.
• eager – Bilder werden sofort geladen. Dies ist die Standardeinstellung.

Wie implementiert man Lazy Loading von Bildern?#

Im Allgemeinen empfehlen wir einen konservativen Ansatz, also die Anwendung von loading="lazy" auf alle Bilder, die sich zuverlässig außerhalb des ersten sichtbaren Bereichs befinden. Es gibt jedoch mehrere Ansätze und wir werden sie gemeinsam betrachten.

Konservativer Ansatz: Bilder außerhalb des ersten Viewports#

Alle Bilder außerhalb des ersten Viewports sollten auf diese Weise mithilfe des Attributs loading="lazy" geladen werden. Dies ist die geeignete Lösung für die meisten Situationen.

Neben dem LCP-Element empfehlen wir, Bilder zu bevorzugen, die wichtige Elemente der Benutzeroberfläche darstellen oder dem Benutzer helfen, die Marke zu erkennen und die Website eindeutig zu identifizieren. Das Attribut loading="eager", das hierfür verwendet wird, setzen wir auf das LCP-Element, Symbole in der Kopfzeile (insbesondere in der mobilen Kopfzeile) und das Markenlogo.

Radikaler Ansatz: Alle Bilder außerhalb des LCP-Elements#

Wenn Sie zu den erfahreneren Entwicklern gehören, können Sie es sich leisten, Lazy Loading auf alle Bilder außer dem größten Bild im ersten Viewport (dem sogenannten LCP-Element) anzuwenden.

Dies erreichen wir durch eine Ausnahme für das LCP-Element, wo wir loading="eager" setzen oder den Parameter überhaupt nicht angeben.

Alle anderen Bilder auf der Seite haben dann loading="lazy". Wir weisen lieber darauf hin, dass diese Lösung riskant ist, da sie möglicherweise fehleranfällig ist, falls sich z.B. der HTML-Code oder das Webdesign ändern.

Achtung, niemals das LCP-Element verzögert laden!#

Verwenden Sie niemals das Attribut loading="lazy" auf dem LCP-Element, da dies die LCP-Metrik verschlechtert. Mit dem Attribut loading="lazy" erhält das Element eine niedrigere Priorität und der Download wird verzögert.

Die schlechteste Kombination ist die Verwendung von JavaScript-Lazy Loading und dessen Anwendung auf das LCP-Element, was automatisch von einigen JavaScript-Bibliotheken durchgeführt wird. Zunächst muss auf das Herunterladen und Verarbeiten von JavaScript gewartet werden, und erst danach lädt der Browser die Bildquelle herunter.

JavaScript-Lazy Loading#

Für fortgeschrittenere Implementierungen können Sie JavaScript und das Intersection Observer API verwenden.

Das Intersection Observer API ist ein JavaScript-API, das es ermöglicht, Elemente beim Nähern an den Viewport zu überwachen. Dies kann z.B. für eigene Implementierungen des Lazy Loading genutzt werden.

Dies ist jedoch eine sehr fortgeschrittene Methode und wir empfehlen sie definitiv nicht für normale Optimierungen.

Vorteile:

• Flexibilität.
• Möglichkeit, komplexere Ladebedingungen zu definieren.
• Diese Art von Lazy Loading kann in JavaScript-Komponenten wie Karussellen und ähnlichem verwendet werden.

Nachteile:

• Höhere Komplexität.
• Warten auf das Herunterladen und Initialisieren des JavaScript-Codes.
• Bedarf an einer alternativen Lösung mit <noscript> für Browser ohne aktiviertes JavaScript.
• Unmöglichkeit der vollständigen Nutzung des Preload-Scanners des Browsers.
• Bei falscher Implementierung besteht die Gefahr, dass Bilder für Suchmaschinen-Bots nicht sichtbar sind.

Erweiterte Content-Management-Systeme wie WordPress oder Drupal bieten oft Plugins an, die Lazy Loading mit JavaScript implementieren. Wenn Sie ein solches Plugin verwenden, empfehlen wir, es zu deaktivieren und stattdessen das native Lazy Loading mit dem Attribut loading="lazy" zu verwenden.

Mehr über die Optimierung von WordPress erfahren Sie im Artikel WordPress-Optimierung.

Was empfehlen wir Ihnen?#

• Verwenden Sie nativen Lazy Loading, das weit unterstützt wird.
• Verwenden Sie JavaScript-Lazy Loading nur für komplexere Fälle, die nicht durch das native Attribut abgedeckt werden können.

Beziehung zwischen dem Lade-Attribut und der Erhöhung der Ladepriorität durch fetchpriority#

Der Wert eager ist eine Anweisung zum sofortigen Laden des Bildes, ohne das Laden zu verzögern, wenn sich das Bild außerhalb des Bildschirms befindet. Das Bild wird genauso schnell geladen wie ein Bild ohne das loading-Attribut.

Wenn Sie die Ladepriorität eines wichtigen Bildes (z.B. eines LCP-Bildes) erhöhen möchten, verwenden Sie Priority Hints und das Attribut fetchpriority="high".

Ein Bild mit den Attributen loading="lazy" und fetchpriority="high" wird nicht geladen, solange es sich außerhalb des Bildschirms befindet. Befindet es sich jedoch im oder nahe dem Viewport, wird es mit hoher Priorität geladen. Diese Kombination ist nicht erforderlich, da der Browser dieses Bild wahrscheinlich ohnehin mit hoher Priorität laden würde.

Entfernung vom Viewport: Schwellenwerte für das Laden von Bildern#

Alle Bilder, die sofort im Viewport sichtbar sind, ohne dass die Seite gescrollt werden muss, werden sofort geladen. Bilder, die sich weit unter dem Viewport des Geräts befinden, werden erst geladen, wenn sich der Benutzer ihnen nähert.

Die Implementation von Lazy Loading im Chrome-Browser versucht sicherzustellen, dass Bilder außerhalb des Bildschirms rechtzeitig geladen werden, um das Laden abzuschließen, wenn der Benutzer sie erreicht, indem sie viel früher geladen werden, als sie im Viewport sichtbar werden.

Wie ist das im Chrome-Browser eingestellt? Bei schnellen Verbindungen (4G und höher) hat Chrome Schwellenwerte von 1250 px Entfernung vom Anzeigebereich und bei langsameren Verbindungen (3G oder niedriger) einen Schwellenwert von 2500 px.

Die endgültige Entscheidung, wann das Bild heruntergeladen wird, liegt allein beim Browser, und die hier angegebenen Werte sind nur Richtwerte.

Wie analysiert man, ob Lazy Loading korrekt implementiert ist?#

Bei der Implementierung von Lazy Loading ist es wichtig herauszufinden, welche Elemente für Lazy Loading geeignet sind. Ebenso ist es gut zu wissen, wie man überprüft, ob Lazy Loading korrekt implementiert wurde.

Analyse von Lazy Loading in der Zeitleiste des Browsers#

Lazy Loading kann z.B. mit den Chrome Developer Tools im Bereich Performance analysiert werden. Das Laden von Bildern ist hier als separate Anfragen im Zeitverlauf beim Scrollen des Benutzers sichtbar.

Beim ersten Laden der Seite werden nur die Bilder heruntergeladen, die im ersten Viewport sichtbar oder sehr nah an ihm sind.

Weitere Bilder mit dem Parameter loading="lazy" werden erst bei Benutzerinteraktion geladen. Zum Beispiel beim Scrollen durch die Seite.

Bilder mit dem Parameter loading="lazy" werden erst bei Benutzerinteraktion geladen

Analyse im Lighthouse-Tool oder Monitoring PLUS von PageSpeed.ONE#

Im Lighthouse-Tool oder Monitoring PLUS können Bilder identifiziert werden, die für Lazy Loading geeignet sind, im „Detail des Testlaufs“. Die Bilder werden im Warnhinweis „Laden von Bildern außerhalb des Bildschirms verzögern“ im synthetischen Test von Lighthouse aufgelistet.

1. Wählen Sie im Hauptmenü die Registerkarte „Möglichkeiten“. Monitoring PLUS, Lighthouse-Test

2. Wählen Sie den Test für eine bestimmte URL aus. Monitoring PLUS, Lighthouse-Test

3. Suchen Sie den Eintrag „Laden von Bildern außerhalb des Bildschirms verzögern“. Hier sind die Bilder aufgelistet, auf die Lazy Loading angewendet werden sollte. Hier sind die Bilder aufgelistet, auf die Lazy Loading angewendet werden sollte.

Die Ratschläge, die Sie in diesem Abschnitt erhalten, sind qualitativ und entsprechen in etwa dem, was wir oben über den konservativen Ansatz des Lazy Loadings schreiben.

Lazy Loading kann auch auf andere Elemente der Website als nur auf Bilder angewendet werden.

Lazy Loading für iframes#

Lazy Loading kann auch auf iframes angewendet werden, was die Metriken der Core Web Vitals erheblich verbessern kann, beispielsweise auf Seiten mit eingebetteten Videos oder Karten. Die Anwendung ist sehr ähnlich wie bei Bildern:

<iframe src="https://example.com" loading="lazy"></iframe>

Unterstützung von Lazy Loading in Browsern#

Alle modernen Browser unterstützen das Attribut loading. Wir empfehlen immer die Verwendung von nativem Lazy Loading gegenüber einer JavaScript-Lösung.

Beispiele aus unserer Praxis bei der Geschwindigkeitsoptimierung#

Einsatz von Lazy Loading bei Bildern#

Bei diesem Kunden führte der Einsatz von Lazy Loading für Bilder im Hauptmenü und Footer zu einer sprunghaften Reduzierung des Datenvolumens der Bilder.

Monitoring PLUS - Reduzierung des Datenvolumens der Bilder.

Zahlen im Bild:

1. Reduzierung des Datenvolumens der Bilder durch den Einsatz von Lazy Loading.

Das Ergebnis war auch eine Verbesserung der LCP-Metrik.

Ersetzung von JavaScript-Lazy Loading durch native Lösung#

Die Ersetzung von JavaScript-Lazy Loading durch natives Lazy Loading und die Erhöhung der Priorität mit dem Attribut fetchpriority="high" führt dazu, dass das LCP-Bild sehr früh heruntergeladen wird und sich die LCP-Metrik erheblich verbessert. In diesem Fall verbesserte sich die LCP-Metrik bei einer langsamen Verbindung (Fast 3G) um etwa 2 Sekunden.

Ursprünglicher Zustand

Erläuterungen zum Bild:

1. Beginn des Herunterladens des LCP-Bildes erst nach der Verarbeitung von JavaScript app.js.
2. Darstellung des LCP-Bildes auf der Seite.

Zustand nach der Optimierung

Erläuterungen zum Bild:

1. Beginn des Herunterladens des LCP-Bildes erfolgt sofort nach dem Herunterladen des HTML-Dokuments.
2. Darstellung des LCP-Bildes auf der Seite.

Zusammenfassung#

Das verzögerte Laden von Bildern empfehlen wir als eine der grundlegenden und gleichzeitig sehr effektiven Methoden zur Optimierung der Seitenladegeschwindigkeit. Wir empfehlen Ihnen, das Laden aller Bilder außerhalb des ersten Viewports konservativ zu verzögern. Achten Sie darauf, das verzögerte Laden nicht auf Bilder anzuwenden, die das LCP-Element sind, da dies die Geschwindigkeit verschlechtern kann.