❝ In large-scale web applications, loading everything upfront is not an option. Lazy loading—the practice of deferring the loading of non-critical resources until they are needed—is essential for keeping initial load times fast and user interactions smooth. From code splitting to image lazy loading and beyond, this guide covers the most effective strategies to implement lazy loading in modern frontend architectures.❞
We'll explore lazy loading across multiple dimensions: JavaScript modules, routes, components, images, CSS, and even third-party scripts. You'll learn how to implement these patterns in React, Vue, Angular, and vanilla JavaScript, along with performance measurement techniques to ensure your optimizations are working as intended.
As applications grow, the size of the initial JavaScript bundle can balloon to several megabytes. This leads to:
Lazy loading addresses these issues by splitting the application into chunks that are loaded on demand. This can reduce the initial JavaScript payload by 50-80%, directly improving Core Web Vitals like LCP and FID.
Modern bundlers (Webpack, Vite, Rollup) support dynamic imports, which create separate chunks that are loaded only when the import statement is executed.
// Instead of static import
import { heavyFunction } from './heavy-module';
// Use dynamic import
button.addEventListener('click', async () => {
const { heavyFunction } = await import('./heavy-module');
heavyFunction();
});Webpack will automatically split the module into a separate chunk. You can also give chunks explicit names using /* webpackChunkName: "my-chunk" */ comments.
import(/* webpackChunkName: "admin" */ './admin').then(...);The most impactful strategy for SPAs is to lazy load entire pages or routes. Users only download the code for the page they're visiting.
import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
function App() {
return (
<BrowserRouter>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}const routes = [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
},
{
path: '/settings',
component: () => import('./views/Settings.vue')
}
];const routes: Routes = [
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
];Route-based lazy loading is often the biggest win; implement it early in your project.
Sometimes you need to lazy load a component that is not a full route—like a modal, a chart, or a complex form that appears only after user interaction. Use dynamic imports within your components.
import { useState } from 'react';
function Dashboard() {
const [showChart, setShowChart] = useState(false);
const [ChartComponent, setChartComponent] = useState(null);
const handleLoadChart = async () => {
const { HeavyChart } = await import('./HeavyChart');
setChartComponent(() => HeavyChart);
};
return (
<div>
<button onClick={handleLoadChart}>Show Chart</button>
{ChartComponent && <ChartComponent />}
</div>
);
}React's lazy combined with Suspense also works for components:
const HeavyChart = lazy(() => import('./HeavyChart'));
function Dashboard() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(true)}>Load Chart</button>
{show && (
<Suspense fallback="Loading...">
<HeavyChart />
</Suspense>
)}
</div>
);
}Images and videos are often the largest assets. Use the native loading="lazy" attribute for broad browser support (96%+).
<img src="image.jpg" alt="description" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>For more control, implement lazy loading using Intersection Observer:
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));For responsive images, combine with srcset and sizes.
CSS can be render-blocking, so it's crucial to only load critical CSS upfront. You can lazy load non-critical stylesheets by using the media attribute trick or JavaScript.
<!-- Load only for print, then swap to all -->
<link rel="stylesheet" href="print.css" media="print" onload="this.media='all'">
<!-- Or preload and then apply -->
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>For CSS-in-JS solutions, code splitting automatically ensures CSS is bundled with the component chunk.
When dealing with large data lists (thousands of items), rendering all DOM nodes at once causes memory and performance issues. Virtual scrolling renders only the visible items, drastically reducing DOM size and improving scroll performance.
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Item {index}</div>
);
function VirtualList() {
return (
<List
height={400}
itemCount={10000}
itemSize={35}
width={300}
>
{Row}
</List>
);
}Popular libraries: react-window, vue-virtual-scroller, @tanstack/virtual, or native solutions with IntersectionObserver.
Third-party scripts (analytics, chat widgets, social embeds) are often heavy and non-critical. Load them after the main content is interactive, or on user interaction.
window.addEventListener('load', () => {
setTimeout(() => {
const script = document.createElement('script');
script.src = 'https://analytics.example.com/tracker.js';
script.async = true;
document.head.appendChild(script);
}, 3000); // Wait 3 seconds after load
});
// Or use requestIdleCallback
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
// load chat script
});
}For iframe embeds (e.g., YouTube videos), use the loading="lazy" attribute on the iframe.
While lazy loading defers resources, you can also preload critical resources early and prefetch resources that the user might need next.
<!-- Preload hero image -->
<link rel="preload" href="hero.jpg" as="image">
<!-- Preload a font -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Prefetch the next page's JS bundle -->
<link rel="prefetch" href="dashboard.js" as="script">In Webpack, you can add magic comments to prefetch lazy chunks:
import(/* webpackPrefetch: true */ './Dashboard');Preload critical resources, prefetch future resources, and lazy load the rest.
In large apps, you may have features that are only enabled for certain users. Use dynamic imports with feature flags to avoid loading code that will never be used.
async function loadBetaFeature(userId) {
const isEligible = await checkFeatureFlag('beta', userId);
if (isEligible) {
const { BetaComponent } = await import('./BetaComponent');
BetaComponent.mount();
}
}This reduces initial bundle size for most users while still delivering advanced features to the eligible segment.
Next.js supports automatic code splitting per page. For dynamic imports of components:
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('./Heavy'), {
loading: () => <p>Loading...</p>
});Nuxt automatically splits pages. For components:
<template>
<LazyComponent />
</template>
<script>
export default {
components: {
LazyComponent: () => import('./LazyComponent.vue')
}
}
</script>Angular uses lazy loading modules with loadChildren. For component lazy loading, use dynamic imports in a service.
Use Lighthouse, WebPageTest, or Chrome DevTools to measure improvements. Track metrics like:
performance.mark() to log when lazy chunks load.performance.mark('start-load-chart');
import('./Chart').then(() => {
performance.mark('end-load-chart');
performance.measure('chart-load', 'start-load-chart', 'end-load-chart');
console.log(performance.getEntriesByName('chart-load')[0].duration);
});Set up real user monitoring (RUM) to see how lazy loading affects real users.
splitChunks to vendor split.fetchpriority="high" on critical assets.A large e‑commerce site had an initial bundle size of 4.8 MB, leading to a TTI of 6.2 seconds on 4G. After implementing:
The initial bundle was reduced to 1.1 MB, TTI improved to 2.8 seconds, and mobile conversions increased by 18%. The team used Webpack Bundle Analyzer to identify large dependencies and split them effectively.
Browsers are adding more native lazy loading capabilities:
content-visibility: auto – defers rendering of off‑screen elements.fetchpriority attribute to set resource priority.<custom-element loading="lazy"> may come in the future..below-fold {
content-visibility: auto;
contain-intrinsic-size: 1px 5000px; /* placeholder height */
}These new capabilities will simplify lazy loading implementations and improve performance even further.
Lazy loading is not a luxury—it's a necessity for large‑scale web applications. By strategically deferring non‑critical resources, you deliver a faster, more responsive experience that users expect. Start by implementing route‑based lazy loading, then progressively enhance with component‑level lazy loading, image lazy loading, and virtual scrolling. Use monitoring tools to verify improvements and iterate. Your users will thank you with higher engagement and lower bounce rates.
Load what you need, when you need it—and nothing more.