Lazy loading defers non-critical resources until needed.
Images:
<img loading="lazy" src="image.jpg" />
Components:
const Chart = lazy(() => import('./Chart'));
<Suspense fallback={<Spinner />}>
<Chart />
</Suspense>
Routes: Load route components only when navigating to them.
When NOT to lazy load:
- Above-the-fold content
- Critical path resources
- Small components (overhead exceeds savings)