🔹 What is Lazy Loading?
Lazy Loading is a design pattern where resources are loaded only when they are needed, instead of upfront.
This improves:
-
Initial load time
-
Performance
-
User experience, especially on slow networks
🔹 Real-World Analogy:
Think of Netflix.
You don’t download the entire season before watching.
You load only the episode you’re about to watch. That’s lazy loading.
🔹 What Can Be Lazy Loaded?
| Resource Type | Example |
|---|---|
| Images | Load only when they come into view |
| Components/Modules | In SPAs like React, load routes/components when needed |
| Scripts/CSS | Defer until specific interaction occurs |
| Data | Load data only when the user navigates to a certain section |
🔹 Lazy Loading in the Browser (Images)
<img src="image.jpg" loading="lazy" alt="..." />Modern browsers handle this natively — no JS required.
🔹 Lazy Loading in JavaScript/Frameworks
In React (Code Splitting):
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
<Suspense fallback={<Loading />}>
<HeavyComponent />
</Suspense>This loads HeavyComponent only when it’s actually rendered.
🔹 Lazy Loading Routes (e.g., React Router)
const About = React.lazy(() => import('./pages/About'));
<Route path="/about" element={
<Suspense fallback={<Loader />}>
<About />
</Suspense>
} />🔹 Benefits:
-
Faster initial page load
-
Saves bandwidth
-
Better experience on mobile or poor networks
-
Breaks up large bundles (especially important in SPAs)