# Lazy Loading

Kategorie: [Rendering & JavaScript](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/) › [JavaScript & Frameworks](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/javascript-frameworks/) · Auch genannt: verzögertes Laden

**Lazy Loading** (verzögertes Laden) bedeutet, dass nicht kritische Ressourcen wie Bilder, iframes oder Skripte erst geladen werden, wenn sie gebraucht werden, zum Beispiel wenn sie beim Scrollen in den sichtbaren Bereich kommen. Die Seite startet dadurch schneller und überträgt weniger Daten.

## Umsetzung

MDN nennt mehrere Wege:

- **Das HTML-Attribut `loading="lazy"`** für `<img>` und `<iframe>`. Laut WHATWG-Standard gilt ohne Angabe `eager`, die Ressource wird also sofort geladen.
- **Die Intersection Observer API**, mit der Skripte erkennen, wann ein Element in den Viewport kommt.
- **Code Splitting**, bei dem JavaScript erst bei Bedarf per `import()` nachgeladen wird.

## Lazy Loading und SEO

Google empfiehlt, dass verzögert geladene Inhalte erscheinen, sobald sie im Viewport sichtbar sind. Google nennt das Browser-eigene Lazy Loading, die Intersection Observer API und passende JavaScript-Bibliotheken als geeignete Wege. Laut Google interagiert die Suche nicht mit der Seite. Wer Inhalte erst nach einem Scroll- oder Klick-Ereignis lädt, riskiert, dass sie nie gerendert werden.

Bei Infinite Scroll rät Google zu eigenen, dauerhaften URLs für jeden Inhaltsabschnitt, etwa `?page=12`, und zu Verlinkungen zwischen diesen URLs. Prüfen lässt sich das Ergebnis im URL-Prüftool der Search Console. Im gerenderten HTML sollten die Bilder ein `src`-Attribut haben.

## Häufige Fehler

Das wichtigste Bild im oberen Seitenbereich wird mit `loading="lazy"` markiert. Es soll sofort erscheinen, wird aber erst nach dem Layout angefordert. web.dev rät ausdrücklich davon ab, `loading="lazy"` auf LCP-Bildern zu setzen, da dies die Ladezeit des größten Elements verlängert. Google weist ebenfalls darauf hin, sichtbare Inhalte nicht verzögert zu laden.

## Beispiel

```html
<img src="/galerie-3.jpg" width="800" height="600"
     loading="lazy" alt="Produktansicht von der Seite">
```

Mit `width` und `height` bleibt der Platz reserviert, damit sich beim Nachladen das Layout nicht verschiebt (siehe CLS).

## Häufige Fragen

**Schadet Lazy Loading der Indexierung?** Nicht grundsätzlich, solange der Inhalt ohne Interaktion im gerenderten HTML erscheint.

**Gilt das auch für Videos?** MDN nennt Lazy Loading auch für Videos und Audio. Das `loading`-Attribut wird laut WHATWG für `<img>`, `<video>`, `<audio>` und `<iframe>` definiert.

## Nicht verwechseln

- [Infinite Scroll](https://seo-geo-glossary.com/de/glossar/infinite-scroll/index.md): lädt beim Scrollen fortlaufend weitere Inhaltsblöcke nach. Google rät, jedem Block eine eigene, dauerhafte URL mit fester Seitenzahl zu geben.

## Verwandte Begriffe

- [Largest Contentful Paint (LCP)](https://seo-geo-glossary.com/de/glossar/largest-contentful-paint/index.md)
- [Cumulative Layout Shift (CLS)](https://seo-geo-glossary.com/de/glossar/cumulative-layout-shift/index.md)
- [PageSpeed (Ladezeit)](https://seo-geo-glossary.com/de/glossar/pagespeed/index.md)
- [Infinite Scroll](https://seo-geo-glossary.com/de/glossar/infinite-scroll/index.md)
- [Bild-SEO](https://seo-geo-glossary.com/de/glossar/bild-seo/index.md)

## Quellen

- [Lazy loading – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading)
- [HTML Standard, Lazy loading attributes – WHATWG](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes)
- [Fix lazy-loaded content – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading)
- [Optimize Largest Contentful Paint – web.dev](https://web.dev/articles/optimize-lcp)

---

Stand: 8. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/lazy-loading/