Improving Angular Runtime Performance

Wanna make your Angular app perform faster?

A common Angular performance bottle neck is the runtime performance.

What do I mean?

Things like your app taking a long time to render certain parts or causing the user's browser to freeze.

That's what I'm going to show you today - how to make your Angular app run faster.

So...

What can you do to improve the performance of your Angular application? And fix Angular performance issues?

Aside from hiring an Angular consultant to help you here's the in-depth-guide to improve and optimize your Angular performance and making sure it runs blazing fast.

Every. Single. Time.

This is how to do Angular performance optimizations like a boss.

Why are angular apps slow?

Is it because Angular is a bad framework?

Or because it was poorly engineered by the Angular team from Google?

I surveyed a group of angular Developers and asked them what their biggest frustration with Angular is.

Want to guess what answer got the most votes?

Angular Performance.

Many Angular developers are frustrated with Angular because they say it is slow.

Some think that it’s hard to build a fast Angular application. Especially given that the bundle sizes of its biggest rivals - React & Vue.js - are usually about half as small and take about half the time to parse and run the JavaScript.

So does this mean that your Angular application is just doomed to perform like a turtle?

Nope. Not if you apply what I’ll show you in this article, follow the steps, and put in the work.

Yes buddy, you have to learn how to make your Angular application load faster, run faster and perform faster.

You're an Angular developer and you've gotta learn how to do Angular performance optimizations.

And guess what? React and Vue.js developers also experience leaky, slow applications with their tools as well - don't blame the Angular framework.

So where do you start?

What is the runtime Angular performance problem?

We need to define a few things before we dive into the code of your Angular application.

First, there are two performance bottle-necks that your Angular application might have.

• Angular Load Performance
• Angular Runtime Performance

Angular load performance refers to how long it takes for a browser to download your application, load it into the browser, parse the JavaScript and get it displayed to your user.

Once it’s loaded, the next type of performance is runtime performance. Is your Angular app snappy and fast as users interact with it? Or does it slow down at times? Is it a memory pig? Or is it light and runs faster even on small mobile devices?

And as you’ve probably already guessed, the most common Angular performance issue is in the first option - Angular load performance.

But, no Angular application is immune to runtime performance. Runtime performance is usually caused by not properly unsubscribing from a RxJS observable, binding thousands of elements to a list without using a trackbyFn and overloading the change detection cycle.

Today we’ll discuss how to make sure it performs fast once it’s been loaded.

Getting started: How to measure and profile the performance of your Angular application

The first step in improving the performance of your Angular app is to measure how long it takes to load and bootstrap inside the browser.

Why?

Some developers know that they need to optimize their Angular app but they have no idea how much or where exactly to start. And so they make these wild stabs at the code or build configuration and then refresh the app to see if it appears to load faster than it did before. This kind of optimization approach is nothing but a clown show and deserves every kind of criticism it can get. It's like trying to bake a cake without the necessary measuring cups. Or re-arranging the chairs on the deck of the Titanic before it sank.

So what's the smarter approach?

Measure. Measure. Measure.

Somehow, we as developers don't always notice the extra second or two that will bother the users. At least that's been my experience.

For example, one of my developer buddies is a Django developer. He kept insisting that his Django application was faster than my Angular app.

When we were together he'd pull out a browser and show me just how much faster it was...

And how my Angular application was a turtle compared to his Django stuff...

And on and on and on… until…

We started actually counting the milliseconds by using the browser's developer tool. After profiling the performance of my Angular app vs his Django app we discovered that they were averaging about the same load time.

Which one was faster? I don't remember. 😁

Obviously my friend's internal timer wasn't properly counting and proves why a developer MUST carefully profile the performance of his Angular app and know EXACTLY how many milliseconds it takes to load the thing. By counting the milliseconds that it takes to load your Angular app you will be able to know exactly how much you're improving load speed and performance as you attempt to optimize. Yup, count the milliseconds.

If you're interested, this article will teach you everything you need to know about how to profile the performance of an Angular app.

1. Consider moving away from zone.js change detection

The Angular team has done some amazing work at giving us better change detection optimizations and options.

And one of those is to remove Angular's dependency on zone.js and use things like Angular signals instead.

I've already written an entire post about how to migrate to Angular zoneless if you want a deep dive into whether or not you should do this.

Regardless, there are 3 basic steps to migrating.

The first step is to enable zoneless change detection in your app.config.ts file.

We'll do this by using the provideExperimentalZonelessChangeDetection function from @angular/core like this.

import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes), 
    provideAnimationsAsync(), 
    provideClientHydration()
  ]
};

You notice that it is called experimental.

That is because the zoneless change detection feature is currently marked as experimental in Angular 18.

Regardless, I think that for most Angular applications the initial version of zoneless will be more then enough.

The second step is to remove the zone.js polyfill from our angular.json config file.

So we'll open angular.json and change this...

"polyfills": [
   "zone.js"
],

to this.

"polyfills": [ ],

And the third and last step is to restart our Angular app by running npm start.

And... TADA! 🎉 🎉 🎉

We are officially leaving Zone.js and entering the new future of Angular performance.

2. Use the new control-syntax flow

Especially the new @for loops - they have up to 90% faster runtime performance.

In the older versions of Angular we used the ngFor to loop through an array of items.

Like this.

<table>
    <tr *ngFor="let person of people">
      <td>{{ person.firstName }}</td>
    </tr>
</table>

In Angular 17 and newer we can replace the old ngFor with the new @for block.

<table>
  @for (person of people; track person.firstName) {
    <tr>
      <td>{{ person.firstName }}</td>
    </tr>
  }
</table>

And that is how to use the new control-flow syntax to make your lists perform faster.

3. Monitor the slowness of your HTTP calls.

Maybe a sluggish API server is making your Angular application slow? And if it is, how would you know?

Well, you can use an HTTP interceptor to monitor any slow HTTP calls. Once you've created your HTTP interceptor, use it to monitor how long outbound HTTP requests are taking to complete.

A deeper explanation with lots of examples requires its own article so if you want a complete, step-by-step guide on how to monitor HTTP requests then click here.

4. Consider server-side rendering options

Angular continues to improve it's server side capabilities.

Which gives you the ability to render the web app on your powerful web servers before shipping it to the user.

And with Angular 19 around the corner, hydration is a huge improvement. It keeps getting better.

Plus, it isn't hard to add SSR to an existing Angular project.

Angular is still cool, right?

Angular is a fast evolving framework - which is one of the reasons I enjoy Angular.

It's built by a great group of people that want to know the frustrations Angular developers have. The Angular team has already shed a lot of sweat to improve the performance of Angular applications and we can expect that they'll continue to do so.

Sure, Angular might have a performance quirk, but I still prefer it over some other libraries and frameworks out there.

What do you say?

Is Angular an awesome framework?

And what Angular performance optimizations have worked best for you?

Have a wonderful Angular time.

Daniel Kreider