Testimonials

Using Angular Material CDK Virtual Scroll for huge data display.

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.

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

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.. 🙂

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

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.

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.

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!

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/

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

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.

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

Utilize observables and set change detection to ‘OnPush’.

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

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.

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.

Semantics can be such a simple win for performance and yet one that people can miss often.

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!

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.

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.