Angular Performance

Angular Performance means both how quickly your application loads and how responsive it feels during use.

Angular Performance = Loading perfromance + Runtim perfromance

Loading performance

it determines how quickly your application becomes visible and intractive.

below Technique for Loading performance

1: Lazy-loaded routes

What it does: Defers loading routes components untill navigation, reducing the initial dundle size.

When to use: Application with multiple routes where not all are needed on initial load

2: Deferred loading with @defer

what it does: Split component into seperates bundles to load on demand.

When to use : Components not visible on initial render, heavy third party libraries, below-the-fold content

3: Lazy loading services with injectAsync

what it does: Splits rarely used services chunks and load them on demand

when to use: Services backed by large libraries or infrequently used features

4: Server-side rendering

what it does: Renders pages on the server for faster first paint and better SEO, with hydration to restore interactivity and incremental hydration to defer hydrating section untill needed.

when to use: Content-heavy applications, pages that need search engine indexing

Runtime performance

it determines how responsive your application feels after it loads.

Technique

1: Zoneless change detection

what it does: Remove ZoneJS overhead and triggers change detection only when signal or events indicate a change

When to use it: New applications (default in Angular21+), or exesisting applications ready to migrate

2: Slow computations

what it does: Identifies and optimize expensive template expressions and lifecycle hooks

When to use it: Profilling reveals specific components causing slow change detection cycles

3: Skipping component subtree

what it does: Use OnPush change detection to skip unchanged component trees

When to use it: Application that need finer control over change detction

4: Zone pollution

what it does: Prevents unnecessary change detection caused by third-party libraries or timers

When to use it:Zone-based applications where profiling reveals excessive change detection cycles

What to optimize first

If you are unsure where to start, profile your application first using the Chrome DevTools Angular track to identify specific bottlenecks.

As a general starting point:

Slow initial load — Use @defer to split large components out of the main bundle, NgOptimizedImage to prioritize above-the-fold images, and server-side rendering to deliver content faster.

Slow interactions after load — Check whether zoneless change detection is enabled, look for slow computations in templates or lifecycle hooks, and consider OnPush to reduce unnecessary change detection.