Lazy Loading

Lazy Loading is a performance optimization technique used to load content only when it is needed.

Instead of loading everything immediately, lazy loading delays loading of offscreen content.

This helps websites load faster and improves user experience.

Why Lazy Loading Is Important

• Faster initial page loading
• Better website performance
• Reduced bandwidth usage
• Improved mobile experience
• Better Core Web Vitals

[grid] Fast Loading Website Optimized Image Loading Performance Optimization Modern Lazy Loading UI [/grid]

How Lazy Loading Works

Normally:

[code theme="dark"] All images and components load immediately [/code]

With lazy loading:

[code theme="dark"] Content loads only when needed [/code]

Usually when:

• User scrolls near the content
• Component becomes visible
• Route/page is opened

Image Lazy Loading

Modern browsers support native image lazy loading.

[code theme="dark"]

Here:

• Image loads only when near viewport
• Improves initial loading speed
• Reduces unnecessary network requests

[grid] Lazy Loaded Images Optimized Media Loading Fast Scroll Experience Performance Friendly UI [/grid]

React Lazy Loading

React provides built-in lazy loading using:

[code theme="dark"] React.lazy() [/code]

and

[code theme="dark"] Suspense [/code]

Example

[code theme="dark"] import React, { Suspense } from "react"; const Dashboard = React.lazy(() => import("./Dashboard") ); function App(){ return(Loading...}> ); } [/code]

Here:

• Dashboard component loads only when needed
• Reduces initial bundle size
• Improves application performance

Route-Based Lazy Loading

Large applications often lazy load pages/routes.

[code theme="dark"] const About = React.lazy(() => import("./About") ); [/code]

This loads the About page only when the user visits it.

Code Splitting

Lazy loading is commonly used with:

[code theme="dark"] Code Splitting [/code]

Instead of one large JavaScript bundle:

[code theme="dark"] app.js [/code]

React creates smaller bundles loaded when needed.

[grid] React Route Splitting Dynamic Component Loading Optimized Bundle Size Modern React Performance [/grid]

Benefits of Lazy Loading

• Faster initial rendering
• Smaller initial bundle size
• Better mobile performance
• Reduced memory usage
• Improved SEO performance

Common Lazy Loading Use Cases

• Images
• Videos
• React routes
• Dashboard modules
• Large UI components
• Infinite scrolling feeds

Important Notes

• Lazy loading improves performance
• Avoid lazy loading very small components
• Use proper loading fallbacks
• Large applications benefit the most

Common Mistake

[code theme="dark"] const Button = React.lazy(() => import("./Button") ); [/code]

Small components usually do not need lazy loading.

Too much splitting can increase network requests.

Difference Between Normal Loading and Lazy Loading

Final Understanding

[code theme="dark"] Lazy Loading Load content only when needed to improve performance [/code]