<strong>Lazy loading</strong> is deferring the loading of resources (images, components, code) until they're actually needed. It improves initial page load time and reduces bandwidth usage.
The Restaurant Menu Analogy
Restaurants don't cook all dishes upfront. They prepare food when you order it. Lazy loading works the same—load resources when needed, not all at once.
Menu (Page)
What you see first
Food (Resources)
Loaded when ordered
Kitchen (Server)
Prepares on demand
Initial Content
Resource Needed
Just in Time
Page loads
Only above-the-fold content loads
User scrolls down
Images below fold come into view
Trigger loading
Intersection Observer detects visibility
Load resource
Fetch image/component from server
Display content
Show loaded resource to user
Wrong
"Lazy load everything for best performance"
Correct
<strong>Lazy load strategically</strong>. Don't lazy load above-the-fold content or critical resources. Focus on below-the-fold images, heavy components, and routes.
Image-heavy blog:
Without lazy loading: Load all 50 images (10MB, 5s load time)
With lazy loading: Load 5 visible images (1MB, 1s load time)
As user scrolls, load more images on demand
Result: 5x faster initial load, better user experience