Was ist Lazy Loading?

Lazy Loading vertagt das Laden von Ressourcen, die für die initiale Ansicht nicht nötig sind, bis sie tatsächlich gebraucht werden. In Storefronts betrifft das Bilder, iframes, Drittanbieter-Widgets und JavaScript-Komponenten unterhalb des Folds. Gut umgesetzt reduziert es die Bytes im Critical Path drastisch und schlägt direkt auf LCP und INP durch.

Definition

Für Bilder und iframes wird loading="lazy" nativ in allen modernen Browsern unterstützt und weist die Engine an, Fetches bis zur Annäherung an den Viewport zu verzögern. Für Komponenten bieten Frameworks wie Next.js, Nuxt und Remix dynamische Importe mit expliziten Loading-Boundaries, oft kombiniert mit der Intersection-Observer-API, sodass Hydration erst bei Sichtbarkeit ausgelöst wird. Lazy Loading ist konzeptionell verschieden von code-splitting: Splitting erzeugt die Chunks, Lazy Loading entscheidet, wann sie angefragt werden. Beides zusammen steuert, wie viel First-Party-JS zu welchem Zeitpunkt im Browser landet.

Warum es zählt

Ungebremstes Eager Loading ist die häufigste Ursache schlechter LCP-Werte auf PLPs und CMS-getriebenen landing-page-Layouts. Ein Hero-Carousel mit zwanzig vorgeladenen Bildern, ein Review-Widget mit 300 KB JS oder eine sofort startende Chat-Bubble konkurrieren um Bandbreite und Main-Thread-Zeit. Lazy Loading gibt dieses Budget den Ressourcen zurück, die beim First Paint zählen. Es senkt zugleich Serverlast, content-delivery-network-cdn-Egress und stabilisiert die Core Web Vitals auf langsamen Netzen. Wichtig: Wer das LCP-Bild selbst lazy lädt, verschlechtert die Metrik - das oberste Asset muss eager bleiben.

Anwendungsfälle

Auf PLPs werden nur die ersten Produktbilder eager geladen, der Rest streamt nativ via lazy-loading nach. Reviews, Related Products, recommendation-engine-Carousels und social-commerce-Embeds werden bis zum Scroll ins Viewport vertagt. Chat-Widgets, ab-testing-Snippets und personalization-Skripte starten nach Idle. In Astro behandelt die islands-architecture Interaktivität selbst als Kandidat fürs Lazy-Loading via client:visible. In Kombination mit image-optimization-Pipelines und edge-gerenderten Shells ist Lazy Loading eine der günstigsten Optimierungen mit höchstem ROI für Headless-Teams.

Verwandt

Mehr dazu: Composable Headless Frontend · Performance and Core Web Vitals.