Was Lazy Loading überhaupt tut

Standardmäßig lädt ein Browser alle Bilder einer Seite — auch die, die man erst nach langem Scrollen sieht oder nie. Bei einer langen Seite mit vielen Bildern verschwendet das Datenvolumen und bremst den ersten Seitenaufbau. Lazy Loading löst das: Bilder werden erst geladen, wenn sie in die Nähe des sichtbaren Bereichs kommen. Früher brauchte das JavaScript-Bibliotheken — heute genügt ein natives HTML-Attribut:

<img src="foto.jpg" alt="Beschreibung" loading="lazy" width="800" height="600">

Das war es. Kein Skript, keine Bibliothek. Der Browser erledigt den Rest.

Der wichtigste Fehler: das erste Bild lazy laden

Die verbreitetste Fehlanwendung ist, loading="lazy" pauschal auf jedes Bild zu setzen — auch auf das große Hero-Bild ganz oben. Das ist kontraproduktiv: Das oberste sichtbare Bild ist oft das LCP-Element (Largest Contentful Paint — das größte sofort sichtbare Element, an dem Google die Ladezeit misst). Wird es lazy geladen, verzögert der Browser seinen Start, und die Ladezeit-Messung wird schlechter, nicht besser.

Die Regel lautet deshalb:

  • Sofort sichtbare Bilder (above the fold): KEIN lazy — normal laden, das wichtigste sogar per Preload beschleunigen.
  • Bilder unterhalb des sichtbaren Bereichs: loading="lazy".

Wie man das entscheidende erste Bild sogar beschleunigt, statt es zu bremsen, steht im Beitrag LCP-Bild preloaden.

Lazy Loading ist kein Ersatz für Optimierung

Ein wichtiger Denkfehler: Lazy Loading macht große Bilder nicht klein — es verschiebt nur den Zeitpunkt des Ladens. Ein 5-MB-Foto bleibt ein 5-MB-Foto, es wird nur später heruntergeladen. Die Reihenfolge richtig gedacht: erst optimieren, dann lazy laden. Bilder vorher auf sinnvolle Maße bringen (Skalier-Tool) und komprimieren (Kompression) — beides browser-lokal. Lazy Loading ist die Kür obendrauf, nicht der Ersatz.

Kombination mit width und height

Ein oft übersehenes Detail: Lazy geladene Bilder erscheinen ja erst später — und wenn der Browser vorher nicht weiß, wie groß sie werden, springt beim Nachladen das Layout. Deshalb gehören auf jedes Bild width und height (oder ein CSS-aspect-ratio), damit der Platz reserviert ist:

<img src="foto.jpg" alt="..." loading="lazy" width="800" height="600">

Warum das gegen springende Layouts hilft, vertieft der Beitrag Layout Shift durch Bilder vermeiden.

Was mit iframes ist

Das loading-Attribut funktioniert auch für <iframe>— praktisch für eingebettete Videos oder Karten weit unten auf der Seite:

<iframe src="..." loading="lazy" width="560" height="315"></iframe>

Gerade schwere Einbettungen (Video-Player, Kartendienste) profitieren stark, weil sie sonst beim Seitenaufbau mitgeladen werden, obwohl der Nutzer sie oft nie erreicht.

Häufige Fragen

Was macht loading="lazy"?

Es weist den Browser an, ein Bild erst zu laden, wenn es kurz vor dem sichtbaren Bereich steht. Bilder weit unten auf der Seite werden so nicht sofort geladen — das spart Datenvolumen und beschleunigt den ersten Seitenaufbau. Das Attribut ist nativ, es braucht kein JavaScript.

Soll ich loading="lazy" auf jedes Bild setzen?

Nein. Das erste, sofort sichtbare Bild (oft das Hero- oder LCP-Bild) sollte NICHT lazy geladen werden — sonst verzögert sich sein Erscheinen und die Ladezeit-Messung verschlechtert sich. Lazy Loading gehört auf Bilder unterhalb des sichtbaren Bereichs.

Unterstützen alle Browser natives Lazy Loading?

Ja, alle aktuellen Browser unterstützen loading="lazy" für Bilder nativ. Ältere Browser, die es nicht kennen, ignorieren das Attribut einfach und laden das Bild normal — es gibt also kein Risiko, kein JavaScript-Fallback nötig.

Hilft Lazy Loading gegen Layout Shift?

Nur indirekt. Lazy Loading spart Ladezeit, verhindert aber kein Springen des Layouts. Gegen Layout Shift helfen feste width- und height-Angaben, damit der Browser den Platz reserviert, bevor das Bild da ist.

Wie Lazy Loading ins Gesamtbild der Ladezeit-Optimierung passt, steht im Beitrag Core Web Vitals verbessern.

Quellen

MDN — loading-Attribut · web.dev — Browser-level lazy loading.