## What is Lazy Loading?
Lazy loading delays loading non-critical resources until they are actually needed. Instead of loading everything upfront, you load content on-demand as users scroll or interact.
Think of a buffet restaurant - they do not cook all dishes at once. They prepare them as customers request, saving time and resources.
## The Problem It Solves
Websites often load resources users never see. A blog post with 50 images loads all 50 immediately, even if readers only see the first two paragraphs. This wastes:
- Bandwidth (users on mobile pay for unused data)
- Time (slow initial load frustrates users)
- Memory and CPU (processing unused resources)
Lazy loading fixes this by loading only what is visible or about to become visible.
## How It Works
**Native Image Lazy Loading**:
```html
<img src="product.jpg" loading="lazy" alt="Product">
```
Modern browsers handle everything automatically - no JavaScript needed. Images load as users scroll near them.
**Component Lazy Loading** (React):
```javascript
const Dashboard = lazy(() => import('./Dashboard'));
```
Users visiting your homepage do not download the admin dashboard code. It loads only when they navigate there.
## Real-World Examples
**Medium/Substack**: Blog platforms lazy load images as you scroll. Articles with 20 images initially load only 3-4 visible ones.
**Amazon/Flipkart**: E-commerce sites lazy load product images. With thousands of products, loading all images would be impossible.
**Facebook/Instagram**: Infinite scroll feeds lazy load posts as you approach the end, creating the illusion of endless content.
## The Benefits
- **Faster Initial Load**: Smaller payload means the page becomes interactive quicker
- **Reduced Bandwidth**: Users consume less data (important for mobile)
- **Better User Experience**: Pages become usable faster
- **Improved SEO**: Google considers page speed in rankings
## Best Practices
**Do Not Lazy Load Critical Content**: Hero images and above-the-fold content should load immediately.
**Use Placeholders**: Show loading skeletons or blurred images to prevent layout shifts.
**Start Loading Early**: Begin loading images slightly before they are visible (100-200px) so they are ready when needed.
## Real Impact
An e-commerce site reduced initial load from 8MB to 2MB by lazy loading product images. Page load time dropped from 12s to 3s on 3G networks.
Lazy loading is not just an optimization - it is essential for modern web performance. Users expect fast, responsive experiences, and lazy loading delivers that.
