Lazy loading routes and modules in Angular - Performance & Optimization

Performance: Lazy loading routes and modules

HIGH IMPACT

This affects the initial page load speed by deferring loading of code until needed, improving time to interactive.

Loading Angular application routes efficiently

Angular

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }
];

Modules load only when user navigates to route, reducing initial bundle size and speeding up first paint.

📈 Performance GainReduces initial bundle size by 30-70%; improves LCP by 100-300ms.

Loading Angular application routes efficiently

Angular

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
  { path: 'profile', component: ProfileComponent }
];

All route modules and components load upfront, increasing initial bundle size and slowing first paint.

📉 Performance CostBlocks rendering for 200-500ms depending on app size; increases LCP time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading all routes	N/A	N/A	High initial paint cost due to large bundle	[X] Bad
Lazy loading routes with loadChildren	N/A	N/A	Lower initial paint cost, deferred loading	[OK] Good

Rendering Pipeline

Lazy loading defers module fetching and compilation until route activation, reducing initial parsing and style calculation.

→Network

→Script Parsing

→Style Calculation

→Layout

⚠️ BottleneckScript Parsing and Network loading during initial page load

Core Web Vital Affected

LCP

This affects the initial page load speed by deferring loading of code until needed, improving time to interactive.

Optimization Tips

1Use loadChildren with dynamic imports to lazy load Angular modules.

2Avoid importing lazy modules in the main app module to prevent eager loading.

3Test network requests in DevTools to confirm modules load only on navigation.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy loading Angular routes?

A Reduces initial bundle size and speeds up first contentful paint

B Improves CSS selector matching speed

C Eliminates all JavaScript parsing

D Preloads all images on the page

DevTools: Network

How to check: Open DevTools > Network tab, reload page, filter by JS files, observe which route modules load initially vs on navigation.

What to look for: Smaller initial JS bundle size and additional chunks loading only when navigating to lazy routes.