Lazy Loading

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.

Ein verbreiteter, kontraproduktiver Fehler ist es, wirklich alle Bilder lazy zu laden - auch das große Bild oberhalb der Falz (Hero-Image), das meist das LCP-Element ist. Wird gerade dieses verzögert, verschlechtert sich der Largest Contentful Paint, statt sich zu verbessern. Die Regel lautet daher: sichtbare Above-the-fold-Bilder sofort laden (bei Next.js über die priority-Eigenschaft, nativ via fetchpriority=high), erst alles unterhalb per loading=lazy. Ebenso wichtig gegen Layout-Verschiebungen (Cumulative Layout Shift): Bildern immer width und height oder ein aspect-ratio mitgeben, damit der Browser den Platz reserviert, bevor das Bild geladen ist - sonst springt der Inhalt beim Nachladen.

Lazy Loading gilt nicht nur für Bilder. Über das native loading-Attribut lassen sich auch iframes (etwa eingebettete YouTube-Videos oder Karten) verzögern, die sonst massiv Ladezeit kosten. Auf JavaScript-Ebene heißt das Pendant Code-Splitting: Statt ein riesiges Bundle auszuliefern, lädt dynamic import() bzw. React.lazy() zusammen mit Suspense Komponenten erst bei Bedarf nach - ideal für schwere, selten genutzte Teile wie Chart-Bibliotheken, Modals oder Editoren. Der Intersection Observer, der das viewport-basierte Nachladen ermöglicht, lässt sich auch für eigene Fälle wie Infinite Scroll oder das verzögerte Starten von Animationen nutzen. In Summe ist Lazy Loading eine der wirkungsvollsten und zugleich am einfachsten umzusetzenden Performance-Maßnahmen überhaupt.