Lazy Loading spart beim ersten Aufruf einer Seite Daten und Zeit, weil der Browser Bilder und eingebettete Inhalte weiter unten erst holt, wenn sie gebraucht werden. Google nennt das verzögerte Laden nicht kritischer oder nicht sichtbarer Inhalte eine bewährte Praxis für die Leistung einer Seite, warnt aber im selben Atemzug: Falsch umgesetzt, kann es Inhalte vor Google verbergen [1]. Was der Begriff bedeutet, steht im Glossar unter Lazy Loading. Dieser Ratgeber zeigt, wie Sie es auf einer bestehenden Website so einstellen, dass Besucher schneller laden und Google trotzdem jedes Bild findet.
Was verzögert laden sollte und was nicht
Die Grundregel kommt von Google und web.dev gleichermaßen. Inhalte, die beim Öffnen der Seite wahrscheinlich sofort sichtbar sind, sollten nicht verzögert laden, sonst warten Nutzer unnötig [1]. web.dev schreibt: "Use loading=lazy only for images outside the initial viewport." [2] Daraus ergibt sich eine einfache Einteilung:
| Element | Empfehlung |
|---|---|
| Titelbild, Logo, erstes Produktbild | sofort laden, beim LCP-Bild zusätzlich hohe Priorität |
| Bilder im Text unterhalb des ersten Bildschirms | loading="lazy" |
| Bildergalerien, Produktlisten ab der zweiten Reihe | loading="lazy" |
| eingebettete Videos, Karten, Social-Media-Beiträge weiter unten | loading="lazy" am iframe |
| Hintergrundbilder aus CSS | das Attribut wirkt dort nicht |
Das loading-Attribut gibt es laut web.dev für img-Elemente und für iframes, für Hintergrundbilder aus CSS gibt es keine solche Einstellung [2, 4]. Wer ein großes Titelbild als CSS-Hintergrund einbindet, steuert sein Laden also auf anderem Weg.
Das erste Bild: sofort und mit Vorrang
Ein häufiger Fehler ist ein Lazy Loading an allen Bildern, auch am obersten. Dann wartet der Browser mit dem größten sichtbaren Bild, und der Largest Contentful Paint (LCP), einer der Core Web Vitals, verschlechtert sich. web.dev rät ausdrücklich davon ab, Bilder verzögert zu laden, die beim Aufruf wahrscheinlich im sichtbaren Bereich liegen, besonders LCP-Bilder [2].
Für dieses Bild empfiehlt web.dev das Gegenteil: Mit fetchpriority="high" am img-Element bekommt das LCP-Bild Vorrang, und der LCP tritt früher ein [3]. Das Attribut ist laut web.dev ein Hinweis an den Browser, keine Anweisung [3]. Chrome und Edge unterstützen es seit Version 102, Firefox seit 132 und Safari seit 17.2 [3]. Wie Bilder insgesamt mit den Ladezeiten zusammenhängen, beschreibt der Ratgeber Bilder und Core Web Vitals.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Browser-eigen oder per Skript
Google nennt drei Wege, Inhalte beim Erscheinen im sichtbaren Bereich zu laden, die mit der Suche zusammenpassen: das eingebaute Lazy Loading des Browsers für Bilder und iframes, die IntersectionObserver-Schnittstelle und JavaScript-Bibliotheken, die Inhalte beim Eintritt in den sichtbaren Bereich laden [1]. Allen drei ist gemeinsam, dass kein Scrollen und kein Klick nötig ist. Das ist der entscheidende Punkt, denn die Google Suche interagiert laut Google nicht mit der Seite [1].
Für die meisten Websites ist das Attribut im HTML der einfachste Weg. Bei Bildern unterstützen es Chrome seit Version 77, Edge seit 79, Firefox seit 75 und Safari seit 15.4 [2]. Browser ohne Unterstützung ignorieren das Attribut und laden das Bild normal [2]. Ein Skript ist nur noch nötig, wenn Sie mehr steuern wollen als der Browser, etwa eigene Abstände oder Effekte beim Einblenden. Skripte, die das Bild erst bei einem Scroll-Ereignis oder einem Klick laden, sind der Fall, vor dem Google warnt.
Wann genau der Browser nachlädt, entscheidet er selbst. Chrome hat die Abstände 2020 verkleinert: bei schneller Verbindung von 3.000 auf 1.250 Pixel vor dem sichtbaren Bereich, bei langsamer von 4.000 auf 2.500 Pixel [2]. Ein Bild lädt also schon, bevor es ins Bild scrollt.
Breite und Höhe nicht vergessen
Verzögert geladene Bilder brauchen Platz, bevor sie da sind. web.dev empfiehlt, an alle img-Elemente die Attribute width und height zu setzen [2]. Der Browser reserviert damit die Fläche, und der Text springt nicht, wenn das Bild nachkommt. Ohne die Angaben drohen Layoutverschiebungen, die der Cumulative Layout Shift misst.
Ein zweiter Punkt betrifft versteckte Bilder. Chrome, Safari und Firefox laden Bilder mit display: none nicht, Bilder mit voller Transparenz dagegen schon [2]. Für Bildergalerien in Reitern oder Schiebern lohnt deshalb ein Blick darauf, wie sie versteckt werden.
iframes für Videos und Karten
Eingebettete Videos sind oft schwerer als das Bild darüber. web.dev nennt für eingebettete YouTube-Videos eine Ersparnis von rund 500 KB beim ersten Laden, wenn sie verzögert laden [4]. Das Attribut loading="lazy" am iframe unterstützen Chrome seit 77, Edge seit 79, Firefox seit 121 und Safari seit 16.4 [4]. Ein Video, das erst in der Mitte eines Ratgebers kommt, ist damit ein klarer Kandidat. Wie Videos und Bildstrecken aus Sicht der Medienproduktion eingebunden werden und welche Bilder einer Galerie warten dürfen, beschreibt unser Medienportal im Ratgeber Bilder lazy laden.
Was Redaktionssysteme schon mitbringen
Viele Systeme setzen das Attribut von selbst. WordPress fügt seit Version 5.5 loading="lazy" an alle img-Elemente mit width und height an, unter anderem im Beitragsinhalt, in Auszügen, Text-Widgets und Avataren [5]. Inzwischen lässt WordPress die ersten Bilder einer Seite ohne Lazy Loading. Mit Version 6.3 stieg der Standardwert dieser Schwelle von einem auf drei Bilder, und das wahrscheinliche LCP-Bild bekommt seitdem automatisch fetchpriority="high" [6]. Wer ein eigenes Theme oder ein Plugin zur Bildoptimierung nutzt, sollte trotzdem prüfen, ob die Einstellungen sich gegenseitig überschreiben. Hinweise zu WordPress im Besonderen stehen auf unserem Fachportal unter Core Web Vitals in WordPress.
Prüfen, ob Google alles sieht
Ob die Einrichtung für die Suche funktioniert, testen Sie mit dem URL-Prüftool der Search Console. Google empfiehlt dort, im gerenderten HTML nachzusehen: Stehen die Adressen der Bilder und Videos im src-Attribut der img- und video-Elemente, funktioniert die Einrichtung [1]. Steht dort nur ein Ersatzbild, etwa ein leeres Pixelbild, und die echte Adresse in einem anderen Attribut, wartet das Skript vermutlich auf ein Ereignis, das bei Google nicht eintritt.
Für die Ladezeit prüfen Sie zusätzlich, welches Bild auf mobilen Geräten das LCP-Element ist. Auf dem Telefon kann das ein anderes Bild sein als am Desktop, weil der erste Bildschirm schmaler ist. Bei langen Listen, die beim Scrollen nachladen, braucht es mehr als Lazy Loading. Jeder Block braucht dann eine eigene Adresse und einen Link, das beschreibt der Ratgeber Endlos-Scrolling und SEO.
Sie wissen nicht, ob Ihr Theme das Titelbild verzögert lädt? Bringen Sie die Adresse Ihrer Startseite in die gratis Sprechstunde und stellen Sie die Frage dort. Wenn mehrere Ladezeitprobleme zusammenkommen, ist die Leistung Core Web Vitals verbessern der passende Rahmen.
- Organisation Probleme mit Lazy-Load-Inhalten beheben. Google Search Central. Stand 18.12.2025. abgerufen am 31.10.2026
- Organisation Browser-level image lazy loading for the web (Addy Osmani, Houssein Djirdeh, Mathias Bynens, Barry Pollard). web.dev (Google). Stand 13.08.2024. abgerufen am 31.10.2026
- Organisation Optimize resource loading with the Fetch Priority API. web.dev (Google). Stand 14.11.2023. abgerufen am 31.10.2026
- Organisation It's time to lazy-load offscreen iframes! (Addy Osmani, Barry Pollard). web.dev (Google). Stand 23.09.2024. abgerufen am 31.10.2026
- Organisation Lazy-loading images in 5.5 (Felix Arntz). Make WordPress Core. Stand 14.07.2020. abgerufen am 31.10.2026
- Organisation Image performance enhancements in WordPress 6.3 (Felix Arntz). Make WordPress Core. Stand 13.07.2023. abgerufen am 31.10.2026
Häufige Fragen
Schadet Lazy Loading dem Ranking?
Nicht, wenn es ohne Nutzeraktion auslöst. Google nennt das eingebaute Lazy Loading des Browsers, IntersectionObserver und passende Bibliotheken als geeignete Wege. Probleme entstehen, wenn Inhalte erst nach Scrollen oder Klicken laden, weil Google nicht mit der Seite interagiert.
Soll das erste Bild einer Seite lazy laden?
Nein. web.dev rät davon ab, Bilder im ersten sichtbaren Bereich verzögert zu laden, besonders das LCP-Bild. Für dieses Bild empfiehlt web.dev stattdessen fetchpriority="high".
Funktioniert loading="lazy" auch bei CSS-Hintergrundbildern?
Nein. Das Attribut gilt für img-Elemente und iframes. Hintergrundbilder aus CSS brauchen einen anderen Weg.
Wie sehe ich, ob Google meine nachgeladenen Bilder erkennt?
Mit dem URL-Prüftool der Search Console. Stehen die Bildadressen im gerenderten HTML im src-Attribut der img-Elemente, funktioniert die Einrichtung nach Googles Angaben.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Haben Sie einen Fehler entdeckt? Schreiben Sie uns.
