Lazy Loading.

Lazy Loading, auf Deutsch etwa „verzögertes Laden", sorgt dafür, dass eine Website nicht alle Bilder auf einmal herunterlädt. Was weiter unten liegt, holt der Browser erst, wenn der Besucher in die Nähe scrollt. Das spart Datenvolumen für das, was sofort zu sehen ist. Laut web.dev sind Bilder auf den meisten Websites die am häufigsten angefragte Dateiart und brauchen meist mehr Bandbreite als alles andere.

So funktioniert Lazy Loading

Moderne Browser beherrschen Lazy Loading ohne Zusatzsoftware. Ein Bild oder ein eingebettetes iFrame bekommt dafür im HTML das Attribut loading="lazy". Laut web.dev lädt der Browser es dann erst ab einer berechneten Entfernung zum sichtbaren Bereich. Chrome beginnt bei schneller Verbindung etwa 1.250 Pixel vorher, bei langsamer etwa 2.500 Pixel, damit das Bild beim Hinscrollen meist fertig ist.

Daneben gibt es Lösungen per JavaScript, etwa mit der IntersectionObserver-Schnittstelle. Laut Google Search Central sind alle diese Wege für die Suche geeignet, solange Inhalte geladen werden, sobald sie in den sichtbaren Bereich kommen. Google scrollt, klickt und wischt nicht auf deiner Seite.

Worauf du als Betrieb achten solltest

Lade das erste große Bild nie verzögert. Google rät ausdrücklich davon ab, Lazy Loading für Inhalte zu nutzen, die beim Öffnen der Seite sofort sichtbar sind. Das Titelbild ist oft das größte Element und bestimmt damit den Largest Contentful Paint aus den Core Web Vitals. In Projekten sehen wir oft, dass ein Plugin pauschal alle Bilder verzögert lädt, auch das oberste.

Gib jedem Bild Breite und Höhe mit. Ohne feste Maße weiß der Browser nicht, wie viel Platz er freihalten soll. Laut web.dev springt der Inhalt dann beim Nachladen, und im ungünstigen Fall lädt der Browser sogar alle Bilder sofort, weil sie zunächst null Pixel groß wirken.

Prüfe, ob Google deine nachgeladenen Bilder sieht. Laut Google zeigt das URL-Prüftool der Search Console, ob die Bildadressen im gerenderten HTML stehen. Wie du das Werkzeug bedienst, erklärt unser Beitrag Die Google Search Console richtig nutzen.

Miss vorher und nachher. In unserem Kölner Handwerks-Website-Report lag der mittlere LCP mobil bei 6,0 Sekunden, nur 12,5 % der Seiten schafften 2,5 Sekunden oder weniger. Ob eine Änderung hilft, zeigt nur die Messung.

Häufige Fragen zu Lazy Loading

Schadet Lazy Loading meinem Ranking? Nicht, wenn Inhalte ohne Zutun des Besuchers nachgeladen werden. Laut Google lädt die Suche aber keine Inhalte, die erst nach Wischen, Klicken oder Tippen erscheinen.

Macht Lazy Loading eine Seite immer schneller? Nein. In einer Auswertung von web.dev hatten Seiten mit Lazy Loading im Median einen schlechteren LCP als Seiten ohne. web.dev betont, dass das ein Zusammenhang und kein Beweis ist, empfiehlt aber, Bilder im ersten Sichtbereich normal zu laden.

Gilt das nur für Bilder? Das HTML-Attribut gibt es für Bilder und iFrames, also etwa eingebettete Karten oder Videos. Laut MDN lässt sich das Prinzip auch auf Skripte übertragen, die der erste Seitenaufbau nicht braucht.

Ob dein Titelbild zu spät lädt und wo deine Seite Zeit verliert, zeigt dir der Speed-Check. Kleinere Dateien bekommst du zusätzlich mit dem Bildformat WebP.