Performance Optimization

Learning objectives#

• Reduce change detection work with OnPush, signals and zoneless
• Render lists efficiently with track and virtual scrolling
• Load less code with lazy routes and @defer
• Optimise images and watch bundle budgets

Explanation#

Signals tell Angular exactly what changed. Combine them with ChangeDetectionStrategy.OnPush (the default recommendation for new components) so components only update when their inputs or signals change.

Zoneless change detection (provideZonelessChangeDetection()) removes zone.js entirely; Angular updates on signal changes and events instead. It is smaller and faster, and works best with signal-based code.

Lists: always track by a stable id; for thousands of rows use CDK virtual scrolling (cdk-virtual-scroll-viewport) so only visible rows exist in the DOM.

Ship less JavaScript: lazy-load routes, @defer heavy widgets, and avoid large libraries for small tasks.

Images: NgOptimizedImage (ngSrc) adds width/height, lazy loading, priority hints and srcset generation.

Measure: Angular DevTools profiler, Lighthouse, and budgets in angular.json that fail the build when bundles grow too large.

Syntax#

1@Component({ changeDetection: ChangeDetectionStrategy.OnPush, … })
2

3// app.config.ts
4providers: [provideZonelessChangeDetection()]
5

6<img ngSrc="/hero.jpg" width="1200" height="600" priority />

Code example: An OnPush, signal-driven list with optimised images#

1import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
2import { NgOptimizedImage } from '@angular/common';
3

4type Product = { id: number; name: string; price: number; image: string };
5

6@Component({
7  selector: 'app-product-tile',
8  imports: [NgOptimizedImage],
9  changeDetection: ChangeDetectionStrategy.OnPush,
10  template: `
11    <article>
12      <img [ngSrc]="product().image" width="160" height="120" [alt]="product().name" />
13      <h4>{{ product().name }}</h4>
14      <p>₹{{ product().price }}</p>
15    </article>
16  `,
17})
18export class ProductTile {
19  product = input.required<Product>();
20}
21

22@Component({
23  selector: 'app-product-grid',
24  imports: [ProductTile],
25  changeDetection: ChangeDetectionStrategy.OnPush,
26  template: `
27    <input #q (input)="query.set(q.value)" placeholder="Filter" />
28    <p>{{ visible().length }} of {{ products().length }} products</p>
29    <section class="grid">
30      @for (p of visible(); track p.id) {
31        <app-product-tile [product]="p" />
32      }
33    </section>
34    @defer (on viewport) {
35      <p>⭐ Recommendations load only when scrolled into view.</p>
36    } @placeholder {
37      <p>Recommendations</p>
38    }
39  `,
40})
41export class ProductGrid {
42  query = signal('');
43  products = signal<Product[]>(
44    Array.from({ length: 60 }, (_, i) => ({ id: i + 1, name: `Product ${i + 1}`, price: 50 + i * 10, image: `https://picsum.photos/seed/${i + 1}/160/120` })),
45  );
46  visible = computed(() => {
47    const q = this.query().toLowerCase();
48    return this.products().filter(p => p.name.toLowerCase().includes(q));
49  });
50}
51// app.config.ts: providers: [provideZonelessChangeDetection(), provideRouter(routes, withPreloading(PreloadAllModules))]

The grid shows 60 tiles; images below the fold load lazily with fixed sizes (no layout shift). Typing “Product 1” re-filters via a computed signal — only tiles that are added or removed are touched, thanks to track and OnPush. The recommendations section is not loaded until scrolled into view.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Both components use OnPush, so Angular skips them unless an input or a signal they read changes.
2. visible is computed: it recalculates only when query or products change.
3. track p.id lets Angular keep existing tiles instead of re-creating them.
4. NgOptimizedImage enforces width/height and lazy-loads images by default.
5. @defer delays the recommendations code and work until needed.

Real-world use case#

Common mistakes#

Best practices#

• OnPush + signals for all new components
• Consider zoneless for new apps
• Lazy routes, @defer, NgOptimizedImage
• Set and respect bundle budgets

Remember this#

Practice exercise#

1import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
2

3@Component({
4  selector: 'app-cart-total',
5  changeDetection: ChangeDetectionStrategy.OnPush,
6  template: `<p>Total: ₹{{ total() }}</p>`,      // was {{ calculateTotal() }}
7})
8export class CartTotal {
9  items = signal([{ price: 20, qty: 3 }, { price: 60, qty: 1 }]);
10  total = computed(() => this.items().reduce((s, i) => s + i.price * i.qty, 0));   // 120
11}

Mini quiz#

Want more? Practise all Angular MCQs · Angular interview questions

Related topics#

My notes#

Saved in this browser.