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 Angabeeager, 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
<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.
Quellen
- Lazy loading – MDN Web Docsdeveloper.mozilla.org
- HTML Standard, Lazy loading attributes – WHATWGhtml.spec.whatwg.org
- Fix lazy-loaded content – Google Search Centraldevelopers.google.com
- Optimize Largest Contentful Paint – web.devweb.dev
Stand: