Angular Performance
⏱️ ~16-minute bite · solve the sandbox to master
5-Year-Old Metaphor
— The physical, real-world picture. No jargon.Angular performance = tuning a sports car. Every optimization targets a different part of the powertrain.
- OnPush = lightweight chassis — less metal to move means faster acceleration. Fewer CD cycles = faster response to user interaction.
- @defer = fuel injector— only burn fuel when the engine actually needs it. Don't load the chart component until the user scrolls to it.
- Virtual scroll = aero kit — reduces drag when pushing through long lists. Constant DOM size = constant performance.
- Lazy loading = pit stop strategy— don't carry spare tyres you don't need yet. Download route chunks on demand.
- Preloading = tyre warmers— heat the tyres in the background so they're ready the instant you need them.
Interactive Sandbox
— Move something, see it react instantly.Performance Score
42/100Core Web Vitals Impact
OnPush tells Angular: only run change detection on this component when its @Input() references change, an event originates within it, or an async pipe emits. Dramatically reduces CD cycles.
| 1 | import { Component, ChangeDetectionStrategy, Input, inject } from '@angular/core'; |
| 2 | import { AsyncPipe, NgFor } from '@angular/common'; |
| 3 | import { Store } from '@ngrx/store'; |
| 4 | import { Observable } from 'rxjs'; |
| 5 | |
| 6 | // ✅ OnPush — Angular skips this component unless: |
| 7 | // 1. An @Input() reference changes (not deep equality — new object/array reference) |
| 8 | // 2. An event fires from within this component |
| 9 | // 3. An Observable bound with async pipe emits a new value |
| 10 | // 4. ChangeDetectorRef.markForCheck() is called manually |
| 11 | @Component({ |
| 12 | selector: 'app-task-list', |
| 13 | standalone: true, |
| 14 | imports: [AsyncPipe, NgFor], |
| 15 | changeDetection: ChangeDetectionStrategy.OnPush, // ← the key line |
| 16 | template: ` |
| 17 | <div *ngFor="let task of tasks$ | async; trackBy: trackById"> |
| 18 | {{ task.title }} |
| 19 | </div> |
| 20 | `, |
| 21 | }) |
| 22 | export class TaskListComponent { |
| 23 | @Input() filter!: string; // OnPush triggers when this ref changes |
| 24 | tasks$: Observable<Task[]> = inject(Store).select(selectFilteredTasks); |
| 25 | |
| 26 | trackById = (_: number, task: Task) => task.id; // stable key for *ngFor |
| 27 | } |
| 28 | |
| 29 | // ❌ Mutation breaks OnPush — NEVER do this with OnPush components: |
| 30 | // this.tasks.push(newTask); // same reference → OnPush won't re-check |
| 31 | // this.task.title = 'new title'; // same reference → change not detected |
| 32 | |
| 33 | // ✅ Always return new references with OnPush: |
| 34 | // this.tasks = [...this.tasks, newTask]; // new array → triggers check |
| 35 | // this.task = { ...this.task, title: 'new title' }; // new object |
| 36 | |
| 37 | // Manual check when needed (e.g., after setTimeout, non-Angular events) |
| 38 | constructor(private cdr: ChangeDetectorRef) {} |
| 39 | onExternalEvent() { |
| 40 | // do work... |
| 41 | this.cdr.markForCheck(); // queue this component for next CD cycle |
| 42 | } |
- →OnPush works with async pipe — the pipe calls markForCheck() automatically when the Observable emits
- →Signals (Angular 16+) are natively OnPush-compatible — components using signals() auto-track dependencies
- →Never combine OnPush with mutable state — the component won't re-render after mutation
Challenge
Explore all 5 performance patterns. Toggle optimizations and watch your Core Web Vitals score climb.
Why Should I Care?
— The exact interview question + the bug it kills.Q: What's the difference between lazy loading and @defer?
Lazy loading is route-level — the chunk downloads when the user navigates to a new route. @defer is component-level within an already-loaded route — the deferred component's chunk downloads based on a trigger (viewport, interaction, timer). Use lazy loading for feature areas; use @defer for heavy below-fold components within a page.
Q: How does trackBy improve *ngFor performance?
Without trackBy, Angular uses object identity (===) to diff the list. Every change triggers full DOM re-creation. trackBy provides a stable key (id field) — Angular only creates/destroys DOM nodes for truly added or removed items, preserving and reusing existing nodes.
Q: What Core Web Vitals does Angular performance most affect?
LCP (Largest Contentful Paint): initial bundle size, lazy loading, @defer, SSR. INP (Interaction to Next Paint): change detection frequency — OnPush, signals, and zoneless Angular are the main levers. CLS (Cumulative Layout Shift): NgOptimizedImage sets explicit dimensions to reserve space before images load.
The Deep Dive
— Spec refs, engine internals, the minutiae.Advanced performance tools, APIs, and the zoneless future:
- 01
@defer trigger types in full: on idle (requestIdleCallback), on viewport (IntersectionObserver), on interaction (click/keydown on placeholder), on timer(ms), on immediate (next tick), when (expression). Combine: @defer (on viewport; prefetch on idle).
- 02
NgOptimizedImage (NgModule: NgOptimizedImage or standalone import): automatic srcset generation, lazy loading by default, priority attribute for LCP images, built-in blur-up placeholders. Replace <img src> with <img ngSrc>.
- 03
Angular DevTools Profiler: records a CD cycle flame chart. See which components ran CD, how long each took, and which triggered re-renders in their children. Available as a browser extension.
- 04
Zoneless Angular: provideExperimentalZonelessChangeDetection() removes Zone.js (~13KB). CD runs only on signal reads and markForCheck() calls. Requires all state to flow through signals or explicit CD triggers — no setTimeout/Promise magic.
- 05
Bundle analysis workflow: ng build --configuration production --stats-json, then npx webpack-bundle-analyzer dist/[project]/stats.json. Look for: third-party libraries in the main bundle, duplicate polyfills, accidentally eager feature modules.
Interview Questions
— Real questions from real interviews — with answers.Lazy loading = route-level chunk (downloads on navigation); @defer = component-level chunk within an already-loaded route.
trackBy provides a stable key so Angular reuses DOM nodes for unchanged items instead of recreating them.
on viewport = below-fold content; on interaction = editor/modal; on idle = proactive prefetch; when = custom condition.
It renders only the visible rows by recycling a fixed window of DOM nodes; all items must have the same fixed height.
Bundle/lazy → LCP; OnPush/signals → INP; NgOptimizedImage → CLS; preloading → subsequent LCP/TTFB.
provideExperimentalZonelessChangeDetection() removes zone.js — but all CD must be explicitly driven by signals or markForCheck().
Memory Game
— Quick quiz — lock the concept in long-term memory.What does provideExperimentalZonelessChangeDetection() require from every component in the app?