Die meisten Besucher sehen beim Öffnen einer Seite nur den oberen Bildschirmausschnitt. Trotzdem laden viele Websites von Anfang an alle Bilder, auch jene, die weit unten liegen und vielleicht nie zu Gesicht kommen. Das kostet Zeit und Datenvolumen, ohne dem Nutzer einen Vorteil zu bringen. Genau hier setzt Lazy Loading an. Diese verzögerte Ladestrategie lädt Inhalte erst dann, wenn sie tatsächlich gebraucht werden. Richtig eingesetzt beschleunigt sie den ersten Seitenaufbau spürbar, falsch eingesetzt schadet sie ihm. Dieser Beitrag erklärt den Unterschied.
Was Lazy Loading bedeutet
Lazy Loading heißt übersetzt “faules Laden”, und der Name beschreibt es gut. Statt alle Bilder und teils auch Videos oder iframes sofort herunterzuladen, wartet der Browser, bis der Nutzer sich dem jeweiligen Element nähert. Erst kurz bevor ein Bild in den sichtbaren Bereich scrollt, beginnt der Browser, es zu laden. Inhalte, die der Besucher nie erreicht, werden gar nicht erst übertragen.
Der Effekt: Beim Öffnen der Seite muss der Browser nur die wenigen Bilder laden, die sofort sichtbar sind. Der erste Eindruck entsteht schneller, und das verbrauchte Datenvolumen sinkt.
Wie Lazy Loading technisch funktioniert
Früher brauchte man dafür eigene Skripte. Heute reicht in den meisten Fällen ein einziges Attribut im HTML: loading="lazy". Damit weisen Sie den Browser an, das Bild verzögert zu laden. Alle gängigen Browser unterstützen dieses Verfahren nativ, ohne dass zusätzlicher Programmcode nötig wäre.
Der Browser entscheidet anhand der Scrollposition, wann das Laden beginnt. Er startet dabei bewusst etwas früher, bevor das Bild den sichtbaren Bereich erreicht, damit es beim Hinscrollen schon fertig ist und nicht erst aufpoppt. Für anspruchsvollere Fälle, etwa ganze Komponenten oder Inhalte, die per JavaScript nachgeladen werden, kommt der sogenannte Intersection Observer zum Einsatz, der das Sichtbarwerden von Elementen präzise meldet.
Wichtig ist der Unterschied zwischen Bildern und sogenannten Hintergrundbildern, die per CSS eingebunden werden. Das Attribut loading="lazy" wirkt nur auf echte Bild-Elemente im HTML. Hintergrundbilder muss man anders behandeln, etwa über eigene Logik oder indem man sie dort, wo es geht, durch normale Bilder ersetzt. Wer das übersieht, wundert sich, warum trotz Lazy Loading weiterhin alles sofort lädt.
Die Vorteile auf einen Blick
Richtig eingesetzt bringt Lazy Loading mehrere Vorteile:
- Der erste Seitenaufbau wird schneller, weil weniger gleichzeitig geladen werden muss.
- Das übertragene Datenvolumen sinkt, was besonders im Mobilfunknetz zählt.
- Der Server wird entlastet, weil nicht jede Anfrage sofort alle Dateien ausliefern muss.
- Die Ladezeit der wahrgenommenen Seite verbessert sich, und das wirkt sich positiv auf Absprungrate und Ranking aus.
Gerade auf bildlastigen Seiten wie Galerien, Blogs oder Onlineshops ist der Unterschied deutlich messbar.
Die Grenzen: Wo Lazy Loading nicht hingehört
So nützlich die Technik ist, sie hat einen klaren blinden Fleck. Lazy Loading darf niemals auf Bilder angewendet werden, die sofort sichtbar sind. Das wichtigste Beispiel ist das große Bild im oberen Bereich der Seite, der Above-the-Fold-Bereich. Wird ausgerechnet dieses Bild verzögert geladen, sieht der Nutzer beim Öffnen erst eine Lücke, und das Bild erscheint mit Verzögerung.
Das ist kein theoretisches Problem. Google misst mit dem Largest Contentful Paint, wie schnell der größte sichtbare Inhalt erscheint. Genau dieser Inhalt ist oft das Hero-Bild ganz oben. Wer es per Lazy Loading lädt, verschlechtert seinen Wert aktiv. Die Faustregel lautet deshalb: alles unterhalb der ersten Bildschirmhöhe verzögert laden, alles darüber sofort.
Lazy Loading und die Core Web Vitals
Die Core Web Vitals sind Googles Kennzahlen für die Nutzererfahrung, und Lazy Loading wirkt auf gleich zwei davon. Beim Largest Contentful Paint hilft es, weil weniger konkurrierende Downloads den Aufbau des Hauptinhalts bremsen, vorausgesetzt, das oberste Bild ist ausgenommen.
Auf den Cumulative Layout Shift, also das ungewollte Verrutschen des Layouts, kann Lazy Loading dagegen negativ wirken, wenn man unsauber arbeitet. Lädt ein Bild nach, ohne dass vorher Platz dafür reserviert war, springt der darunterliegende Inhalt nach unten. Die Lösung ist einfach: Geben Sie jedem Bild von Anfang an Breite und Höhe mit, damit der Browser den Platz freihält. Wie die einzelnen Kennzahlen zusammenspielen, lesen Sie ausführlich im Beitrag zur Website-Ladezeit.
So setzen Sie Lazy Loading richtig ein
Die praktische Umsetzung lässt sich in wenige Regeln fassen:
- Versehen Sie alle Bilder unterhalb des ersten Bildschirms mit
loading="lazy". - Nehmen Sie das oberste, sofort sichtbare Bild ausdrücklich davon aus.
- Geben Sie jedem Bild feste Breiten- und Höhenangaben mit, um Layoutsprünge zu vermeiden.
- Kombinieren Sie Lazy Loading mit komprimierten Bildern und modernen Formaten, denn beides zusammen wirkt am stärksten.
Lazy Loading ersetzt also keine ordentliche Bildoptimierung, sondern ergänzt sie. Erst beides zusammen ergibt eine wirklich schnelle Seite.
Häufige Fehler
- Lazy Loading auf das Hero-Bild anwenden und so den Largest Contentful Paint verschlechtern
- Bilder ohne feste Maße nachladen und dadurch Layoutsprünge erzeugen
- die Technik als Ersatz für komprimierte und richtig dimensionierte Bilder betrachten
- mit zusätzlichen Skripten arbeiten, obwohl der Browser Lazy Loading längst nativ beherrscht
Wer diese Punkte beachtet, nutzt die Stärken der Technik, ohne in ihre Fallen zu tappen.
Fazit
Lazy Loading ist eines der einfachsten Mittel, um eine Website schneller zu machen, und doch wird es oft falsch angewendet. Der Schlüssel liegt in der Unterscheidung zwischen dem, was sofort sichtbar ist, und dem, was warten kann. Sauber umgesetzt verbessert es die Ladezeit und die Core Web Vitals, schlampig umgesetzt schadet es genau diesen Werten. Diese Sorgfalt im Detail ist Teil unseres Verständnisses von gutem Webdesign. Weitere Beiträge rund um Tempo und Technik finden Sie in unserem Performance-Blog.
Wenn Sie prüfen lassen möchten, ob Ihre Website Lazy Loading richtig nutzt, melden Sie sich über unser Kontaktformular. Wir schauen uns Ihre Seite an und zeigen Ihnen für Ihr Projekt in der Region Neckar-Alb, wo Sie Tempo gewinnen.