Nach meinem letzten Back to Basics Artikel über Page Speed, wollte ich thematisch passend dazu ein weiteres Thema beleuchten, welches leider oft nicht oder im falschen Ausmaß genutzt wird. Lazy Loading.
Was ist Lazy Loading?
Lazy Loading („verzögertes Laden“) ist eine Technik, bei der Bilder, Videos und andere Medien erst dann geladen werden, wenn sie in den sichtbaren Bereich des Nutzers kommen. Das reduziert die initiale Ladezeit und reduziert die Menge an Daten, die beim initialen Laden der Seite übertragen werden müssen.
Vorteile von Lazy Loading
Richtig implementiert führt Lazy Loading zu schnelleren Ladezeiten. Das wiederum führt zu:
- Besserer User Experience**:** Nutzer müssen nicht lange warten, bis Inhalte sichtbar werden.
- Geringere Absprungrate**:** Eine schnellere Seite hält Besucher länger auf der Seite.
- Effizientere Nutzung des Crawl Budgets**:** Googlebot lädt nur die wirklich sichtbaren Elemente.
- Bessere Core Web Vitals als Vorteil im Reranking.
Wie setzt man Lazy Loading richtig um?
Die einfachste Methode ist Lazy Loading (loading="lazy") im HTML zu verwenden. Das sieht dann so aus:
<img src="bild.jpg" alt="Beispielbild" loading="lazy">
Dies funktioniert in den meisten modernen Browsern und wird von Google unterstützt.
Für Videos, iFrames und andere komplexe Inhalte müssen jedoch teilweise JavaScript-Lösungen verwendet werden.
Worauf achten beim Lazy Loading?
Vorsicht bei Above-the-Fold-Elementen:
Wichtige Bilder oder Texte, die direkt beim Laden sichtbar sein sollen, dürfen nicht lazy loaden. Sonst entstehen Layout-Shifts, was schlecht für die Core Web Vitals ist und die Nutzererfahrung negativ beeinflussen kann.
SEO & Indexierung beachten:
Google kann Lazy-Loaded-Inhalte rendern, aber wenn Inhalte durch fehlerhaftes Lazy Loading gar nicht sichtbar werden, treten Indexierungsprobleme auf (und Deine Nutzer:innen werden auch nicht erfreut sein).
Tipp: Teste mit der Google Search Console, ob alle Bilder korrekt geladen werden.
Kompatibilität:
Einige ältere Browser unterstützen kein Lazy Loading, was dazu führt, dass Inhalte nicht korrekt geladen werden oder die Seite nicht richtig angezeigt wird.
Da es beim Lazy Loading also durchaus Fallstricke gibt, hier ein paar Dinge, auf die Du bei der Umsetzung achten musst:
- Sorge für Fallback-Lösungen für Browser, die Lazy Loading oder JavaScript nicht unterstützen.
- Vermeide Lazy Loading für zentrale Ressourcen, die für die Funktion der Seite nötig sind.
- Kontrolliere, ob beim Laden von Bildern Fehler auftreten und behebe diese sofort.
- Versuche den Code für Lazy Loading kurz zu halten, um ihn effizienter zu machen.
Fazit:
Lazy Loading ist ein einfacher Trick, um Ladezeiten zu verbessern. Wer es richtig einsetzt, spart Ressourcen und verbessert die Nutzererfahrung. Wie bei so vielen Dingen im SEO, sollte jedoch nur so viel Komplexität wie nötig eingebaut werden, sonst riskierst Du Fehler.