Lazy Loading

Was ist Lazy Loading?

Lazy Loading ist eine Webentwicklungstechnik, bei der Ressourcen wie Bilder, Videos und Skripte erst dann geladen werden, wenn sie tatsächlich benötigt werden – typischerweise, wenn der Nutzer zu dem entsprechenden Bereich der Seite scrollt. Anstatt beim initialen Seitenaufruf alle Medien auf einmal herunterzuladen, verzögert Lazy Loading das Laden von Inhalten, die sich außerhalb des sichtbaren Bereichs (Viewport) befinden. Diese Technik reduziert die initiale Ladezeit erheblich, spart Bandbreite und verbessert die Page Speed – ein direkter Ranking-Faktor für SEO und die Core Web Vitals.

Technische Umsetzung

Modernes Lazy Loading wird nativ vom Browser über das HTML-Attribut loading="lazy" unterstützt, das direkt auf <img>– und <iframe>-Elemente angewendet wird. Dies ist die empfohlene Methode, da sie keine zusätzlichen JavaScript-Bibliotheken erfordert. Für komplexere Anwendungsfälle steht die Intersection Observer API zur Verfügung, die erkennt, wann ein Element in den sichtbaren Bereich scrollt und dann das Laden auslöst. CMS-Systeme wie WordPress implementieren Lazy Loading seit Version 5.5 automatisch für alle Bilder. Wichtig ist die korrekte Dimensionierung: Bilder sollten immer width– und height-Attribute erhalten, damit der Browser den Platz reservieren kann und kein Layout Shift (CLS) entsteht. Für Bilder oberhalb des Folds (Above the Fold) sollte Lazy Loading deaktiviert werden, da diese sofort sichtbar sein müssen – andernfalls verschlechtert sich der Largest Contentful Paint (LCP).

Best Practices und häufige Fehler

Die wichtigste Regel beim Lazy Loading lautet: Niemals das Hauptbild oder den Hero-Bereich lazy laden. Bilder im oberen sichtbaren Bereich sollten mit loading="eager" oder fetchpriority="high" priorisiert werden. Für Hintergrundbilder, die über CSS geladen werden, funktioniert das native Lazy Loading nicht – hier muss die Intersection Observer API oder eine JavaScript-Lösung eingesetzt werden. Platzhalter verbessern die User Experience: Verschwommene Vorschaubilder (LQIP – Low Quality Image Placeholders) oder farbige Platzhalter signalisieren dem Nutzer, dass Inhalte nachgeladen werden. Bei der Kombination von Lazy Loading mit einem CDN ist darauf zu achten, dass die Bildoptimierung und das Caching korrekt zusammenspielen.

Relevanz für Webdesign und digitales Marketing

Lazy Loading ist eine der effektivsten Maßnahmen zur Verbesserung der Page Speed und damit ein zentrales Element des technischen SEO. Google bewertet die Core Web Vitals als Ranking-Signal, und Lazy Loading wirkt sich direkt auf den Largest Contentful Paint und den Cumulative Layout Shift aus. Für bildlastige Seiten wie Portfolios, E-Commerce-Shops und Landing Pages kann Lazy Loading die initiale Ladezeit um 50 Prozent und mehr reduzieren. Die daraus resultierende bessere User Experience steigert die Conversion-Rate und senkt die Absprungrate – besonders auf mobilen Geräten mit langsameren Verbindungen, wo Responsive Design allein nicht ausreicht.