Child routes and nested routing in Angular - Performance & Optimization

Performance: Child routes and nested routing

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling how much of the UI and components load initially versus on demand.

Loading nested routes in an Angular app

Angular

const routes = [
  { path: 'parent', component: ParentComponent, children: [
    { path: 'child1', loadChildren: () => import('./child1/child1.module').then(m => m.Child1Module) },
    { path: 'child2', loadChildren: () => import('./child2/child2.module').then(m => m.Child2Module) }
  ]}
];

Child routes are lazy loaded only when navigated to, reducing initial bundle size.

📈 Performance GainReduces initial bundle size by tens of KBs, improving LCP and faster initial render.

Loading nested routes in an Angular app

Angular

const routes = [
  { path: 'parent', component: ParentComponent, children: [
    { path: 'child1', component: Child1Component },
    { path: 'child2', component: Child2Component }
  ]}
];

All child components are bundled and loaded upfront even if the user never navigates to them.

📉 Performance CostIncreases initial bundle size by tens of KBs, delaying LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading child routes	More DOM nodes initially	Multiple reflows if many nested components	Higher paint cost due to large initial render	[X] Bad
Lazy loading child routes	Fewer DOM nodes initially	Single reflow on navigation to child	Lower paint cost initially, deferred cost on navigation	[OK] Good

Rendering Pipeline

When using nested routes, Angular first processes the parent route and renders its component. Child routes are loaded either eagerly or lazily. Eager loading bundles all child components upfront, increasing load time. Lazy loading defers child component loading until navigation, reducing initial load and speeding up rendering.

→Network

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and JavaScript Execution due to large initial bundle size when child routes are eagerly loaded.

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling how much of the UI and components load initially versus on demand.

Optimization Tips

1Always lazy load child routes to keep initial bundles small.

2Avoid nesting too many components eagerly to prevent large initial DOM and reflows.

3Use Angular's loadChildren syntax for child route lazy loading.

Performance Quiz - 3 Questions

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

A Reduces initial bundle size and speeds up initial page load

B Increases the number of DOM nodes on initial load

C Triggers more reflows during initial render

D Blocks rendering until all child routes are loaded

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and observe JS bundle sizes and load times. Navigate to child routes and see if additional bundles load on demand.

What to look for: Look for large initial JS bundles indicating eager loading. Lazy loading shows smaller initial bundles and additional bundles loading only on navigation.