Lazy Loading (deutsch: „träges Laden") ist eine Technik, bei der Inhalte einer Webseite — vor allem Bilder, Videos oder iframes — erst dann geladen werden, wenn der Nutzer sie tatsächlich sieht. Statt beim ersten Seitenaufruf alle 30 Bilder zu laden, lädt der Browser zunächst nur die ersten zwei oder drei. Beim Scrollen kommen die weiteren Bilder dynamisch hinzu.
Warum Lazy Loading Sinn ergibt
Auf einer Seite mit vielen Bildern (Onlineshop, Blog, Portfolio) macht der initiale Bilder-Download den Großteil der Ladezeit aus. Lazy Loading reduziert die zu übertragende Datenmenge beim ersten Aufruf drastisch — die Seite ist deutlich schneller interaktiv. Das verbessert direkt die Core Web Vitals (vor allem LCP) und damit das Google-Ranking. Außerdem spart es Datenvolumen — relevant für mobile Nutzer.
So implementierst du Lazy Loading
Seit 2020 unterstützen alle modernen Browser natives Lazy Loading per Attribut: <img src="bild.jpg" loading="lazy" alt="...">. Kein JavaScript, kein Plugin nötig. Für Browser-Kompatibilität in Spezialfällen (alte Safari-Versionen) gibt es JavaScript-Bibliotheken wie lazysizes. WordPress aktiviert Lazy Loading seit Version 5.5 automatisch — die meisten Plugins ebenfalls.
Lazy Loading-Fallen
Wichtig: Bilder im sichtbaren Bereich („above the fold") sollten nicht lazy-geladen werden — das verzögert den LCP-Wert und verschlechtert die Performance-Bewertung. Best Practice: Erste 1–2 Bilder mit loading="eager" oder ohne Attribut, der Rest mit loading="lazy". Ebenfalls falsch: Lazy Loading auf Hintergrundbilder per CSS (geht nicht nativ) oder auf das Logo.