Lazy Loading
Abkürzungen / Synonyme: Aufgeschobenes Laden
Kurzdefinition
Das verzögerte Laden von nicht-kritischen Ressourcen (z. B. Bildern) erst dann, wenn sie in den sichtbaren Bereich scrollen.
Ausführliche Erklärung
Lazy Loading lädt nicht sofort sichtbare Ressourcen – vor allem Bilder und iframes – erst dann, wenn sie beim Scrollen in den Viewport kommen. Das reduziert die initiale Datenmenge, beschleunigt das erste Rendern und spart Bandbreite. In modernem HTML genügt das Attribut `loading="lazy"`. Wichtig: Das LCP-Element (z. B. das grosse Hero-Bild above the fold) sollte NICHT lazy geladen werden, da das die Ladezeit-Wahrnehmung verschlechtert.
Beispiel
`<img src="foto.jpg" loading="lazy" alt="...">` lädt das Bild erst, wenn der Nutzer in dessen Nähe scrollt – ideal für Bilder weiter unten auf der Seite.
Im ausführlichen Fachartikel erklären wir Lazy Loading mit Architektur, Praxisbeispielen und Best Practices im Detail: