Lazy Loading

Lazy Loading ist eine Technik, bei der Bilder und andere Mediainhalte nicht sofort beim Seitenaufruf geladen werden, sondern erst dann, wenn der Nutzer zu ihnen scrollt. Diese Methode verbessert die initiale Ladezeit einer Seite erheblich, da weniger Ressourcen von Anfang an heruntergeladen werden müssen. Besonders bei Content-Heavy Websites und langen Seiten mit vielen Bildern ist Lazy Loading ein effektives Instrument zur Optimierung der Core Web Vitals, insbesondere des Largest Contentful Paint (LCP).

Technisch wird Lazy Loading durch das native HTML-Attribut loading=“lazy” oder durch JavaScript-Bibliotheken implementiert. Das native Attribut ist einfacher und wird von allen modernen Browsern unterstützt – man fügt es einfach an img- und iframe-Tags an. Der Browser lädt das Bild dann erst, wenn es kurz vor dem sichtbaren Bereich ist. Dies spart nicht nur Bandbreite, sondern reduziert auch die initiale Rendering-Zeit und verbessert das Crawl-Efficiency. Ein Seitenaufruf mit 30 Bildern wird durch Lazy Loading zum Teil deutlich schneller, wenn nur 5-8 davon sofort geladen werden.

Bei der Implementierung sollte beachtet werden, dass Bilder im Above-the-Fold-Bereich (der sofort sichtbare Bereich) nicht lazy-geladen sein dürfen, da dies das LCP verschlechtert. Only Images die unterhalb des Folds platziert sind, sollten lazy-geladen werden. Auch sollte man sicherstellen, dass Lazy Loading nicht die Bildsuche in Google beeinträchtigt – strukturierte Daten und alt-Texte müssen auch bei lazy-geladenen Bildern vorhanden sein. Richtig implementiert ist Lazy Loading eine der wirkungsvollsten Techniken zur Verbesserung der Page Speed, was sich messbar in besseren Rankings widerspiegelt.