Lazy Loading

Lazy Loading verzögert das Laden nicht kritischer Ressourcen – wie Bilder oder Videos – bis sie benötigt werden. Dies reduziert die anfängliche Seitenladezeit und verbessert die wahrgenommene Leistung.

Lazy Loading ermöglicht es Browsern, sich zuerst auf den sichtbaren Bereich („Above-the-Fold“) zu konzentrieren, was sowohl die Nutzererfahrung als auch die Leistungskennzahlen verbessert.

Ein Blog mit ausführlichen Artikeln hat natives Lazy Loading für Bilder implementiert. Die anfängliche Ladezeit sank um 35 %, während die Scroll-Performance flüssig blieb.

Was sollte per Lazy Loading geladen werden?

• Bilder unterhalb des sichtbaren Bereichs („Below-the-Fold“)
• Eingebettete Videos
• Widgets von Drittanbietern

Vermeiden Sie Lazy Loading für Elemente, die den LCP beeinflussen, wie z. B. Hero-Images.

Bewährte Methoden

• Verwenden Sie nach Möglichkeit natives Lazy Loading (loading="lazy")
• Stellen Sie sicher, dass Inhalte crawlbare bleiben
• Testen Sie das Verhalten auf verschiedenen Geräten und Browsern

Lazy Loading sollte die Geschwindigkeit verbessern – nicht Inhalte vor Nutzern oder Crawlern verbergen.

Häufige Probleme bei Lazy Loading

• Lazy Loading von Bildern im sichtbaren Bereich („Above-the-Fold“)
• Blockierung des Content-Renderings
• JavaScript-basiertes Lazy Loading, das von Suchmaschinen nicht verarbeitet werden kann