Lazy Loading ist eine Performance-Optimierungstechnik, bei der Inhalte erst dann geladen werden, wenn sie tatsächlich benötigt werden – typischerweise, wenn der Nutzer zu ihnen scrollt. Statt alle Ressourcen beim Seitenaufruf auf einmal zu laden, werden sie verzögert und bedarfsgerecht nachgeladen.
Funktionsweise von Lazy Loading
Beim klassischen Seitenaufruf lädt der Browser alle Bilder, Videos und Ressourcen sofort – auch wenn sie sich weit unterhalb des sichtbaren Bereichs befinden. Lazy Loading ändert dieses Verhalten: Nur Inhalte im Viewport (sichtbarer Bereich) werden sofort geladen. Inhalte unterhalb werden erst geladen, wenn der Nutzer dorthin scrollt.
Moderne Browser unterstützen natives Lazy Loading über das HTML-Attribut loading="lazy". Für komplexere Szenarien nutzen Entwickler die Intersection Observer API.
Lazy Loading und Performance
Die Auswirkungen auf die Performance sind erheblich:
- Schnellere initiale Ladezeit: Weniger Daten beim ersten Seitenaufruf
- Geringerer Bandbreitenverbrauch: Nur tatsächlich gesehene Inhalte werden geladen
- Bessere Core Web Vitals: Schnellerer Largest Contentful Paint (LCP)
- Reduzierte Serverlast: Weniger gleichzeitige Anfragen
Was kann lazy geladen werden?
Bilder
Der häufigste Anwendungsfall. Besonders bei bildlastigen Seiten wie Portfolios oder Produktübersichten reduziert Lazy Loading die Datenmenge drastisch.
Videos
Eingebettete Videos werden erst geladen, wenn der Nutzer den Bereich erreicht. Das spart besonders viel Bandbreite.
Komponenten und Skripte
In React und Next.js können ganze Komponenten mit dynamic() oder React.lazy() lazy geladen werden. JavaScript-Bundles werden erst heruntergeladen, wenn die Komponente gerendert wird.
Lazy Loading und Above the Fold
Wichtig: Inhalte Above the Fold – also im initialen Sichtbereich – sollten nicht lazy geladen werden. Das Hero-Bild und die Hauptüberschrift müssen sofort verfügbar sein, um einen guten LCP-Wert zu erzielen.
Lazy Loading mit Skeleton Screens
Für eine optimale Nutzererfahrung wird Lazy Loading häufig mit Skeleton Screens kombiniert. Anstelle eines leeren Bereichs zeigt ein Skeleton-Platzhalter die ungefähre Form des kommenden Inhalts – das reduziert die wahrgenommene Ladezeit und verhindert Layout-Verschiebungen.
Implementierung in Next.js
Next.js bietet mit der Image-Komponente automatisches Lazy Loading für Bilder. Bilder werden automatisch in modernen Formaten ausgeliefert und lazy geladen – ohne zusätzliche Konfiguration.
Für professionelles Webdesign ist Lazy Loading eine essenzielle Technik, die die Page Speed verbessert und gleichzeitig die Nutzererfahrung optimiert.