Lazy Loading: Load Resources On-Demand
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
Lazy loading defers non-critical resources until they are needed. It improves initial load performance, reduces bandwidth usage, and boosts Core Web Vitals (especially LCP and CLS). Apply it to images, components, and third-party scripts.
Instead of unloading the entire truck (all resources) at the front door immediately, the driver only brings items when you actually need them — hero image first, then below-fold content, heavy components only when you open the door (interact/scroll).
1Native Image Lazy Loading
Use the loading='lazy' attribute. Modern browsers handle it automatically. Always set explicit width/height to prevent CLS.
<img src="hero.jpg" loading="eager" width="1200" height="600" alt="Hero"> <img src="below-fold.jpg" loading="lazy" width="800" height="500" alt="Content">
2React Component Lazy Loading
Use React.lazy() + Suspense for heavy components like modals, charts, and editors.
3Intersection Observer & Custom Strategies
For advanced control, use Intersection Observer to load content when it approaches the viewport.
4Third-Party Scripts & Advanced Patterns
Load analytics, chat widgets, and maps after page interactive or on user interaction.
- ✓Lazy load everything below the fold for better LCP
- ✓Use native loading='lazy' for images
- ✓React.lazy() + Suspense is the standard for components
- ✓Always provide meaningful fallbacks and error handling
- ✓Combine with prefetching on hover for smoother UX
- ✓Measure before and after with real-user metrics