Lazy Loading Strategy
Lazy loading reduces unnecessary upfront cost — users should load what they need when they need it.
01 — Purpose
Load what matters, when it matters
Lazy loading reduces unnecessary upfront cost — users should load what they need when they need it.
Not every image, video, or feature block belongs in the first payload. Deferring below-the-fold and optional content speeds initial render — when applied to the right candidates.
See image delivery and performance standard for broader delivery expectations.
02 — Principles
Need-based loading
Lazy loading should improve experience — not delay important content.
- below-the-fold images — defer until near the viewport
- videos and heavy media — load on interaction or when scrolled into view
- secondary content — carousels, comments, related products
- optional functionality — widgets not needed for the primary task
03 — Practice
Good lazy loading strategy
Faster initial rendering, reduced bandwidth, and improved mobile experience.
-
use native
loading="lazy"on images with width and height set — see image delivery - dynamic import for route-level or tab-level JavaScript modules
- Intersection Observer for custom lazy boundaries — with sensible rootMargin
- placeholder or skeleton with reserved space — avoid layout jump when content arrives
- eager-load LCP image and critical above-the-fold assets
04 — Avoid
Lazy loading mistakes
Deferring the wrong things hurts Core Web Vitals and usability.
- lazy loading critical content — hero image, primary CTA, main heading
- delayed primary interaction — core form or checkout script deferred too far
- layout instability — content pops in without reserved dimensions
- lazy loading everything including fonts needed for first paint
- waterfall of tiny lazy chunks — balance splitting with request overhead
05 — Close
Defer with intent
Lazy loading is a scalpel — identify what is truly non-critical first.
Map the critical path for your key templates. Anything not on that path is a lazy-load candidate. Verify with LCP and field data that you did not defer something users need immediately.
See image delivery, JavaScript cost, and Core Web Vitals.