Top 10 Performance Improvement Techniques for an Angular App

Angular is a powerful framework for building complex web applications, but performance issues can arise if best practices are not followed. Optimizing an Angular app ensures smooth user experience, faster load times, and better scalability. In this article, we will explore the top 10 performance improvement techniques for Angular apps, complete with explanations and code snippets.

1. Use OnPush Change Detection Strategy

By default, Angular uses the Default change detection strategy, which checks for changes across the entire component tree. Instead, use OnPush to reduce unnecessary change detection cycles.

import { ChangeDetectionStrategy, Component, Input } from "@angular/core";

@Component({
  selector: "app-optimized",
  template: `<p>{{ data }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OptimizedComponent {
  @Input() data!: string;
}

This tells Angular to check for changes only when the @Input() reference changes, improving performance.

2. Lazy Load Modules

Loading all modules at once slows down the application. Implement lazy loading to load modules only when required.

const routes: Routes = [{ path: "feature", loadChildren: () => import("./feature/feature.module").then((m) => m.FeatureModule) }];

This ensures that the feature module is loaded only when the user navigates to it.

3. Optimize Change Detection with trackBy in ngFor

Using trackBy in *ngFor prevents Angular from recreating DOM elements unnecessarily.

<li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>

trackByFn(index: number, item: any): number {
  return item.id;
}

This ensures that only modified elements are updated in the DOM, reducing re-renders.

4. Use Pure Pipes Instead of Methods in Templates

Avoid calling functions inside templates as they are executed on every change detection cycle.

Instead of:

<p>{{ getFormattedDate() }}</p>

Use a pure pipe:

@Pipe({ name: "formatDate", pure: true })
export class FormatDatePipe implements PipeTransform {
  transform(value: Date): string {
    return new Intl.DateTimeFormat("en-US").format(value);
  }
}

<p>{{ date | formatDate }}</p>

5. Optimize DOM Rendering with Virtual Scrolling

For large lists, use Angular’s cdk-virtual-scroll-viewport to render only visible elements.

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items">{{ item.name }}</div>
</cdk-virtual-scroll-viewport>

This drastically improves performance when dealing with long lists.

6. Use Web Workers for Heavy Computation

Move CPU-intensive operations to a Web Worker to prevent UI blocking.

Create a new worker:

const worker = new Worker(new URL("./app.worker", import.meta.url), { type: "module" });
worker.onmessage = ({ data }) => {
  console.log(`Worker result: ${data}`);
};
worker.postMessage("start computation");

This allows expensive computations to run in the background.

7. Minimize Bundle Size with Tree Shaking

Tree shaking removes unused code, reducing the bundle size. Ensure that you:

• Use ES6 imports (import { something } from 'package')
• Avoid importing entire libraries (e.g., import * as _ from 'lodash')

Angular’s production build (ng build --prod) automatically enables tree shaking.

8. Enable Ahead-of-Time (AOT) Compilation

AOT compilation precompiles Angular HTML and TypeScript during the build process, improving runtime performance.

Enable AOT in angular.json:

"angularCompilerOptions": {
  "enableIvy": true
}

And build with:

ng build --aot

9. Optimize HTTP Calls with Caching and RxJS Operators

Reduce unnecessary API calls using caching with shareReplay.

import { HttpClient } from "@angular/common/http";
import { map, shareReplay } from "rxjs/operators";

this.data$ = this.http.get("/api/data").pipe(shareReplay(1));

This caches the response and avoids redundant network requests.

10. Optimize Images and Assets

Compress images, use lazy loading, and serve assets efficiently:

• Use .webp instead of .png or .jpg

• Enable lazy loading for images:

  <img src="image.webp" loading="lazy" alt="Optimized Image" />
  

  Copy

• Use a CDN to serve static assets faster

Conclusion

Performance optimization in Angular requires multiple strategies, from fine-tuning change detection to reducing bundle sizes. By implementing these techniques, your Angular application will load faster, perform better, and provide a seamless user experience.