Was ist Lazy Loading?
Statt beim Öffnen einer Seite alle Bilder auf einmal zu laden, holt der Browser nur die im sichtbaren Bereich, der Rest folgt, wenn er sich dem Bildschirm nähert. Browser können das selbst über das Attribut `loading="lazy"` am `img`-Element, alle gängigen Browser unterstützen es. Daneben gibt es selbst gebaute Lösungen, die die Bildadresse zunächst in einem anderen Attribut wie `data-src` parken und sie per JavaScript einsetzen.
Für die Suche verlangt Google, dass verzögert geladene Inhalte geladen werden, sobald sie im sichtbaren Bereich sind, ohne Nutzeraktionen wie Scrollen oder Klicken, weil die Google-Suche nicht mit der Seite interagiert. Das eingebaute Verfahren erfüllt das, denn die Adresse steht im Quelltext. Bei eigenen Lösungen hängt es davon ab, worauf das Skript wartet. Prüfen lässt sich das mit der URL-Prüfung in der Search Console: Steht die Bildadresse im gerenderten HTML im `src` des `img`-Elements, ist die Einrichtung in Ordnung.
Lazy Loading gehört nicht auf das erste sichtbare Bild. Google rät davon ab, Inhalte verzögert zu laden, die beim Öffnen sofort sichtbar sind, und in der Leistungsmessung verschiebt es den Largest Contentful Paint nach hinten, also den Moment, in dem das größte sichtbare Element erscheint. Weiter unten auf der Seite spart es Daten und Zeit, ganz oben bremst es genau das, worauf Besucher warten.
Warum ist Lazy Loading wichtig?
Lazy Loading macht Seiten schneller, solange es an der richtigen Stelle sitzt. Laut HTTP Archive Web Almanac 2025 laden trotzdem 16 bis 17 Prozent der Seiten ausgerechnet ihr größtes, zuerst sichtbares Bild verzögert, auf Mobilgeräten 10,4 Prozent mit dem eingebauten Attribut und 5,9 Prozent mit eigenen Skript-Lösungen, bei denen Google das Bild nur sieht, wenn das Skript ohne Scrollen lädt.
Lazy Loading in der Praxis
- 01Ein Blogartikel mit zwölf Bildern lädt beim Öffnen nur das Aufmacherbild, die elf Bilder darunter folgen beim Scrollen. Das Aufmacherbild trägt kein `loading="lazy"`, die anderen schon.
- 02Ein Bilderkarussell zeigt das zweite Bild erst nach einem Klick auf den Pfeil und setzt dessen Adresse erst dann per Skript ein. Für die Google-Suche bleibt dieses Bild leer, weil sie nicht klickt.
- 03Ein Shop prüft eine Produktseite mit der URL-Prüfung der Search Console und findet im gerenderten HTML bei den Galeriebildern nur ein Platzhalterbild im `src`. Die eigentlichen Adressen stehen in `data-src`.
