Definition
Lazy Loading (englisch für „verzögertes Laden") ist eine Technik in der Web-Performance-Optimierung. Dabei werden Bilder, Videos und andere Ressourcen nicht sofort beim Seitenaufruf geladen, sondern erst dann, wenn der Nutzer zu ihnen scrollt, also wenn sie im sichtbaren Bereich des Browsers erscheinen.
Warum ist Lazy Loading wichtig?
Eine durchschnittliche Website lädt 20–50 Bilder. Ohne Lazy Loading werden alle Bilder gleichzeitig geladen, auch die, die sich weit unten auf der Seite befinden und der Nutzer möglicherweise nie zu Gesicht bekommt. Das kostet:
- Ladezeit (besonders auf Mobilgeräten mit langsamem Netz)
- Datenvolumen für den Nutzer
- Server-Ressourcen
Mit Lazy Loading werden nur die Bilder geladen, die tatsächlich sichtbar sind. Die restlichen werden bei Bedarf nachgeladen.
Auswirkung auf Core Web Vitals
Lazy Loading verbessert direkt den LCP (Largest Contentful Paint), weil der Browser weniger Ressourcen parallel laden muss und das wichtigste Element (z.B. das Hero-Bild) schneller gerendert werden kann.
Achtung: Das Bild, das über dem Fold (im sichtbaren Bereich beim ersten Laden) erscheint, sollte nicht lazy geladen werden, das würde den LCP verschlechtern. Lazy Loading gilt nur für Bilder weiter unten auf der Seite.
Wie aktiviert man Lazy Loading?
Nativ im Browser funktioniert Lazy Loading seit 2019 mit einem einfachen HTML-Attribut:
<img src="bild.webp" loading="lazy" alt="Beschreibung">In WordPress aktivieren moderne Themes und WordPress selbst (ab Version 5.5) Lazy Loading automatisch für alle Bilder außer dem ersten. Mit dem Plugin „Smush" oder WP Rocket lässt sich das feinjustieren.
Lazy Loading für iFrames und Videos
Das loading="lazy"-Attribut funktioniert auch für <iframe>-Elemente, z.B. für eingebettete Google Maps oder YouTube-Videos. Das spart bei Seiten mit eingebetteten Karten enorm viel Ladezeit.