Was ist Lazy Loading?

Lazy Loading ist eine Performance-Technik, bei der nicht kritische Inhalte wie Bilder, iframes oder Skripte erst geladen werden, wenn sie voraussichtlich benötigt werden. Dadurch kann der erste Seitenaufbau schneller werden, weil der Browser zunächst weniger Daten laden und verarbeiten muss.

MDN beschreibt Lazy Loading als Strategie, nicht kritische Ressourcen erst bei Bedarf zu laden: MDN zu Lazy Loading.

Wo wird Lazy Loading eingesetzt?

Am häufigsten wird Lazy Loading für Bilder und eingebettete Inhalte genutzt. Moderne Browser unterstützen dafür das HTML-Attribut loading="lazy" bei Bildern und iframes. Auch JavaScript-Module, Komponenten oder Videos können verzögert geladen werden, wenn sie für den ersten sichtbaren Bereich nicht notwendig sind.

Typische Einsatzbereiche sind:

• Bilder weit unterhalb des sichtbaren Bereichs
• eingebettete Videos oder Karten
• iframes von Drittanbietern
• lange Blogartikel mit vielen Medien
• Produktlisten und Galerien
• nachgeladene Komponenten in Webanwendungen

Wann kann Lazy Loading schaden?

Lazy Loading ist nicht automatisch gut. Das wichtigste Bild im sichtbaren Bereich, zum Beispiel ein Hero-Bild, sollte normalerweise nicht verzögert geladen werden. Sonst kann sich der Largest Contentful Paint verschlechtern.

Auch bei wichtigen Conversion-Elementen, Formularen oder Above-the-Fold-Inhalten ist Vorsicht nötig. Die Technik muss zur Seitenstruktur passen. In einer Performance-Optimierung wird deshalb geprüft, welche Ressourcen kritisch sind und welche verzögert geladen werden können.

Lazy Loading und Bildoptimierung

Lazy Loading ersetzt keine Bildoptimierung. Bilder sollten weiterhin in passenden Abmessungen, modernen Formaten wie WebP oder AVIF und mit korrektem alt-Text eingebunden werden. Lazy Loading reduziert nur den Zeitpunkt der Übertragung, nicht automatisch die Dateigröße.

Richtig eingesetzt verbessert Lazy Loading Ladezeit, Bandbreitennutzung und Nutzererfahrung. Falsch eingesetzt kann es sichtbare Inhalte verzögern oder Layout-Verschiebungen verursachen. Deshalb sollte es immer zusammen mit Core Web Vitals, Bildgrößen und Rendering-Verhalten bewertet werden.