Was ist Lazy Loading?
Lazy Loading heißt wörtlich „faules Laden“. Gemeint ist: Die Website lädt nicht alles auf einmal, sondern nur das, was der Besucher gerade braucht. Bilder, Videos und eingebettete Inhalte weiter unten kommen erst, wenn er in ihre Nähe scrollt.
Das spart zwei Dinge: Zeit beim ersten Aufruf und Datenvolumen. Wer nach dem ersten Bildschirm wieder geht, hat die zwanzig Produktfotos weiter unten nie heruntergeladen. Lazy Loading ist kein Turbo, sondern eine Reihenfolge: das Wichtige zuerst, der Rest später.
Bilder sind dabei der größte Hebel. Laut HTTP Archive sind sie auf den meisten Websites der häufigste angefragte Dateityp — die schwersten zehn Prozent der Seiten schicken über 5 MB an Bildern.
So funktioniert verzögertes Laden
Beim nativen Weg steht im Bild-Tag ein einziges Attribut. Der Browser entscheidet dann selbst, ab welchem Abstand zum sichtbaren Bereich er das Bild holt. Er wartet nicht, bis es im Bild ist, sondern fängt rechtzeitig vorher an.
Chrome lädt ab
Abstand
Schnelles Netz (4G)
1.250 px
Langsames Netz (3G)
2.500 px
Diese Werte gelten seit Juli 2020 (web.dev). Bei langsamer Verbindung fängt Chrome also früher an. In einem Test von Google auf Android waren bei 4G 97,5 % der Lazy-Bilder innerhalb von 10 Millisekunden nach dem Sichtbarwerden fertig — der Besucher merkt davon nichts.
Das Attribut gilt für Bilder und iframes und ist in allen großen Browsern angekommen; MDN führt es seit März 2022 als „Baseline“, also breit verfügbar. Ein Hinweis aus der MDN-Doku: Ist JavaScript im Browser abgeschaltet, laden auch Lazy-Bilder sofort.
Was macht WordPress automatisch?
Wenn du WordPress nutzt, hast du Lazy Loading längst — ohne Plugin:
- Seit WordPress 5.5 (2020): alle Bilder mit Breite und Höhe bekommen „loading="lazy"“.
- Seit 5.7 (2021): auch iframes, also etwa eingebettete Videos und Karten.
- Seit 6.3 (2023): WordPress markiert das vermutlich größte Bild oben mit „fetchpriority="high"“, damit es zuerst lädt.
Der letzte Punkt zeigt Wirkung: 2024 setzten 15 % der mobilen Websites diese Priorität auf ihr wichtigstes Bild, 2022 waren es 0,03 %. Den Sprung führt der Web Almanac auf WordPress zurück.
Beispiele aus der Praxis
Zwei Messungen von Google zeigen, wie viel Lazy Loading spart — und wo es kippt.
Case A · Blog-Archiv
WordPress-Testseite, mobil
172 KB
Bilder mit Lazy Loading
378 KB
Bilder ohne
Lazy Loading spart hier über die Hälfte der Bilddaten
Aber: Das große Bild oben kam mit Lazy Loading später. Erst mit „erstes Bild nicht lazy“ war die Seite schneller als in beiden Varianten.
Case B · Einbettungen
YouTube-Video weiter unten
≈ 500 KB
gespart je YouTube-Embed
10 s
schneller bedienbar (chrome.com)
Eingebettete Videos sind der dickste Brocken
Bei chrome.com wurde die Seite durch lazy geladene YouTube-Videos 10 Sekunden früher bedienbar.
Die Werte für Case A stammen aus einem Test von Felix Arntz und Rick Viscomi (web.dev, 2022) mit dem Theme Twenty Twenty-One — eine einzige Testseite, also eine Größenordnung, kein Versprechen.
Häufige Fehler
Fehler 1 · Das Hero-Bild lazy laden
Das große Bild oben ist meist das Element, nach dem Google die Ladezeit misst (Largest Contentful Paint). Lädt es verzögert, wird die Seite langsamer, nicht schneller. Googles Ansage auf web.dev ist eindeutig: dieses Bild nie lazy laden. Trotzdem machten es 2024 noch 16 % der mobilen Seiten.
Fehler 2 · Keine Breite und Höhe angeben
Ohne Maße weiß der Browser nicht, wie viel Platz er freihalten muss. Der Text springt, wenn das Bild nachkommt — schlecht für die Nutzer und für Core Web Vitals. Laut MDN kann ein Lazy-Bild ohne Maße im schlimmsten Fall sogar gar nicht laden.
Fehler 3 · Laden erst bei Scrollen oder Klick
Manche JavaScript-Lösungen laden Inhalte erst, wenn der Besucher scrollt oder klickt. Google scrollt und klickt aber nicht. Google Search Central schreibt dazu wörtlich: „Google Search does not interact with your page“. Was nur nach Interaktion erscheint, sieht Google womöglich nie.
So setzt du es richtig ein
- Erster Bildschirm normal laden: Logo, Hero-Bild und alles oben ohne Lazy Loading, das wichtigste Bild mit „fetchpriority="high"“.
- Alles darunter lazy: Bilder, Videos, Karten, Social-Embeds.
- Immer Breite und Höhe im Bild-Tag mitgeben.
- Prüfen statt glauben: PageSpeed Insights zeigt, ob dein größtes Bild verzögert lädt; die URL-Prüfung der Google Search Console zeigt, ob Google deine Bilder im gerenderten HTML findet.
Häufige Fragen
Ist Lazy Loading schlecht für SEO?
Nein, wenn es richtig gebaut ist. Google unterstützt das native Attribut und den Intersection Observer. Problematisch sind Lösungen, die erst auf Scrollen oder Klicks reagieren, und ein verzögertes Hero-Bild, das die Ladezeit verschlechtert.
Brauche ich in WordPress ein Plugin für Lazy Loading?
In der Regel nicht. WordPress lädt Bilder seit Version 5.5 und iframes seit 5.7 automatisch verzögert und lässt das erste große Bild aus. Ein Plugin lohnt sich nur, wenn es mehr kann, etwa Hintergrundbilder oder Videos durch Vorschaubilder ersetzen.
Sollte ich das erste Bild lazy laden?
Nein. Alles, was der Besucher sofort sieht, lädt normal. Das wichtigste Bild bekommt zusätzlich eine hohe Priorität. Lazy Loading lohnt sich erst unterhalb des ersten Bildschirms.
Funktioniert Lazy Loading auch für YouTube-Videos?
Ja, über das Attribut am iframe. Gerade dort lohnt es sich: Ein YouTube-Embed bringt laut web.dev rund 500 KB mit, die ohne Lazy Loading jeder Besucher lädt — auch wenn er nie bis zum Video scrollt.
Was ist der Unterschied zwischen Lazy Loading und fetchpriority?
Sie sind Gegenstücke. Lazy Loading schiebt Unwichtiges nach hinten, fetchpriority holt Wichtiges nach vorn. Zusammen sorgen sie dafür, dass der Browser die Reihenfolge lädt, die der Besucher wirklich braucht.
