Lazy Loading: Bilder und Inhalte bedarfsgerecht laden

Lazy Loading lädt Bilder und Inhalte erst, wenn sie in den sichtbaren Bereich kommen. Richtig eingesetzt senkt es die übertragene Datenmenge und beschleunigt den Aufbau; falsch eingesetzt erzeugt es springende Layouts und verschiebt genau die Inhalte, an denen die Ladebewertung hängt.

Die Idee ist einfach: Was niemand sieht, muss auch nicht geladen werden. In der Umsetzung entscheidet die Abgrenzung — verzögert man das Falsche, wird die Seite langsamer wahrgenommen, obwohl weniger Daten geladen wurden.

##Welche Regel gilt für Bilder?

Bilder unterhalb des ersten Bildschirms bekommen loading="lazy", Bilder darüber nicht. Das größte Bild im sichtbaren Bereich ist in der Regel das LCP-Element und sollte im Gegenteil bevorzugt geladen werden — mit fetchpriority="high" und ohne Verzögerung. Wer pauschal alle Bilder auf lazy setzt, verschlechtert genau den Wert, den er verbessern wollte.

• ›Breite und Höhe immer angeben, sonst springt das Layout beim Nachladen (CLS).
• ›Das Kopfbild niemals verzögern; es entscheidet über den LCP-Wert.
• ›Iframes ebenfalls mit loading="lazy" versehen — eingebettete Karten und Videos sind die schwersten Elemente einer Seite.
• ›Keine JavaScript-Bibliothek für etwas, das der Browser nativ kann.

##Warum nicht nur Bilder verzögern?

Der größere Hebel liegt oft bei ganzen Bereichen: Bewertungen, Empfehlungen, Kommentare, Kartenausschnitte, Chat-Widgets. Sie werden erst geladen, wenn der Bereich in Sichtweite kommt oder eine Interaktion stattfindet. Der Platz dafür wird vorher reserviert, damit nichts springt — ein Platzhalter mit fester Höhe ist kein Detail, sondern die Bedingung dafür, dass die Technik nicht schadet.

Bei Drittanbieter-Einbettungen kommt ein zweiter Grund hinzu: Eine Karte oder ein Video lädt fremde Skripte und setzt womöglich Cookies. Sie erst nach einer Einwilligung und nach einer bewussten Interaktion zu laden, löst gleichzeitig ein Performance- und ein Datenschutzproblem.

##Wo schadet Lazy Loading?

Inhalte, die zur Kernaussage der Seite gehören, dürfen nicht von JavaScript abhängen: Wenn Text erst nach einem Sichtbarkeitsereignis erscheint, kann er im ungünstigen Fall nicht indexiert werden und ist für Nutzerinnen mit blockierten Skripten unsichtbar. Die Regel dagegen ist einfach — Struktur und Text kommen aus dem HTML, verzögert wird nur Beiwerk.

Ebenso ungünstig ist Verzögerung bei sehr kurzen Seiten: Wo alles ohnehin im ersten Bildschirm liegt, entsteht kein Gewinn, aber zusätzliche Komplexität und ein weiteres Skript, das gepflegt werden muss.

##Was bringt Lazy Loading messbar?

Der Gewinn zeigt sich in drei Werten: übertragene Datenmenge beim ersten Aufruf, LCP auf dem Telefon und die Zahl der Anfragen vor der ersten Darstellung. In typischen Projekten halbiert konsequentes Verzögern die anfängliche Datenmenge, ohne dass Besucherinnen etwas vermissen — vorausgesetzt, das Kopfbild bleibt ausgenommen.

Was sich nicht verbessert, ist die Zeit bis zum ersten Byte: Die entsteht auf dem Server und ist von der Ladestrategie im Browser unabhängig. Wer dort ein Problem hat, löst es mit Caching und serverseitiger Auslieferung, nicht mit lazy.

##Wie setzen Sie es im Bestand um?

In den meisten Content-Management-Systemen ist natives Lazy Loading für Inhaltsbilder inzwischen Standard — die Arbeit besteht darin, die Ausnahmen zu setzen: Kopfbild, Logo und alles, was im ersten Bildschirm liegt. Danach folgen die schweren Einbettungen. Für einen mittelgroßen Auftritt sind das ein bis zwei Stunden, und es ist eine der wenigen Optimierungen, die man einmal macht und danach nicht mehr pflegen muss.