Lazy Loading: Load Resources On-Demand
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.
| Property | Eager Loading | Lazy Loading |
|---|---|---|
| Cons | Larger initial bundle, Slower LCP | Possible interaction delay, Needs fallbacks |
| Pros | No delays on use, Simpler | Faster initial load, Smaller bundle |
| Best For | Above-the-fold critical content | Below-fold, conditional, heavy features |
Eager Loading
Cons
Larger initial bundle, Slower LCP
Pros
No delays on use, Simpler
Best For
Above-the-fold critical content
Lazy Loading
Cons
Possible interaction delay, Needs fallbacks
Pros
Faster initial load, Smaller bundle
Best For
Below-fold, conditional, heavy features
Common questions
- ›“How do you implement lazy loading in a React app?”
- ›“What are the trade-offs of lazy loading?”
- ›“How does native image lazy loading work?”
- ›“When should you lazy load vs eager load?”
What interviewers look for
- Practical use of React.lazy() + Suspense
- Understanding of loading states and error handling
- Knowledge of native vs custom lazy loading
- Connection to Core Web Vitals (LCP/CLS)
Short answer (60 sec)
Use native loading='lazy' for images, React.lazy() + Suspense for components, and Intersection Observer for custom needs. Lazy load everything below the fold while keeping critical content eager.
Detailed answer (senior level)
Lazy loading defers non-critical resources until needed. For images, use loading='lazy' and always set dimensions. In React, use dynamic imports with Suspense and Error Boundaries. Load third-party scripts on interaction or after load. Combine with prefetching for better UX. Always measure impact on LCP and INP.
- Lazy loading above-the-fold / LCP content
- Forgetting loading states and error boundaries
- Not setting image dimensions (causes CLS)
- Lazy loading tiny components (overhead > benefit)
- Ignoring older browser fallbacks
- ✓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
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.