Angular 19 | Chapter 14 | Optimizing Angular Application Performance

 

Optimizing application performance in Angular is crucial to ensure that your app loads quickly, is responsive, and runs smoothly, especially when dealing with large-scale applications. Angular provides many built-in strategies and tools to help you improve performance. Here’s a comprehensive guide on optimizing Angular application performance:

 

🏗️ 1. Use Ahead-of-Time (AOT) Compilation

AOT Compilation compiles your Angular code during the build phase rather than at runtime. It reduces the size of the application bundle and improves the speed of the app by removing unnecessary code.

By default, the Angular CLI enables AOT compilation in production mode with the --prod flag:

ng build --prod

Benefits of AOT:

• Faster rendering: Templates are pre-compiled, which means Angular does not need to compile templates at runtime.
• Smaller bundle size: Unused code is eliminated during the AOT compilation process.

 

🛠️ 2. Tree Shaking

Tree shaking is a technique that removes unused code from the final bundle. Angular’s build system automatically removes unused services, components, and other resources during the build process if they are not referenced anywhere.

This is enabled by default in production builds when you run:

ng build --prod

How to further optimize Tree Shaking:

• Ensure that your code is modular by using ES Modules for import/export.
• Avoid using require statements and use ES6 imports.

 

🌐 3. Lazy Loading

Lazy loading is a technique where you load Angular modules only when they are required, rather than loading the entire application upfront. This significantly reduces the initial load time of your application.

You can configure lazy loading in the Angular router:

const routes: Routes = [
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  }
];

How Lazy Loading Improves Performance:

• Only loads necessary modules when the user navigates to them.
• Reduces the initial bundle size by loading only the critical parts of the application initially.

 

 

 

 

📦 4. Optimize Bundle Size

Bundle optimization involves reducing the size of the JavaScript, CSS, and other assets in the final application build.

Here are several strategies for optimizing bundle size:

• Remove unused imports: Use tree-shaking to eliminate unused code.
• Use Angular CLI's --build-optimizer: Angular's build optimizer removes unnecessary code from third-party libraries to reduce the bundle size.
  ng build --prod --build-optimizer
• Use Webpack's code-splitting feature: This allows you to split your code into smaller bundles that are loaded as needed.
• Minify CSS and JavaScript: This reduces the size of the resources and speeds up loading. Angular does this by default when using ng build --prod.
• Analyze Bundle: Use webpack-bundle-analyzer to inspect the final bundle and identify areas where you can optimize.
  npm install --save-dev webpack-bundle-analyzer

 

🔒 5. Caching & Service Workers

Caching helps your app load faster by storing assets locally in the user's browser. Using Service Workers, Angular can cache assets and enable offline support for your app.

1. Add PWA support to your Angular project:
   ng add @angular/pwa
2. Caching with Service Workers:
• Use ngsw-config.json to configure the caching strategy for different resources.
• Enable caching for assets like images, scripts, and API calls to ensure faster load times.

Benefits:

• Reduce the need for repeated requests to the server.
• Improve loading speed, even in low or intermittent network conditions.

 

⚡ 6. Change Detection Strategy

Angular uses change detection to update the view when the state of the application changes. By default, Angular uses the Default change detection strategy, which checks all components whenever any event or action triggers the change detection process.

Optimize with OnPush Change Detection:

Use OnPush change detection strategy to limit the number of checks performed on a component.

@Component({
  selector: 'app-my-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  @Input() data: any;
}

How OnPush Improves Performance:

• Angular will only check the component when its input properties change or an event occurs inside the component.
• This reduces the frequency of checks, leading to improved performance.

 

 

 

🔄 7. Avoid Memory Leaks

Memory leaks can negatively impact performance over time, especially in single-page applications where components are reused without proper cleanup.

• Unsubscribe from Observables: Always unsubscribe from observables when components are destroyed.
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
• Use takeUntil or async pipe to handle subscriptions in a more declarative way.
  ngOnInit() {
    this.dataService.getData().pipe(takeUntil(this.destroy$)).subscribe((data) => {
      this.data = data;
    });
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
• Destroy Event Listeners: Manually remove event listeners when components are destroyed to avoid memory leaks.

 

🌟 8. Optimize Images and Assets

Large images and media files can slow down the app’s loading time. Consider the following tips:

• Image Compression: Use image compression tools (e.g., TinyPNG) to reduce image sizes.
• Lazy Load Images: Only load images when they enter the viewport (e.g., use the loading="lazy" attribute in <img> tags).
• Use WebP format: WebP images provide better compression compared to PNG and JPEG.
• Responsive Images: Use srcset to load different image sizes based on the user’s device.

 

📊 9. Track Performance with Angular’s Built-In Tools

Angular Profiler:

You can use the Angular Profiler to analyze the performance of your application. This tool helps to identify change detection cycles and potential bottlenecks.

1. Open DevTools in your browser.
2. Go to the Performance tab and record the performance.
3. Look for Angular-specific metrics like change detection cycles and component rendering times.

Lighthouse:

Google’s Lighthouse tool is a great way to analyze and improve the performance of your Angular application. It provides suggestions for optimizing performance, accessibility, and SEO.

 

📝 10. Use Web Workers for Heavy Tasks

Web Workers allow you to run heavy computations in the background without blocking the main UI thread, making your application more responsive.

You can create a web worker for tasks like data processing or large computations:

1. Generate a web worker using Angular CLI:
   ng generate web-worker app
2. Offload tasks to the web worker and handle results using the postMessage and onmessage API.

 

 

🌱 11. Use Angular Universal for Server-Side Rendering (SSR)

Angular Universal allows you to pre-render your application on the server, reducing the time it takes for the user to see content.

This improves First Contentful Paint (FCP) and is especially helpful for SEO and performance optimization in web applications.

1. Install Angular Universal:
   ng add @nguniversal/express-engine

2. Configure SSR and deploy your Angular Universal app on the server to improve performance for users with slower internet connections.

 

🧠 Summary: Angular Performance Optimization Checklist

Optimization Strategy	Description
AOT Compilation	Pre-compiles templates for faster rendering.
Tree Shaking	Removes unused code from the final bundle.
Lazy Loading	Load modules only when needed, reducing initial load time.
Optimize Bundle Size	Minify code, use --build-optimizer, and analyze bundles.
Caching & Service Workers	Use service workers to cache assets for faster loading and offline support.
OnPush Change Detection	Use OnPush strategy to reduce unnecessary change detection checks.
Memory Leaks	Ensure proper unsubscription from observables and cleanup.
Optimize Images	Compress and lazy load images, and use responsive image techniques.
Track Performance	Use Angular Profiler and Lighthouse for performance tracking.
Web Workers	Offload heavy tasks to background threads.
Angular Universal (SSR)	Pre-render the app on the server for better performance and SEO.