Lazy Loading
Lazy Loading lädt Inhalte (besonders Bilder) erst, wenn sie im sichtbaren Bereich erscheinen - für schnellere initiale Ladezeiten.
Was ist Lazy Loading?
Lazy Loading lädt Inhalte (besonders Bilder) erst, wenn sie im sichtbaren Bereich erscheinen - für schnellere initiale Ladezeiten.
Ausführliche Erklärung
Lazy Loading (verzögertes Laden) ist eine Performance-Technik, bei der Ressourcen erst geladen werden, wenn sie tatsächlich benötigt werden. Am häufigsten bei Bildern eingesetzt: Statt alle 50 Bilder einer Seite beim Laden zu fetchen, werden nur die im Viewport sichtbaren geladen. Weitere Bilder laden erst beim Scrollen - wenn der Nutzer sie tatsächlich sieht.
Die Implementierung ist heute einfach: Das native HTML-Attribut loading="lazy" wird von allen modernen Browsern unterstützt. Für mehr Kontrolle gibt es JavaScript-Libraries wie lozad.js oder die Intersection Observer API. Next.js Image-Komponente implementiert Lazy Loading automatisch mit zusätzlicher Blur-Placeholder-Funktion während des Ladens.
Der Performance-Impact ist erheblich: Eine Seite mit 30 Bildern (je 200KB) würde ohne Lazy Loading 6MB initial laden. Mit Lazy Loading nur die sichtbaren 3-5 Bilder (~1MB). Das verbessert LCP (Largest Contentful Paint) dramatisch und spart mobile Datenvolumen. Lazy Loading ist Best Practice für alle bildlastigen Websites - Portfolios, E-Commerce, Blogs mit vielen Bildern.
Vorteile & Nutzen
- Deutlich schnellere initiale Ladezeit (weniger Initial Payload)
- Bessere Core Web Vitals (LCP) durch priorisiertes Laden
- Reduzierter Datenverbrauch für mobile Nutzer
- Geringere Server-Bandbreiten-Kosten
Verwandte Begriffe
Möchten Sie Lazy Loading in Ihrem Projekt einsetzen?
Unser Expertenteam berät Sie gerne, welche Technologien und Ansätze für Ihr konkretes Projekt am besten geeignet sind.