Lazy Loading: Schnelleres Laden durch verzögertes Nachladen

Nicht alle Bilder müssen sofort geladen werden. Lazy Loading lässt Seiten schneller wirken — wir erklären native Lösungen und bewährte Techniken, die wirklich funktionieren.

9 Min Lesezeit Anfänger März 2026

Lazy Loading Diagramm zeigt wie Bilder beim Scrollen nachgeladen werden

Das Problem: Zu viele Bilder, zu langsam

Stell dir vor: Ein Nutzer öffnet deine Website. Der Browser beginnt sofort, alle Bilder zu laden — auch die, die erst unten auf der Seite sind. Die ganze Seite wird blockiert, bis alles da ist. Das Ergebnis? Eine langsame, frustrierende Nutzererfahrung.

Das muss nicht sein. Mit Lazy Loading — dem verzögerten Nachladen — ladest du Bilder erst dann, wenn der Nutzer sie tatsächlich sieht. Deine Website wird schneller, der erste Eindruck besser, und die Bandbreite wird gespart. Das ist kein theoretisches Konzept mehr. Es’s einfach umzusetzen.

                  Der Unterschied im Vergleich
                
 Ohne Lazy Loading: 
                    Alle 15 Bilder werden beim Laden geladen (3–5 Sekunden
                    Wartezeit)
                  
 Mit Lazy Loading: 
                    Nur 3 sichtbare Bilder geladen (0,8 Sekunden Wartezeit)
                  
 Ersparnis: 
                    60–70% weniger Bandbreite beim ersten Seitenaufruf

Wie Lazy Loading funktioniert

Das Prinzip ist elegant: Der Browser prüft ständig, welche Bilder in den sichtbaren Bereich des Fensters kommen. Sobald ein Bild sichtbar wird, wird es geladen. Das funktioniert durch das Intersection Observer API — eine moderne JavaScript-Technik, die sehr effizient ist.

Es gibt aber auch die native HTML-Lösung. Seit 2019 unterstützen moderne Browser das loading="lazy" Attribut. Du schreibst einfach:

<img src="bild.jpg" alt="Beschreibung" loading="lazy">

Das ist alles. Der Browser macht den Rest. Kein JavaScript nötig. Du’ll sehen, dass deine Website sofort schneller wird — besonders auf mobilen Geräten mit langsameren Verbindungen.

Implementierung: Drei praktische Ansätze

Native HTML-Lösung

Einfachste Methode. Du fügst einfach loading="lazy" hinzu. Funktioniert in Chrome, Firefox, Edge. Safari folgt bald. Perfekt für die meisten Projekte.

Vorteil: Null Aufwand, funktioniert sofort.

Intersection Observer API

Für Browser, die loading="lazy" nicht unterstützen. Du schreibst ein paar Zeilen JavaScript, die beobachten, wann Bilder sichtbar werden. Mehr Kontrolle, aber etwas komplexer.

Vorteil: Funktioniert überall, feinere Kontrolle.

Bibliotheken nutzen

Lösungen wie Lozad oder Vanilla Lazyload kümmern sich um alles. Du brauchst nur ein paar Zeilen Code. Gut, wenn du viele Bilder hast und alles automatisiert haben möchtest.

Vorteil: Schnell zu implementieren, zuverlässig.

Praktische Tipps für echte Websites

Placeholder und Farben

Während ein Bild lädt, sieht der Nutzer eine leere Fläche. Das ist nicht optimal. Nutzer erwarten Feedback. Eine einfache Lösung: Ein einfarbiger Placeholder mit der durchschnittlichen Farbe des Bildes. Das fühlt sich poliert an — nicht improvisiert.

Kritische Bilder oben

Lazy Loading ist super, aber nicht für Bilder, die sofort sichtbar sind. Wenn ein Bild im Hero-Bereich ist, sollte es normal geladen werden. Nutze loading="eager" (oder gar kein Attribut). Die kritischen Bilder zuerst, die anderen dann.

Dimensionen angeben

Immer width und height auf deinen Bildern angeben. Das verhindert, dass sich die Seite verschiebt, während Bilder laden. Das nennt sich “Cumulative Layout Shift” — und es’s eines der wichtigsten Ranking-Faktoren bei Google.

Vergleich von Websites mit und ohne Lazy Loading während des Ladens

Lazy Loading mit responsive Bildern kombinieren

Hier wird’s richtig interessant. Du kannst Lazy Loading mit srcset kombinieren. Der Browser lädt dann nicht nur die richtigen Bilder zum richtigen Zeitpunkt — er lädt auch die richtige Auflösung für das Gerät des Nutzers.

Beispiel: Ein Nutzer auf einem Smartphone mit 2x Pixel-Dichte sieht ein 400px breites Bild. Der Browser lädt dann automatisch die 800px-Version — nicht größer, nicht kleiner. Perfekt. Und mit Lazy Loading passiert das erst, wenn das Bild sichtbar wird.

<img 
    src="bild-klein.jpg"
    srcset="bild-klein.jpg 400w, bild-mittel.jpg 800w, bild-gross.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Beschreibung"
    loading="lazy"
    width="600"
    height="400"
>

Dieser eine Code-Block ist mächtig. Lazy Loading + Responsive Images + Richtige Dimensionen = Eine Website, die auf allen Geräten schnell lädt.

Technisches Diagramm zeigt wie srcset und Lazy Loading zusammenwirken

Messung: Das Wichtigste am Ende

Theorie ist schön. Aber Fakt ist: Du brauchst Zahlen. Google bietet kostenlose Tools wie PageSpeed Insights und Lighthouse. Dort siehst du konkret, wie deine Website lädt — und wo Lazy Loading hilft.

Typische Verbesserungen nach der Implementierung:

First Contentful Paint (FCP): 30–50% schneller
Largest Contentful Paint (LCP): 20–40% schneller
Gesamtdatengröße: 50–70% weniger beim initialen Laden

Das sind nicht nur Zahlen. Das bedeutet, dass deine Website für Nutzer schneller wirkt. Und schnellere Websites führen zu mehr Klicks, weniger Absprüngen und besseren Rankings.

Nächster Schritt: Implementierung

Lazy Loading ist nicht optional — es’s ein Standard, den moderne Websites nutzen. Die gute Nachricht: Du kannst heute anfangen. Mit loading="lazy" dauert es nur Sekunden.

Mehr Bildoptimierungs-Guides lesen

Hinweis zur Verwendung

Dieser Artikel dient zu Bildungszwecken und enthält allgemeine Informationen zur Implementierung von Lazy Loading in Websites. Die technischen Empfehlungen sind auf aktuellem Stand (März 2026), können sich aber mit neuen Browser-Updates ändern. Teste immer in deinem spezifischen Projekt, da die Performance je nach Serverumgebung, Netzwerk und Gerät variiert. Für kritische Anwendungen empfehlen wir, die offizielle Dokumentation von MDN Web Docs zu konsultieren.