Eine Seite mit zwanzig Bildern muss nicht alle zwanzig auf einmal laden. Wer nur den oberen Teil liest, braucht die Bilder weiter unten vielleicht nie. Bilder lazy laden heißt deshalb: Der Browser holt ein Bild erst, wenn es sich dem sichtbaren Bereich nähert. Das spart Datenvolumen und gibt der Leitung frei für das, was zuerst zu sehen ist. Falsch eingesetzt macht dieselbe Technik eine Seite aber langsamer. Dieser Ratgeber zeigt, wie du entscheidest, welches Bild warten darf, und wie du prüfst, ob deine Website es richtig macht.
So funktioniert loading="lazy"
Seit einigen Jahren können Browser das selbst. Du ergänzt am img-Element das Attribut loading="lazy", und der Browser schiebt das Laden auf, bis das Bild eine bestimmte Entfernung zum sichtbaren Bereich erreicht. Der Standardwert ist eager, das Bild lädt dann sofort, egal wo es auf der Seite steht [1]. Ältere Browser ignorieren das Attribut und laden das Bild wie gewohnt [1]. Ab welcher Version welcher Browser es kennt und wie es mit Skripten zusammenspielt, steht auf der Hauptseite im Ratgeber Lazy Loading und SEO.
Die Entfernung, ab der geladen wird, legt der Browser fest, und er beginnt so früh, dass das Bild meist schon da ist, wenn es ins Bild scrollt [1]. Das Attribut gilt nur für img-Elemente. Hintergrundbilder aus dem CSS lassen sich damit nicht verzögern [1]. Auch iframes kennen loading="lazy", das ist für eingebettete Videos und Karten praktisch [1].
Eine Besonderheit nennt MDN: Der Browser verzögert das Laden nur, wenn JavaScript eingeschaltet ist. Das soll verhindern, dass Websites über die nachgeladenen Bilder verfolgen, wie weit jemand scrollt [2]. Wer JavaScript abschaltet, bekommt alle Bilder sofort.
Welche Bilder warten dürfen
Die Faustregel von web.dev ist einfach: Bilder, die beim Laden wahrscheinlich im sichtbaren Bereich liegen, bekommen kein loading="lazy", vor allem nicht das Bild, das als größtes Element die Ladezeit bestimmt [1]. Alles darunter darf warten. Google sagt dasselbe aus Sicht der Suche: Inhalte, die Nutzer direkt nach dem Aufruf sehen, sollten nicht verzögert geladen werden, weil das die Anzeige bremst [3].
In der Praxis sieht das meist so aus:
- Artikelbild oder großes Bild im Kopfbereich: sofort laden.
- Logo und kleine Symbole im Kopf: sofort laden, sie sind ohnehin klein.
- Bilder im Fließtext ab dem zweiten Absatz: lazy laden.
- Galerien, Bildstrecken und Kartenlisten weiter unten: lazy laden.
- Eingebettete Videos und Karten unterhalb des ersten Bildschirms: als iframe mit loading="lazy".
Schwierig wird es, weil "oben" je nach Gerät etwas anderes bedeutet. Auf dem Smartphone steht unter der Überschrift oft nur ein Bild im sichtbaren Bereich, auf einem breiten Bildschirm sind es vielleicht drei Karten nebeneinander. Prüfe deshalb beide Ansichten, bevor du festlegst, ab welchem Bild verzögert wird.
Video zu deinem Thema? Jan macht das.
Schreib Jan, worum es gehen soll. Die Anfrage geht an 301@seo-manager.info, die Abstimmung läuft über SEO NW.
Was passiert, wenn das erste Bild wartet
Wie viel ein falsch gesetztes Attribut kostet, haben Felix Arntz und Rick Viscomi für web.dev an WordPress gemessen. Im Labortest mit dem Standardthema lud die Archivseite ihr größtes Element ohne Lazy Loading auf dem Desktop 13 Prozent und mobil 15 Prozent schneller als mit der Voreinstellung, die alle Bilder verzögerte [4]. Gleichzeitig stieg ohne Lazy Loading die Menge der geladenen Bilddaten um 103 bis 233 Prozent [4]. Die Lösung, die beides verbindet: die Bilder oben sofort laden und den Rest verzögern. Mit dieser Variante war die Archivseite auf dem Desktop 14 Prozent und mobil 18 Prozent schneller als mit der Voreinstellung, bei gleicher Datenmenge [4].
Der Hintergrund: WordPress hatte mit Version 5.5 Lazy Loading für Bilder standardmäßig eingeschaltet, unabhängig davon, ob ein Bild oben oder unten steht [5]. Was WordPress heute selbst setzt, steht im technischen Ratgeber auf der Hauptseite. Wenn du ein Theme oder Plugin nutzt, das selbst Lazy Loading einbaut, lohnt ein Blick in den Quelltext deiner Startseite und einer typischen Unterseite. Wie das größte Bild die Messwerte bestimmt, beschreibt der Ratgeber Bilder und Core Web Vitals auf der Hauptseite ausführlich.
Breite und Höhe nicht vergessen
Ein verzögert geladenes Bild braucht Platz, bevor es da ist. Fehlen width und height, behandelt der Browser das Bild zunächst als 0 mal 0 Pixel groß [1]. Das hat zwei Folgen. Der Text springt, sobald das Bild eintrifft. Und in einer Galerie liegen plötzlich alle Bilder scheinbar im sichtbaren Bereich, weil sie keine Höhe haben, also lädt der Browser sie alle auf einmal [1]. Mit Breite und Höhe im HTML berechnet der Browser das Seitenverhältnis vorab und reserviert die Fläche [2]. Die Angaben müssen nicht der angezeigten Größe entsprechen, das Verhältnis zählt. Mit CSS lässt sich das Bild danach flexibel skalieren.
Noch etwas zu versteckten Bildern: Chrome, Safari und Firefox laden Bilder nicht, die mit display: none ausgeblendet sind, auch nicht, wenn ein übergeordnetes Element ausgeblendet ist. Ein Bild mit opacity: 0 wird dagegen geladen [1]. Das betrifft etwa Reiter, Akkordeons und Schieberegler mit Bildern.
Was Google beim Nachladen sieht
Für die Suche ist eine Frage entscheidend: Findet der Googlebot die Bilder? Google empfiehlt, Inhalte zu laden, sobald sie in den sichtbaren Bereich kommen, also mit dem eingebauten Lazy Loading des Browsers, mit der IntersectionObserver-Schnittstelle oder einer Bibliothek, die genau das tut [3]. Wovon Google abrät: Inhalte erst nach einer Nutzeraktion wie Scrollen oder Klicken zu laden. Die Google-Suche interagiert nicht mit der Seite und löst solche Aktionen nie aus [3].
Ältere Skripte arbeiten oft mit einem leeren Ersatzbild im src und der echten Bildadresse in einem Attribut wie data-src, das erst beim Scrollen getauscht wird. Steht im gerenderten HTML nur das Ersatzbild, sieht Google auch nur dieses [3]. Das native Attribut hat dieses Problem nicht, weil die echte Adresse von Anfang an im HTML steht. Wie du das mit dem URL-Prüftool der Search Console kontrollierst und welche Skriptlösungen mit der Suche zusammenpassen, beschreibt der technische Ratgeber Lazy Loading und SEO. Den Begriff erklärt das Glossar unter Lazy Loading.
Bilder, Video und Karten im Zusammenspiel
Auf vielen Seiten ist das schwerste Element kein Bild, es ist der eingebettete Videoplayer. Ein YouTube-iframe lädt beim Seitenaufruf Skripte, Schriften und das Vorschaubild, auch wenn niemand auf Abspielen drückt. Steht das Video weiter unten, hilft loading="lazy" am iframe. Noch sparsamer ist ein Vorschaubild, das den Player erst beim Klick lädt. Das hat aber einen Haken für die Videosuche, weil Google das Video dann nicht als eingebettetes Video erkennt. Wie du beides abwägst, beschreibt der Ratgeber Video auf der Website einbinden ohne Ladezeitverlust.
So prüfst du deine Seiten
Öffne eine typische Seite, rufe die Entwicklerwerkzeuge des Browsers auf und schau im Netzwerk-Reiter nach den Bildern. Lädt die Seite ohne Scrollen schon alle Bilder, wirkt Lazy Loading nicht, oft wegen fehlender Höhenangaben. Erscheint das große Bild oben erst spät in der Liste, ist es vermutlich verzögert. Im Quelltext siehst du es am Attribut. Teste die Seite außerdem einmal in schmaler Ansicht, denn mobil liegen andere Bilder im ersten Bildschirm.
Für die Messung im Labor zeigt Lighthouse ab Version 6.0 auch das eingebaute Lazy Loading an [1]. Wichtiger als ein einzelner Testlauf sind die Felddaten deiner Besucher, etwa im Bericht zu den Core Web Vitals der Search Console. Wenn du ohnehin an den Bildern arbeitest, nimm dir gleich Größe und Format vor. Der Ratgeber Bilder für Websites optimieren geht die Schritte der Reihe nach durch, und Responsive Bilder mit srcset zeigt, wie jedes Gerät die passende Größe bekommt.
Deine Seite lädt schnell, aber dir fehlt ein Video, das dein Angebot zeigt? Jan produziert bei SEO NW Videos, die zu einer schnellen Website passen, mit Vorschaubild und in Formaten, die sich sauber einbinden lassen. Schreib Jan, was das Video zeigen soll, und er meldet sich mit einem Vorschlag.
- Organisation Browser-level image lazy loading for the web. web.dev, Addy Osmani, Houssein Djirdeh, Mathias Bynens, Barry Pollard. Stand 13.08.2024. abgerufen am 31.10.2026
- Organisation img: The Image Embed element. MDN Web Docs, Mozilla. Stand 11.09.2026. abgerufen am 31.10.2026
- Organisation Fix lazy-loaded content. Google Search Central. Stand 10.12.2025. abgerufen am 31.10.2026
- Organisation The performance effects of too much lazy loading. web.dev, Felix Arntz und Rick Viscomi. Stand 31.03.2022. abgerufen am 31.10.2026
- Organisation Refining WordPress Core's lazy-loading implementation. make.wordpress.org Core, Felix Arntz. Stand 15.07.2021. abgerufen am 31.10.2026
Häufige Fragen
Soll ich alle Bilder lazy laden?
Nein. Bilder, die beim Aufruf sofort zu sehen sind, lädst du ohne Verzögerung, vor allem das größte Bild oben. Alles weiter unten darf mit loading="lazy" warten.
Findet Google lazy geladene Bilder?
Ja, wenn die echte Bildadresse im src steht und das Laden nicht von Scrollen oder Klicken abhängt. Google interagiert nicht mit der Seite. Mit dem URL-Prüftool der Search Console siehst du, welche Adressen im gerenderten HTML stehen.
Brauche ich dafür ein Plugin?
Meist nicht. Das Attribut loading="lazy" verstehen alle aktuellen Browser. Ältere Browser ignorieren es und laden das Bild normal. Viele Systeme setzen das Attribut schon selbst, dann prüfst du nur, ob das oberste Bild davon ausgenommen ist.
Warum lädt meine Galerie trotz Lazy Loading alle Bilder?
Häufig fehlen Breite und Höhe. Ohne diese Angaben sind die Bilder vorläufig 0 mal 0 Pixel groß und liegen scheinbar alle im sichtbaren Bereich. Mit width und height im HTML reserviert der Browser den Platz und lädt erst, wenn es nötig ist.
Funktioniert Lazy Loading auch für Hintergrundbilder?
Das Attribut loading gilt nur für img-Elemente und iframes. Hintergrundbilder aus dem CSS lassen sich damit nicht verzögern.
Video anfragen bei Jan
Schreib Jan, worum es gehen soll. Die Anfrage geht an 301@seo-manager.info, die Abstimmung läuft über SEO NW.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
