Lazy Loading
Was ist Lazy Loading?
Lazy Loading bezeichnet das verzögerte Laden von Bildern, Videos, iFrames oder anderen Ressourcen, bis sie sich dem sichtbaren Bereich des Browsers nähern. Die Technik reduziert die anfänglich übertragene Datenmenge und kann dadurch den PageSpeed verbessern. Sichtbare Seitenelemente sollten dagegen ohne Verzögerung geladen werden.
Lazy Loading bedeutet auf Deutsch verzögertes Laden. Der Browser ruft eine Ressource erst ab, wenn sie voraussichtlich benötigt wird. Befindet sich ein Bild weit unterhalb des sichtbaren Bereichs, muss es deshalb nicht bereits beim ersten Seitenaufruf vollständig übertragen werden.
Wie funktioniert Lazy Loading?
Beim Aufruf einer Website lädt der Browser normalerweise alle im HTML referenzierten Ressourcen. Lazy Loading verändert diesen Ablauf für ausgewählte Elemente. Der Browser beobachtet deren Position und startet den Abruf, sobald sich ein Element dem sichtbaren Bereich nähert. Der Abstand vor dem eigentlichen Sichtkontakt hängt vom Browser, der Verbindung und der Implementierung ab.
Für Bilder und iFrames unterstützt modernes HTML das Attribut loading="lazy". Eine einfache Implementierung sieht beispielsweise so aus:
<img src="produktbild.webp" loading="lazy" width="800" height="600" alt="Produktansicht"> verzögert laden. Für ein iFrame funktioniert das Prinzip entsprechend mit <iframe loading="lazy">. Die Attribute width und height reservieren den benötigten Platz und stabilisieren das Layout. Komplexere Anwendungen können Lazy Loading per JavaScript steuern. Dafür wird häufig die Intersection Observer API eingesetzt. Sie erkennt, wann ein Element in einen definierten Beobachtungsbereich gelangt. Diese Variante ermöglicht individuelle Schwellenwerte und Animationen, benötigt aber eine funktionierende Skript-Ausführung und eine saubere Ersatzlösung für Browser oder Crawler ohne JavaScript.
Lazy Loading verbessert den PageSpeed
Der PageSpeed profitiert vor allem auf langen, medienreichen Seiten. Wenn eine Produktkategorie 40 Bilder enthält, aber beim Einstieg nur die ersten Produktkarten sichtbar sind, müssen die übrigen Dateien nicht Teil des initialen Ladevorgangs sein. Das reduziert die anfängliche Datenübertragung und die Zahl der früh ausgeführten Netzwerkanfragen. Lazy Loading wird deshalb auch bei der Optimierung großer Bilder empfohlen.
Lazy Loading verkleinert allerdings keine Dateien. Ein Bild mit hoher Dateigröße bleibt auch beim verzögerten Abruf groß. Für eine belastbare Ladezeitoptimierung müssen deshalb mehrere Maßnahmen zusammenspielen:
Messbar ist das zum Beispiel so: Vergleiche die mobile und die Desktop-Version vor und nach der Implementierung. Prüfe dabei den PageSpeed-Score, die übertragene Datenmenge, die Zahl der initialen Anfragen und die Core Web Vitals. Ein einzelner Test reicht nicht, weil Serverauslastung, Netzwerk und Drittanbieter-Skripte das Ergebnis beeinflussen können.
Prüfe den aktuellen Stand deiner Domain mit dem kostenlosen Ladezeiten-Check:
Lazy Loading und Core Web Vitals
Ein verbreiteter Fehler besteht darin, jedes Bild pauschal verzögert zu laden. Befindet sich das größte sichtbare Bild direkt im oberen Seitenbereich, kann Lazy Loading dessen Abruf nach hinten verschieben. Ist dieses Bild das Largest Contentful Paint Element, verlängert die Verzögerung den LCP. Bilder im sofort sichtbaren Bereich sollten daher regulär oder mit erhöhter Priorität geladen werden.
Der Cumulative Layout Shift reagiert auf nachträgliche Verschiebungen des Seitenlayouts. Lazy Loading kann solche Verschiebungen begünstigen, wenn für ein Bild vor dem Laden kein Platz reserviert ist. Mit den Attributen width und height oder einem festgelegten Seitenverhältnis kennt der Browser die benötigte Fläche bereits vor dem Abruf.
Die Interaction to Next Paint kann indirekt betroffen sein, wenn eine JavaScript-Lösung beim Scrollen viele Elemente gleichzeitig verarbeitet. Native Browser-Funktionen verursachen in der Regel weniger Skriptaufwand. Setzt du eine eigene Implementierung ein, sollte sie keine dauerhaften Scroll-Ereignisse mit umfangreichen Berechnungen ausführen.
Welche Inhalte eignen sich?
Lazy Loading eignet sich für Ressourcen, die beim ersten Seitenaufruf außerhalb des sichtbaren Bereichs liegen und nicht unmittelbar für Orientierung oder Interaktion benötigt werden. Typische Einsatzbereiche sind lange Produktlisten, Bildergalerien, eingebettete Karten, Videos, Social-Media-Inhalte und externe iFrames.
| Element | Lazy Loading sinnvoll? | Begründung |
|---|---|---|
| Hero-Bild | Meist nein | Das Bild ist sofort sichtbar und kann das LCP-Element sein. |
| Produktbilder weiter unten | Ja | Die Dateien werden erst beim Scrollen benötigt. |
| Logo im Seitenkopf | Nein | Das Logo gehört zum unmittelbar sichtbaren Seitenaufbau. |
| Video am Seitenende | Ja | Vorschaubild und Player können später geladen werden. |
| Cookie- oder Consent-Dialog | Nein | Die Funktion muss beim Einstieg verfügbar sein. |
Unterschied zu Preloading und Eager Loading
Der Unterschied zwischen Lazy Loading und Eager Loading liegt im Zeitpunkt des Abrufs. Eager Loading lädt eine Ressource frühzeitig, weil sie für den sichtbaren Seitenbereich benötigt wird. Lazy Loading verschiebt den Abruf, bis sich die Ressource dem sichtbaren Bereich nähert. Das HTML-Attribut loading="eager" kann eine frühe Verarbeitung ausdrücklich kennzeichnen.
Preloading verfolgt ein anderes Ziel. Mit <link rel="preload"> weist die Website den Browser darauf hin, eine besonders relevante Ressource früh abzurufen. Preloading eignet sich beispielsweise für ein zentrales Hero-Bild oder eine Schriftdatei, die für die erste Darstellung benötigt wird. Zu viele Preloads konkurrieren jedoch um Bandbreite und können den Ladevorgang anderer wichtiger Dateien verzögern.
Lazy Loading und SEO
Lazy Loading unterstützt technische SEO, wenn relevante Inhalte für Suchmaschinen erreichbar bleiben. Bilder benötigen weiterhin eine echte Bildquelle, einen aussagekräftigen Alt-Text und einen stabilen Platz im Layout. Eine reine JavaScript-Lösung ohne zugänglichen Ausgangszustand kann dazu führen, dass Crawler Ressourcen oder Inhalte unvollständig erfassen.
Für GEO, also Generative Engine Optimization, zählt ebenfalls die technisch zuverlässige Bereitstellung von Inhalten. KI-Crawler müssen zentrale Texte und Informationen abrufen können, ohne erst eine Nutzerinteraktion auszuführen. Lazy Loading sollte deshalb primär Medien und ergänzende Seitenelemente betreffen, während definitionsrelevante Texte direkt im HTML verfügbar bleiben.
Eine technische Prüfung sollte außerdem Bildgrößen, responsive Varianten, HTTP-Statuscodes und JavaScript-Fehler einbeziehen. Der Ratgeber zum Management technischer SEO zeigt, wie solche Prüfungen in einen regelmäßigen Prozess eingebunden werden. Weitere Maßnahmen findest du in den wichtigsten Tipps zur technischen SEO.
Häufige Fehler beim verzögerten Laden
Die größten Fehler entstehen durch eine pauschale Aktivierung ohne Prüfung des sichtbaren Bereichs. Welche Bilder beim Einstieg sichtbar sind, unterscheidet sich zwischen Smartphone, Tablet und Desktop. Ein Element kann mobil unterhalb des sichtbaren Bereichs liegen, während es auf einem großen Bildschirm sofort erscheint.
Prüfe Lazy Loading nach jeder Änderung an Templates, Themes oder Plugins erneut. Besonders bei einem Website-Relaunch können neue Bildkomponenten oder Seitentypen die bisherige Konfiguration verändern.
Häufige Fragen zu Lazy Loading
Sollte jedes Bild mit Lazy Loading geladen werden?
Nein. Bilder im sofort sichtbaren Bereich sollten früh geladen werden. Lazy Loading eignet sich vor allem für Bilder und Medien, die erst nach dem Scrollen benötigt werden.
Kann Lazy Loading den PageSpeed verschlechtern?
Ja. Wird das größte sichtbare Bild verzögert geladen, kann sich der Largest Contentful Paint verschlechtern. Die Konfiguration muss deshalb den sichtbaren Seitenbereich berücksichtigen.
Funktioniert Lazy Loading ohne JavaScript?
Ja. Moderne Browser unterstützen natives Lazy Loading für Bilder und iFrames über das loading-Attribut. Individuelle Steuerungen und ältere Implementierungen können zusätzlich JavaScript verwenden.
Ist Lazy Loading für Videos sinnvoll?
Ja. Video-Player und externe Einbettungen übertragen häufig mehrere Ressourcen. Ein Vorschaubild kann zunächst den Platz belegen, während der eigentliche Player erst beim Scrollen oder nach einem Klick geladen wird.
Kann Google Lazy-Loading-Bilder indexieren?
Google kann verzögert geladene Bilder erfassen, wenn die Bildquelle technisch zugänglich ist. Eine Implementierung, die zwingend Scrollen oder Klicken erfordert, erhöht das Risiko einer unvollständigen Erfassung.
Wie prüfe ich, ob Lazy Loading funktioniert?
Öffne die Netzwerkansicht der Browser-Entwicklerwerkzeuge und lade die Seite neu. Bilder außerhalb des sichtbaren Bereichs sollten zunächst nicht abgerufen werden und beim Scrollen als neue Netzwerkanfragen erscheinen.
Wenn du Ladezeiten, Core Web Vitals und technische Fehler deiner Website strukturiert prüfen lassen möchtest, kannst du einen kostenlosen und unverbindlichen Potenzialcheck anfragen.
Sie haben noch Fragen?
