Lazy Loading SEO
Definition: Lazy Loading ist eine Performance-Technik, bei der Ressourcen wie Bilder, Videos und iFrames erst geladen werden, wenn sie im sichtbaren Bereich des Nutzers (Viewport) erscheinen – statt beim initialen Seitenaufruf alle Ressourcen auf einmal zu laden. Für SEO hat Lazy Loading sowohl positive Effekte auf Core Web Vitals als auch potenzielle Risiken für die Indexierbarkeit von Inhalten, die Googlebot möglicherweise nicht lädt.
Erläuterung
Lazy Loading ist eine der wirkungsvollsten Massnahmen zur Verbesserung der Seitenladezeit – und damit direkt relevant für Core Web Vitals und SEO. Die entscheidende Frage: Welche Inhalte sollten lazy geladen werden, und welche nicht? Ein falsch implementiertes Lazy Loading beim LCP-Bild (Largest Contentful Paint) kann den wichtigsten Performance-Messwert erheblich verschlechtern.
Lazy Loading und Core Web Vitals
- Positiver Effekt auf LCP: Bilder ausserhalb des Viewports verzögern nicht mehr den LCP-Wert – das erste sichtbare Bild lädt schneller
- Positiver Effekt auf FID/INP: Weniger JavaScript-Ausführung beim Seitenstart → Browser reagiert schneller auf Nutzereingaben
- Risiko für CLS: Wenn Platzhalter-Dimensionen fehlen, entstehen Layout-Verschiebungen beim Nachladen – immer
widthundheightangeben - Kritisches Risiko beim LCP-Bild: Das Hero-Bild (oft LCP-Element) darf NICHT lazy geladen werden – das verzögert den LCP-Wert erheblich
Natives Lazy Loading vs. JavaScript-basiert
- Natives Lazy Loading:
<img loading="lazy">– direkt im HTML-Attribut; von Google unterstützt und korrekt indexiert; empfohlener Standard - JavaScript-basiertes Lazy Loading: IntersectionObserver-API lädt Bilder bei Viewport-Eintritt; Googlebot führt möglicherweise kein JavaScript aus oder lädt Bilder nicht → Indexierungsrisiko
- Für SEO-kritische Bilder (Produktbilder, Infografiken mit Alt-Text) ist natives Lazy Loading sicherer
- JavaScript-basiertes Lazy Loading für dekorative Bilder ohne SEO-Relevanz weniger problematisch
Was lazy geladen werden sollte – und was nicht
- Lazy Loading empfohlen: Alle Bilder ausserhalb des initialen Viewports (below the fold), eingebettete Videos und YouTube-iFrames, Karteneinbettungen (Google Maps), Kommentar-Sektionen
- Kein Lazy Loading: LCP-Bild (erstes grosses Bild im Viewport); Bilder im Header-Bereich; kritische Ressourcen für initiales Layout
- LCP-Bild explizit priorisieren:
<img fetchpriority="high" loading="eager">oder<link rel="preload" as="image">
Lazy Loading korrekt implementieren
- Immer
widthundheight-Attribute setzen: verhindert Cumulative Layout Shift (CLS) - Natives Attribut:
<img src="bild.webp" loading="lazy" width="800" height="600" alt="Beschreibung"> - LCP-Bild identifizieren: PageSpeed Insights oder Chrome DevTools → Performance-Tab zeigt LCP-Element
- Preload für LCP-Bild:
<link rel="preload" as="image" href="hero.webp">im HTML-Head - Nach Implementierung: Lighthouse und PageSpeed Insights prüfen ob LCP-Wert sich verbessert hat
Googlebot und Lazy Loading
- Natives Lazy Loading (
loading="lazy") wird von Googlebot korrekt behandelt – Bilder werden indexiert - JavaScript-basiertes Lazy Loading: Googlebot rendert JavaScript, aber nicht mit garantierten Scroll-Events
- Kontrolle über Google Search Console URL-Inspektion: Prüfen ob lazy geladene Bilder im gecrawlten HTML sichtbar sind
- Für SEO-kritische Bilder (Produktfotos, Infografiken) auf natives Lazy Loading setzen
loading="lazy"), aber identifizieren Sie zuerst das LCP-Element Ihrer Seite mit PageSpeed Insights und markieren Sie es mit fetchpriority="high" statt Lazy Loading. Fügen Sie zudem immer width und height-Attribute ein um CLS-Verschiebungen zu verhindern. Diese Kombination verbessert typischerweise sowohl LCP als auch CLS – zwei der wichtigsten Core-Web-Vitals-Metriken mit direktem SEO-Einfluss.