Was ist Lazy Loading?
Lazy Loading heißt übersetzt "faules Laden" — und genau das ist das Prinzip. Statt alle Bilder einer Seite sofort beim ersten Aufruf herunterzuladen, werden nur die Elemente geladen, die der Nutzer tatsächlich sieht. Der Rest folgt erst, wenn er in den sichtbaren Bereich scrollt.
Denk an eine typische Landingpage: 30 Teamfotos, 12 Kundenlogos, vier große Hero-Videos, eine Google-Maps-Einbettung. Ohne Lazy Loading wird alles beim Seitenaufruf auf einen Schlag geladen — mehrere Megabyte, bevor der Besucher auch nur einen Scroll gemacht hat. Mit Lazy Loading wird nur das erste Bild im Viewport angefordert. Alles andere wartet, bis der Nutzer drankommt. Wer oben auf "Kontakt" klickt und die Seite nie runter scrollt, hat 90 Prozent der Assets gar nicht geladen.
Moderne Browser unterstützen Lazy Loading nativ — einfach ein Attribut im HTML, fertig. Früher brauchte man dafür JavaScript-Bibliotheken. Heute ist es eine Zeile Code.
Wie funktioniert Lazy Loading?
Der einfachste Weg ist das native loading-Attribut. Es funktioniert in allen modernen Browsern und braucht kein JavaScript:
<!-- Bild wird erst geladen, wenn es in Sichtweite kommt -->
<img src="team.jpg" alt="Das Team" loading="lazy" width="800" height="600">
<!-- Auch für iframes (YouTube, Maps) -->
<iframe src="https://www.youtube.com/embed/xyz"
loading="lazy"
width="560" height="315"></iframe>Der Browser entscheidet dann selbst, wann er das Element nachlädt — meistens, wenn es noch ein paar hundert Pixel vor dem Viewport ist, damit es rechtzeitig fertig wird. Drei Werte sind möglich:
| Wert | Bedeutung |
|---|---|
loading="eager" | Sofort laden (Standard ohne Attribut) |
loading="lazy" | Erst laden, wenn nötig |
loading="auto" | Browser entscheidet (selten nützlich) |
Für komplexere Fälle — etwa CSS-Hintergrundbilder, Video-Elemente oder eigene Komponenten — nutzt man den Intersection Observer. Das ist eine Browser-API, die beobachtet, wann ein Element sichtbar wird, und dann das Laden auslöst. Page Builder wie Elementor und Plugins wie WP Rocket liefern das oft automatisch mit.
Warum ist Lazy Loading für deine Website wichtig?
Drei handfeste Gründe:
Bessere Core Web Vitals. Weniger sofort geladene Bytes heißt: Der LCP für das Hauptelement wird nicht durch 20 weitere Bildanfragen blockiert. Google misst das und belohnt es.
Weniger Datenvolumen. Besonders mobile Nutzer danken es dir. Wer auf einer 12-MB-Seite landet und nur die ersten zwei Screens anschaut, hat trotzdem 12 MB gezogen — mit Lazy Loading vielleicht 2. In manchen Ländern und Netzen ist das der Unterschied zwischen "nutzt die Seite" und "gibt auf".
Schnellerer gefühlter Seitenaufbau. Die Seite wird zuerst bildfertig, bevor alle weit unten liegenden Elemente nachgeladen werden. Das verkürzt die wahrgenommene Ladezeit drastisch.
Reales Beispiel: Ein Architektenportfolio mit 48 Projekt-Screenshots, jedes ein großes JPEG. Ursprüngliche Seitenlast: 18,4 MB, LCP bei 4,8 Sekunden. Nach Einführung von Lazy Loading plus Bildkomprimierung: 2,1 MB initial, LCP bei 1,7 Sekunden. Keine Design-Änderung, nur Technik.
Häufige Fehler beim Lazy Loading
Das Hero-Bild lazy laden. Der häufigste Fehler. Wenn du loading="lazy" an das größte Bild im sichtbaren Bereich hängst, wird es später geladen — und dein LCP explodiert. Das Hero-Bild bekommt loading="eager" oder besser noch fetchpriority="high".
Keine width und height setzen. Lazy geladene Bilder, die nachträglich auftauchen, schieben das Layout nach unten. Ergebnis: schlechter CLS. Immer Dimensionen angeben oder einen Aspect-Ratio-Container nutzen.
Zu aggressiv einsetzen. Wer alles lazy lädt — auch Kundenlogos, die klein sind und direkt unter dem Fold liegen — schafft sich selbst Flackern und nachladende Bilder. Lazy Loading bringt nur etwas bei Inhalten, die wirklich weit unten sind.
Plugins übereinander stapeln. WP Rocket, Smush, Autoptimize und noch ein Lazy-Load-Plugin gleichzeitig? Jedes überschreibt das native Attribut auf eigene Weise. Entscheide dich für einen Mechanismus und halte dich dran.
Server-Side-Rendering vergessen. Wenn Lazy Loading rein per JavaScript läuft und der Crawler kein JS ausführt, sieht Google womöglich gar keine Bilder. Die native HTML-Variante ist crawlerfreundlich und gut für SEO — eigene JS-Lösungen nur mit sauberem Fallback.