Lazy Loading
Lazy Loading ist eine etablierte Browser-Technik, bei der Bilder, Videos und eingebettete Inhalte erst dann geladen werden, wenn sie beim Scrollen in den sichtbaren Bereich gelangen.
Lazy Loading ist ein zentraler Hebel für Core Web Vitals, insbesondere für den Largest Contentful Paint (LCP) und das initial übertragene Datenvolumen. Moderne Browser unterstützen es nativ über ein einzelnes HTML-Attribut.
In einfachen Worten
Statt beim Seitenaufruf sämtliche Bilder und eingebetteten Inhalte einer Seite gleichzeitig zu laden, holt der Browser sie bedarfsgerecht erst dann, wenn der Besucher sich ihnen beim Scrollen nähert. Initial wird nur das geladen, was im sichtbaren Bereich liegt; alles darunter folgt dynamisch. Moderne Browser unterstützen dieses Verhalten nativ über das Attribut loading="lazy" auf Bild- und Video-Elementen – ohne zusätzliche JavaScript-Bibliothek, ohne externe Abhängigkeit. Für komplexere Fälle (etwa Hintergrundbilder oder eingebettete Drittinhalte) lässt sich dasselbe Verhalten über die Intersection-Observer-Schnittstelle umsetzen.
Wozu brauche ich das?
Schnellerer initialer Seitenaufbau und geringerer Datenverbrauch für Besucher und Server. Der Effekt ist besonders deutlich auf bildlastigen Seiten – Produktlisten, Galerien, Blog-Übersichten, längere Magazin-Artikel – und im mobilen Bereich, wo Bandbreite und Endgeräte-Ressourcen begrenzt sind. Bei korrekter Anwendung verbessert Lazy Loading gleichzeitig den Wert Largest Contentful Paint, weil der Browser seine Ressourcen für das tatsächlich sichtbare Element priorisiert.
Beispiel aus der Praxis
Eine typische Ausgangslage: Ein redaktioneller Reise-Blog mit aufwändig bebilderten Reportagen lädt bei jedem Artikel mehrere Dutzend Bilder gleichzeitig – mehrere Megabyte schon beim Aufruf. Der LCP liegt entsprechend hoch. Mit loading="lazy" für alle Bilder unterhalb des sichtbaren Bereichs und einer parallelen Bildoptimierung auf moderne Bildformate (WebP, AVIF) lädt die Seite initial nur einen Bruchteil der ursprünglichen Datenmenge. Der LCP fällt deutlich, die Besucher gelangen schneller zum Inhalt und springen seltener ab – die Verweildauer pro Artikel steigt sichtbar. Wichtig: Das Hero-Bild ganz oben darf nicht lazy geladen werden, sonst verschiebt sich der LCP-Wert in die falsche Richtung.
Wirtschaftlicher Nutzen
Lazy Loading gehört zu den kostengünstigsten Performance-Maßnahmen überhaupt – eine native Implementierung über das loading-Attribut ist meist eine überschaubare Template-Anpassung. Der wirtschaftliche Nutzen entsteht über drei Kanäle: spürbar geringeres Übertragungsvolumen pro Seitenaufruf, bessere Werte in den Core Web Vitals mit positivem Effekt auf die Sichtbarkeit, und eine höhere Verweildauer durch schnelleren Erstaufbau. Für Anbieter, die nach Traffic-Volumen abgerechnet werden, sind die Hosting-Einsparungen unmittelbar wirtschaftlich messbar.
Typische Fehler
- Lazy Loading auf das Hero-Bild angewendet – damit verschiebt sich der LCP-Wert in die falsche Richtung, weil der Browser das wichtigste Element bewusst verzögert lädt.
- Höhen- und Breiten-Attribute der Bilder weggelassen – das Layout springt beim Nachladen, der Cumulative Layout Shift verschlechtert sich.
- SEO-relevante Inhalte (Texte, strukturierte Daten) hinter eine eigene Lazy-Loading-Logik gelegt, die Suchmaschinen-Crawler nicht auflösen.
- Eine JavaScript-Bibliothek für Lazy Loading eingebunden, obwohl die native Browser-Unterstützung ausreichend wäre – verursacht zusätzlichen Wartungs-Aufwand ohne Mehrwert.
- Bei Bildern im Hintergrund (CSS background-image) auf das HTML-Attribut gesetzt, das nur auf img- und iframe-Elementen wirkt.
Worauf achten?
- Das Bild im sichtbaren Bereich (über der Falz) nicht lazy laden – stattdessen explizit mit fetchpriority="high" priorisieren.
- Native Browser-Unterstützung per loading="lazy" verwenden; eine eigene JavaScript-Lösung ist nur für Sonderfälle nötig.
- Höhen- und Breiten-Attribute auf jedem lazy geladenen Bild setzen, damit der Browser den Platzbedarf vor dem Laden kennt.
- SEO-relevante Inhalte serverseitig ausliefern, nicht nachträglich per Skript einblenden, damit Crawler sie zuverlässig erfassen.
- Für Hintergrundbilder und eingebettete Drittinhalte die Intersection-Observer-Schnittstelle einsetzen, da loading="lazy" hier nicht greift.
Häufig gestellte Fragen
Wie aktiviert man Lazy Loading?
In den meisten Fällen genügt das HTML-Attribut loading="lazy" auf img- oder iframe-Elementen. Moderne Browser werten es nativ aus und laden die Inhalte erst beim Heranscrollen. Für Hintergrundbilder oder eingebettete Drittinhalte ist die Intersection-Observer-Schnittstelle der Standard-Weg.
Warum gehört das Hero-Bild nicht ins Lazy Loading?
Das Hero-Bild ist in der Regel das LCP-Element der Seite. Wird es lazy geladen, verzögert der Browser bewusst den wichtigsten Inhalt – der LCP-Wert verschlechtert sich messbar. Stattdessen sollte das Hero-Bild mit fetchpriority="high" und einem Preload-Hinweis priorisiert werden.
Wirkt sich Lazy Loading auf den LCP-Wert aus?
Indirekt ja. Lazy Loading reduziert die Konkurrenz um Browser-Ressourcen, weil unsichtbare Bilder nicht parallel geladen werden. Dadurch kann der Browser das LCP-Element schneller fertigstellen. Voraussetzung: Das LCP-Element selbst bleibt eager geladen.
Brauche ich eine JavaScript-Bibliothek für Lazy Loading?
In der Regel nicht. Die native Browser-Unterstützung über loading="lazy" deckt alle gängigen Anwendungsfälle für img- und iframe-Elemente ab. Eine JavaScript-Bibliothek ist nur dann sinnvoll, wenn Hintergrundbilder, Drittinhalte oder ältere Browser-Versionen unterstützt werden müssen.
Wie verhindert man Layout-Sprünge beim Nachladen?
Jedes lazy geladene Bild benötigt explizite Höhen- und Breiten-Angaben über die HTML-Attribute width und height oder eine entsprechende CSS-Reservierung. Der Browser kann dann den Platzbedarf vor dem Laden korrekt einplanen, und der Cumulative Layout Shift bleibt stabil.