Lazy Loading: was es bringt und wann es schadet

Kurz gesagt: Lazy Loading heißt, dass Bilder und eingebettete Inhalte erst geladen werden, wenn Besucher in ihre Nähe scrollen. Mit dem Attribut loading="lazy" erledigen moderne Browser das ohne zusätzliche Skripte. Es spart Daten und entlastet den Seitenaufbau – schadet aber, wenn es auf Bilder angewendet wird, die schon beim Öffnen der Seite sichtbar sind. Die Faustregel: alles im ersten Bildschirm normal laden, alles weiter unten verzögert.

Lazy Loading ist eine der wenigen Performance-Maßnahmen, die sich mit einem einzigen Attribut umsetzen lassen. Gerade deshalb wird sie oft pauschal eingeschaltet – und richtet dann an genau den falschen Stellen Schaden an. Die folgenden Fehlerbilder zeigen, wo es typischerweise hakt, danach folgt die richtige Einstellung.

Warum sich das Thema überhaupt lohnt: web.dev verweist auf Daten des HTTP Archive, nach denen Bilder bei den meisten Websites die am häufigsten angeforderte Ressource sind und meist mehr Datenvolumen verbrauchen als alles andere. Jedes Bild, das ein Besucher nie zu sehen bekommt, aber trotzdem herunterlädt, kostet ihn Ladezeit und mobiles Datenvolumen – und konkurriert beim Seitenaufbau mit den Inhalten, die wirklich zählen.

Fehlerbild 1: Das Titelbild erscheint spürbar später

Symptom: Text und Navigation sind da, das große Bild oben baut sich mit Verzögerung auf.

Ursache: Das Bild hat loading="lazy". Der Browser wartet dann, bis er das Layout kennt und weiß, dass das Bild im Sichtbereich liegt, statt es sofort anzufordern. web.dev warnt ausdrücklich davor, Bilder verzögert zu laden, die beim Öffnen der Seite wahrscheinlich sichtbar sind – besonders das größte Bild im sichtbaren Bereich.

Lösung: Bilder im ersten Bildschirm ohne loading-Attribut oder mit loading="eager" einbinden. Wer das wichtigste Bild zusätzlich bevorzugt laden möchte, nutzt laut web.dev fetchpriority="high" – eager allein lädt ein Bild nicht schneller, es verhindert nur die Verzögerung.

Fehlerbild 2: Beim Scrollen springt die Seite

Symptom: Während Sie nach unten scrollen, verrutscht der Text, weil Bilder nachladen.

Ursache: Der Browser kennt die Bildmaße erst, wenn die Datei da ist. Bei verzögert geladenen Bildern passiert das genau dann, wenn jemand liest.

Lösung: web.dev empfiehlt, allen <img>-Elementen width- und height-Attribute zu geben (oder die Maße per Stil festzulegen), damit der Browser den Platz vorab reserviert.

Fehlerbild 3: Bilder tauchen erst auf, wenn sie schon im Bild sind

Symptom: Beim schnellen Scrollen sehen Besucher leere Flächen.

Ursache: Häufig steckt eine ältere JavaScript-Lösung dahinter, die erst sehr knapp vor dem sichtbaren Bereich lädt, oder ein Skript, das zu spät startet.

Lösung: Auf das browsereigene loading="lazy" umsteigen. Laut web.dev hat Chrome die Abstände, ab denen verzögerte Bilder geladen werden, angepasst: auf schnellen Verbindungen von 3000 auf 1250 Pixel vor dem sichtbaren Bereich, auf langsamen Verbindungen von 4000 auf 2500 Pixel. Diese Werte sind im Browser fest hinterlegt und lassen sich nicht ändern, können sich aber laut web.dev künftig wieder verschieben.

Fehlerbild 4: Lazy Loading wirkt bei Hintergrundbildern nicht

Symptom: Trotz Einstellung lädt das große Hintergrundbild sofort.

Ursache: Das Attribut funktioniert laut web.dev nur bei <img>-Elementen, nicht bei CSS-Hintergrundbildern.

Lösung: Wichtige Bilder als <img> einbinden oder für Hintergründe eine eigene Lösung wählen.

Fehlerbild 5: Versteckte Bilder werden trotzdem geladen – oder gar nicht

Symptom: In einem Slider oder in einem nur am Desktop sichtbaren Bereich verhält sich das Laden unerwartet.

Ursache: Laut web.dev laden Chrome, Safari und Firefox keine Bilder, die per display: none versteckt sind, auch wenn das ein übergeordnetes Element betrifft. Andere Techniken wie opacity: 0 verhindern das Laden dagegen nicht. Für horizontal scrollende Karussells hat Chrome sein Verhalten mit Version 121 angepasst.

Lösung: Slider und responsive Bereiche gezielt auf verschiedenen Geräten testen.

Fehlerbild 6: Eingebettete Karten und Videos bremsen die ganze Seite

Symptom: Eine Seite mit Google-Maps-Karte oder YouTube-Video im unteren Bereich lädt träge.

Ursache: Iframes laden standardmäßig sofort, samt aller Skripte des fremden Anbieters.

Lösung: loading="lazy" funktioniert laut web.dev auch für <iframe> und ist dort standardisiert. MDN nennt das Attribut zusätzlich für <video> und <audio>; prüfen Sie bei diesen Elementen aber die aktuelle Browserunterstützung, bevor Sie sich darauf verlassen.

Die richtige Einstellung

So sieht ein sinnvoller Standard aus:

Erster Bildschirm: Logo, Titelbild und alle Bilder, die ohne Scrollen sichtbar sind, normal laden. Das wichtigste Bild darf fetchpriority="high" bekommen.
Alles darunter: loading="lazy" für Bilder, Iframes, Karten und Videos.
Immer: width und height angeben.
Bei <picture>: Das Attribut gehört laut web.dev nur an das abschließende <img>-Element, nicht an die <source>-Einträge.
Testen: Seite auf dem Handy und mit gedrosselter Verbindung in den Entwicklertools prüfen.

Ein Hinweis für Druckansichten: Laut web.dev werden beim Drucken alle Bilder und Iframes sofort geladen, auch verzögerte.

Und WordPress?

WordPress setzt loading="lazy" seit Längerem automatisch. Laut der Entwicklernotiz zu WordPress 6.3 wurde die Erkennung von Bildern im sichtbaren Bereich verbessert, sodass das Attribut dort zuverlässiger weggelassen wird. Zusätzlich vergibt WordPress automatisch fetchpriority="high" an das Bild, das am wahrscheinlichsten das größte im sichtbaren Bereich ist – allerdings nur ab einer Mindestgröße von 50.000 Pixeln Fläche (Breite mal Höhe). Themes, Page Builder und Plugins können dieses Verhalten überschreiben; ein Blick in den Quelltext Ihrer Startseite zeigt, was tatsächlich ausgeliefert wird.

Häufige Fragen

Brauche ich noch ein Lazy-Loading-Plugin?

In vielen Fällen nicht, weil Browser und WordPress das selbst erledigen. Prüfen Sie, ob ein Plugin doppelt arbeitet oder das Titelbild verzögert.

Funktioniert Lazy Loading ohne JavaScript?

Ja. Laut web.dev werden Bilder auch bei deaktiviertem JavaScript geladen; das Verzögern selbst greift allerdings nur, wenn JavaScript aktiviert ist.

Erkennt Google verzögert geladene Bilder?

Browsereigenes Lazy Loading mit loading="lazy" und echten <img>-Elementen ist die übliche, empfohlene Variante. Problematisch sind eher Skripte, die Bildadressen erst nach einer Interaktion einsetzen.

Lohnt sich Lazy Loading bei kurzen Seiten?

Wenig. Wenn fast alle Bilder im ersten Bildschirm liegen, gibt es kaum etwas zu verzögern.

Falls Sie den Verdacht haben, dass Lazy Loading auf Ihrer Website mehr bremst als hilft, werfe ich gern einen Blick auf die Einstellungen – lassen Sie es mich wissen.