50+ Angular Performance Tips from
the Pros

One thing that helped me understand performance better was to think of it like a ladder you can climb based on the needs of your app. It's easy to get overwhelmed thinking you need to fine tune everything, but do you really need that based on the number of users and requests you have? Maybe you could eliminate most of your performance issues with some of the lower rungs of the ladder like onPush change detection, lazy loading, and the async pipe. You may not need the stuff at the top of the ladder until your app has scaled up.

Test it, don't guess it.

Make sure you know what performance metric (e.g. load vs runtime vs perceived) you are actually looking to improve and MEASURE IT as it stands today. Without a clear focus and ongoing measurements you are flying blind and your work in the name of performance could just as easily have a negative overall impact on your app!

Don’t optimize until you’ve analyzed!

I’ve seen people blindly apply optimizations without understanding what’s really affecting their performance. Like their site might take 20 seconds to load, so they say “let’s do pre rendering” without really knowing if pre-rendering will help or hurt them.

And there are usually some obvious things they’re doing wrong if they would just analyze (do some profiling, check your bundles for unintentional code being included, check the network tab)

Set your maximum bundle budgets in Angular CLI, and make sure your build _fails_ if you break them. Also, learn to use Chrome Dev Tools to profile your code. Your micro optimizations probably aren't saving you a ton. Track down what's really going on.

Measure before you spend any time on any improvements
1) Maybe it doesn't need any improvements :) If the change is less than 20% then your users might not even notice
2) After analysis you'll be able to guess-timate where the best bang for your buck is
3) It will help you determine the effectiveness of your changes

Watch the browser network tab; sort by size after loading and see what’s on the wire that is unexpectedly big or unnecessary. Images, CSS, and JS are often culprits. This tip is quick and easy.

Leverage the simplicity of Perfume.js to monitor the First Contentful Paint for all your users. Make sure your FCP is less than 2s not only in US or Europe but also everywhere your audience lives. And remember that FCP is also one of the Signal used by Google Page Rank to improve the score of your Mobile SEO.

I would say if you want to improve perf you first need information. Tools like Webpack Bundle Analyzer and Lighthouse will help you hone in on where you can optimize your app. I also did a talk at ngBe called “Need for Speed” about performance.

First, you must find a way to measure your current performance. Then, use this tool to get a base line you can compare with the results of your tuning activities. A widely used tool for this is Google’s Lighthouse plugin for Chrome. Also, define what you want to tune (startup performance, data binding performance) and what your performance goals are.

While Angular provides several knobs for fine tuning (AOT, OnPush, lazy loading) there are some lesser known ideas, e. g. ngx-quicklink and guess.js. They provide advanced preloading strategies which try to only load the lazy chunk needed next.
It’s also a good idea to inspect your bundles from time to time to make sure they only contain the code you need. For this, you can use the webpack-bundle-analyzer for instance.

Even though Angular provides lots of features for performance tuning, don’t forget about traditional approaches like lazy loading pictures, inlining scripts and styles, or critical path rendering.

In general, it’s a good idea to enforce best practices making sure your performance goals are also met in future and to find out immediately if they are endangered. Performance Budgets supported b the CLI but also linting rules come in handy here.

Angular itself is really fast! The angular team is continuously improving the core framework and the tooling so we can have fast and performant apps. There are though some edge cases where we might need to tweak and fine tune our apps at run time or build time. In this case, my advice would be to start off by measuring and gathering some data, then decide if there is a need to apply some of the techniques we have listed on angular.io. However, one thing that I highly recommend teams who are working on very large apps and who may be experiencing longer build times, is to try out our new build tool based on Bazel: a highly distributed orchestration build and test tool. This new tool is currently in preview mode and has been integrated in the CLI version 8.

Don't be blind. Monitor your actual app performance in the wild using the window.performance object that is available in the majority of the browsers. You should look at metrics such as time to first meaningful paint or time to first interaction, as well as the amount and length of long JavaScript tasks - tasks that block the main thread for 50 ms, and can cause janky animations and low UI responsiveness. Some of these metrics are already tracked by existing analytics solutions (such as Google Analytics).

Don't just look at the average of these numbers - look at the lower percentiles. How are the bottom 10% of your users are experiencing your app? Do they get an acceptable experience?

Learn more about Performance APIs in MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Performance_Timeline
https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API

After you measured, these I found to be the most beneficial:
1) If Time to FMP (First Meaningful Paint) is the issue, consider lazy-loading
2) If long lists are causing sluggish app responses - use OnPush and reduce the number of Dom Nodes with virtual lists (Material CDK has Virtual Scrolling)

Do fewer things on a single screen or component. Humans are single threaded so you rarely need to offer thousands of features at once, so you probably don't need to load a ton of features at once, and can instead lazy load them.

I think the best thing you can do to help performance is to lazy load modules. It sounds simple, but especially as apps get larger the amount of code initially downloaded is much smaller as a result.

Lazy load your routes, generate smaller bundle size. In Angular CLI version 8.1, we can scaffold lazy load route by running command. Easy!

Lazy load whatever you can.

Use modules and lazy load!

Use code-splitting ✂️

The one thing I will say for performance is lazy load all things.

1) Cache data in the client when feasible.
2) Use lazy loading.

Here are 2 (breaking the rules...I'm a rebel 😀). 1. Plan your modules appropriately so you can leverage lazy loading. Use a bundle analyzer to check what's in your lazy loaded and eager loaded bundles/chunks. 2. Replace function calls in templates with pipes as appropriate (especially if you're calling a function in an *ngFor template).

Lazy load where it makes sense and manage the bundle sizes efficiently.

As long as the full app does not weight more than 10Mb, I'd suggest lazy loading parts of the application, and then setting the pre-loading strategy to true.

Lazy loading modules and OnPush state management, but also: don't be afraid to use performance "sleight of hand" tricks like optimistic updates!

Avoid iterating over a result from a function, meaning let item of getItems().

Blame the backend?

Sometimes we tend to put too much logic in our templates and end up with complex expressions. One way to solve this, is to put that logic in a function on the component class. But be aware, this function is still called for every change detection cycle. My performance tip would be to use a **pure pipe** instead, because a pipe always remembers its previous value and only executes the transformation if the value has changed. This works great for primitive values. For objects, however, you have to change the object reference and work immutable.

Don't forget perceived performance! Besides all the common and well-known techniques that focus on raw figures. I'd recommend you to spend some time focusing on user psychology. These improvements focusing on immediate feedback and animations will not only make your app feel snappy but also fill your users with delight.

One of the lowest hanging fruits when optimizing your Angular app is to add `trackBy` when using `*ngFor`. It minimizes the creation of new DOM elements when identities change. Remember, many tiny changes can have huge benefits over time!

Try to leverage native browser behaviors and semantic elements whenever possible rather than assuming that wrapper components or custom features are automatically worth the overhead.

If you use observables properly you can easily adopt onPush for your complete app, which makes your app super performant!

Utilize observables and set change detection to ‘OnPush’.

Use OnPush strategies and build reactive view components with separate business logic. Architect to push data [to views] only when distinct state has changed.

I develop enterprise applications with Angular and the main thing I use to improve the runtime performance is minimizing the change detections. By overriding the default change detection strategy to onPush, will tell Angular to run change detection only when input changes.

Learn well how the Component Lifecycle works in Angular, I wrote more about it here: https://medium.com/@zizzamia/the-secret-life-cycle-of-components-ee180a9a42bb

OnPush is a means of controlling how often change detection runs.

Times have changed. Performance improvements in Angular are much different than they used to be in AngularJS. The best way I have found to improve performance in Angular is by focusing on using Reactive Programming. By leveraging RxJS to the max, your app begins to scream with speed. You can then tell your Angular components to be faster. Because your code is reactive, your components no longer need to run change detection every time something async happens in the browser. The reactive code flows allow Angular to tie into a different change detection pattern, which means that it can perform those CD checks much less often. This is a huge performance increase that only grows over time as you reactively program more and more of your Angular components.

AOT is a win/win/win. It provides faster startup, optimized component rendering, and it helps developers avoid some run-time performance issues. You can read all about it and other run-time performance tips here: https://blog.oasisdigital.com/2017/angular-runtime-performance-guide/

Use services to cache data! Create an Angular service that is responsible for retrieving and storing data that is reused in your application. The data stored in the Angular service can be exposed to the rest of the application via a function that returns an Observable. Whenever the data is needed by a component, the data can be quickly retrieved from the service rather than making an extra API call to the server. This will help performance and help reduce user data use!

Cache the results of HTTP requests where possible. Often times we subscribe to the same data set from more than one place and if we cache that we eliminate multiple unnecessary HTTP calls for the same data.

Your Angular app is a static site, host it as a static site! So on Azure that would be Azure Blob Storage, on AWS it's S3 etc... also because it's a static site you can cache the files, even a 6 min cache can really help loads with peak traffic. Finally place your files closer to each of your end users with a CDN.

Use service worker (NGSW or Workbox) to optimize networking for 2nd and further app loads.

In order:
1. Install a service worker to boost startup time, especially for enterprise apps that are frequently being used, so the caching really helps there.
2. Apply lazy loading and preloading
3. Possibly start with "ChangeDetectionStrategy.OnPush" right from the beginning. It will be a bit more work initially, but totally worth it when the app gets bigger.
Other than that, check out web.dev/angular or my video series based on those articles:
Angular Performance: Route Level Code Splitting
I walk you through step by step, applying different performance optimization strategies, like performance budgets, service worker, virtual scrolling etc.. 🙂

Server side rendering is probably one of your best friends when it comes to performance improvements!

Consider every dependency you add to your app. While it may be tempting to add all of lodash, momentJS, or other of the sort, every KB of code matters when considering performance, especially on mobile. Look at what you can do with built in methods in JavaScript and what Angular has to offer. This is something that when we talk to developers in the Ionic community, really hits home as they can see the effects certain libraries have with regards to performance on mobiles devices.

Using Angular Material CDK Virtual Scroll for huge data display.