What is Lazy Loading?

Lazy Loading defers loading of resources that are not needed for the initial view until the moment they become relevant. In commerce storefronts it applies to images, iframes, third-party widgets and JavaScript components below the fold. Done well, it dramatically reduces bytes on the critical path and pays directly into LCP and INP.

Definition

For images and iframes, the loading="lazy" attribute is supported natively in all modern browsers and instructs the engine to defer fetches until the resource approaches the viewport. For components, frameworks like Next.js, Nuxt and Remix offer dynamic imports with explicit loading boundaries, often paired with the Intersection Observer API to trigger hydration only when needed. Lazy Loading is conceptually distinct from code-splitting: splitting creates the chunks, lazy-loading decides when to request them. Both work together to control how much first-party-JS reaches the browser at any given moment.

Why it matters

Unbounded eager loading is the most common cause of poor LCP on PLPs and CMS-driven landing pages. A hero carousel that fetches twenty product images upfront, a third-party review widget that ships 300 KB of JS, or a chat bubble that boots immediately all compete for bandwidth and main-thread time. Lazy Loading reclaims that budget for the resources that actually matter on first paint. It also reduces server load, lowers content-delivery-network-cdn egress and improves Core Web Vitals consistency across slow networks. The catch is correctness: lazy-loading the LCP image itself will make the metric worse, so the top-most asset must remain eager.

Use cases

On PLPs, only the first row of product images is loaded eagerly while the rest stream in via native lazy-loading. Reviews, related products, recommendation-engine carousels and social-commerce embeds are deferred until they scroll into view. Chat widgets, ab-testing snippets and personalization scripts can be initialized after idle. In Astro, the islands-architecture treats interactivity itself as something to lazy-load via client:visible directives. Combined with image-optimization pipelines and edge-rendered shells, lazy-loading is one of the cheapest, highest-ROI optimizations a headless team can ship.

Related

Explore Composable Headless Frontend · Performance and Core Web Vitals.