Lazy Loading: Bilder und Videos verzögert laden
Lazy Loading ist eine Technik zur Optimierung der Ladezeit einer Webseite, bei der Inhalte wie Bilder, Videos und Iframes erst dann geladen werden, wenn sie in den sichtbaren Bereich des Benutzers kommen
- SEO & KI-Suche
- Technisches SEO
- 2 Min. Lesezeit
- Aktualisiert am
Inhalt 7 Abschnitte
Lazy Loading bedeutet, dass Bilder, Videos und eingebettete Inhalte erst geladen werden, wenn sie in die Nähe des sichtbaren Bereichs kommen. Die Seite lädt dadurch schneller, und Besucher sparen Datenvolumen – besonders auf dem Smartphone.
So einfach geht es heute
Alle aktuellen Browser beherrschen Lazy Loading direkt, ganz ohne JavaScript:
<img src="tabelle-bussgeld.webp" alt="Bußgeldtabelle" width="800" height="600" loading="lazy">
<iframe src="https://www.youtube-nocookie.com/embed/…" loading="lazy" title="Erklärvideo"></iframe>Das Attribut loading="lazy" genügt. Früher nötige JavaScript-Bibliotheken sind für Bilder und eingebettete Inhalte meist überflüssig.
Die wichtigste Regel: nie das erste Bild
Das größte Bild im sichtbaren Bereich – etwa das Titelbild eines Artikels – darf nicht verzögert geladen werden. Es bestimmt den Largest Contentful Paint (LCP), eine der Core Web Vitals. Wird es „lazy“ geladen, startet es zu spät, und der Wert verschlechtert sich. Für dieses Bild gilt das Gegenteil:
<img src="titelbild.webp" alt="…" width="1200" height="675" fetchpriority="high">Mehr zu den Core Web Vitals im Eintrag zu Pagespeed.
Best Practices
| Regel | Warum |
|---|---|
| Breite und Höhe angeben | Der Browser reserviert den Platz – nichts verschiebt sich beim Nachladen |
| Nur Inhalte unterhalb des sichtbaren Bereichs | Alles, was beim Aufruf sofort zu sehen ist, lädt normal |
| Moderne Formate nutzen | Kleinere Dateien wie WebP laden auch verzögert schneller |
| Eingebettete Videos und Karten verzögern | Sie laden oft große Mengen Skripte von fremden Servern |
| Text nie verzögert laden | Inhalte, die Google finden soll, gehören direkt ins HTML |
Lazy Loading und Google
Das native Lazy Loading mit loading="lazy" versteht Googlebot problemlos. Vorsicht ist bei eigenen JavaScript-Lösungen geboten: Googlebot scrollt nicht und klickt nicht. Inhalte, die erst nach einem Klick oder einer Scrollbewegung nachgeladen werden, sieht Google womöglich nie. Wer JavaScript einsetzt, sollte Inhalte laden, sobald sie in den sichtbaren Bereich kommen – und mit der URL-Prüfung in der Search Console kontrollieren, ob Google sie sieht. Mehr dazu im Eintrag zu JavaScript.
Häufige Fehler
- Titelbild verzögert geladen: verschlechtert den LCP.
- Keine Größenangaben: führt zu Layoutverschiebungen beim Nachladen.
- Inhalte erst nach Klick oder Scrollen: für Google unsichtbar.
- Doppelte Lösungen: natives Lazy Loading plus ein zusätzliches Plugin.
Fazit
Lazy Loading ist heute mit einem einzigen Attribut umgesetzt und eine der einfachsten Maßnahmen für schnellere Seiten. Richtig eingesetzt – für Bilder und Medien weiter unten, nie für das erste große Bild – verbessert es Ladezeit und Nutzererfahrung, ohne Google etwas vorzuenthalten. Mehr Hintergrund im Eintrag zum technischen SEO.
Quellen
Geschäftsführer und Mitgründer von Leadsleader. Verantwortet die Sichtbarkeit unserer Portale in Google und KI-Suchsystemen.
