50+ Angular Performance Tips from
the Pros

Recently, me and my son (Mr. Milks) were on a sailboat puttering about some ocean in Canada (my husband later informed me it was Lake Ontario, not an ocean). It was a gorgeous evening and we were mingling with some of the incredible thought leaders that we are fortunate enough to have in the Angular community. I might not have state management down to a ‘t’, but mingling, I can do!

I was chatting with Sam Julien, a friend of mine and one of the aforementioned influencers that we are blessed enough to have. We were talking about Performance in our Angular apps and I thought the analogy he gave was bloody brilliant. He said performance is like a ladder. There are some easy things that you can do to increase performance in your Angular app and these low hanging fruit are the bottom rungs of the ladder. Easy to accomplish with lower performance gains. 

As you climb up the performance ladder, things start to get hard to optimize, but as you do them you will notice increasingly better performance. However, you might not need to spend the time and energy going all the way up the performance ladder. I love love love this and find that the more I learn about performance, the more I feel this analogy fits perfectly. Check out his tip he had for us, it is chock-full of wonderful pieces of advice:

With performance being on the brain, I decided to reach out to other Angular developers and influencers in our community and gather their performance advice. I asked them:

"What is one thing you would tell a fellow Angular developer to help improve app performance?”

The responses were incredibly varied and so this article was born! Check out all our amazing influencers' advice!!

The first piece of advice was a surprising one and very popular at that. TWELVE of our devs chose this topic as their one piece of advice on performance. The most succinct quote came from brilliant friend from Germany, Pascal Precht and it sums up this topic nicely:

I LOVE LOVE LOVE what James Henry (my British friend residing in Toronto for his work at Nrwl) had to say:

So, we know that we have three key areas that we can improve our performance in — load, runtime and perceived performance. How do you measure though, to know how our app is performing and to know which path we should take to improve? Ward Bell’s quick tip is perfect for getting you started on improving load performance.

Ward was recently on a RealTalkJS podcast episode with Katie Hempenius a Chrome Engineer. She’s a super intelligent dev and in this episode she went further into Web Performance. Check it out here: 

🎙 Listening to Episode 52 of @RealTalkJS by @John_Papa, @wardbell and @DanWahlin !

"Web Performance - Katie Hempenius <@KatieHempenius>" https://t.co/e48u7ow5HM ~ 47 min#Developer #Podcast #JavaScript #WebDev #Performance #Latency

— Sascha Baumann ☀ (@bysaschabaumann) October 1, 2019

Now checking out the network tab gives you a good idea on what assets are a bit too chunky. But what if you need to dive further into load performance? According to Leonardo Zizzamia, Perfume.js is a perfect and easy way to measure the FCP (First Contentful Paint) of your app. Leonardo created and keeps perfumejs going as well as running @NGRomeConf and @AngularSF!

I tried out Perfume.js and it really was not all that hard. First I include….

Besides testing FCP using Perfume.js though, what else can we do? Bonnie Brennan actually did a neat talk at ngBe that went over a few other tools for measuring, like the Webpack Bundle Analyzer. Bonnie is a darling friend of mine, mother of @thelittlestdev, creator of ng-houston podcast and networker-extraordinaire! Let’s see what she had to say.

Manfred Steyer, is a kind soul and wonderful developer currently residing in Austria. He had SO MUCH good advice to give on performance that covered measuring first, monitoring during and some not so well known tips for advanced preloading, Check out his advice! 

Wassim Chegham, a compassionate dev, new father and incredible influencer in the community had some advice for large teams who might be experiencing painful build times.

As Stephen suggests, so did many other influencers. These next quotes all have lazy loading in common. What is lazy loading, you ask? Well, according to the Angular Firebase docs:

Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated.

In layman's terms, lazy loading is compartmentalizing your app and loading in only the bits you need, when you need them. These bits are broken up into components. Essentially, your routes will now look like this:

According to Christian Lüdemann, there are three main ways to improve first load (in order of biggest impact first):

1. Optimizing the size of the main bundle
2. Optimizing load of static content
3. Optimizing load of API resources

I remember the first time I met Jecelyn Yeen at a GDE Summit in NY. We were roommates and this was the first time I learned that not all hotel rooms in the US have AC. 😆

I remember bonding with Jecelyn over our dev socks that we both owned and sitting up late at night as she explained some complex Angular tidbit to me that I didn’t understand. She is such a kind person, talented developer and intuitive teacher. Here is what she had to say:

These next tips all had to do with optimizing parts of your Angular templates or even creating perceived performance in your UI.

As promised before, Shai had two juicy tidbits of advice! His second one was all about optimizing ngFor :

While I wish we all could just mark our performance issues with a blame the backend flag and move on, alas we cannot.

Dominic Elm gave us some neat advice regarding pure pipes and removing logic from your templates. Check out his advice:

📢 ANNOUNCEMENT 📢

It's time to unleash `ngx-template-streams`, a library that supercharges your @Angular templates with Observables and lets you define event streams from any DOM event including component outputs.

🎉🔥🙌😱

It's fully open source!

Happy streaming 💪 pic.twitter.com/DlFSMsOUZn

— Dominic Elm ⚡️ (@elmd_) July 8, 2019

Our next few devs all agreed that upping app performance was all about the change detection! In case you are unfamiliar with this term, change detection in Angular is just Angular updating the DOM when data is changed. By default, Angular will update whenever any changes happen to your data, however this might not be the meta for performance. I love how Pascal Precht put it in his article on thoughtram:

The basic task of change detection is to take the internal state of a program and make it somehow visible to the user interface. This state can be any kind of objects, arrays, primitives, … just any kind of JavaScript data structures.

Mashhood Rastgar is the first developer that included change detection in his advice. He is a Google Developer Expert and the CTO of Sastaticket.pk, Pakistan’s biggest travel portal. Let’s hear what he has to say about performance!

There is a neat portion of Leonardo’s article ‘Speed up Performance in 7 steps’ that goes into detailed steps on how he sped up his Angular app — definitely worth checking out!

You might be pondering to yourself, though, “awesome, all these intelligent devs say ‘just utilize change detection’ or ‘just use OnPush’". But what does this mean? Mike to the rescue again!

Number one broseph and next up with a performance tip is Aaron Frost, or Frosty. Frosty is not only a great dev but has such a big heart for the community and being inclusive; so it is no shock to anyone that he co-runs THE biggest and most welcoming show, ng-conf, in Salt Lake City. Let’s see what he had to say. 👀

Brilliant! So, as we said before, by default Angular initiates change detection with every change to your data. This can often be with every interaction your user does on your application. The brilliant folks on the Angular team, however, figured it would be best to give you control of how often these change detections are run, so you can optimize for your application and your users. One way that many of the developers in this article suggest you do is to set the changeDetection property to ChangeDetectionStrategy.OnPush in the @Component decorator. This needs to be done per component. This is telling Angular this component does not need to be updated unless there are specific changes to an input. The inputs in that component are also considered to be immutable — they cannot be modified or changed. Check out this article from Rangle.io for more on immutability in Angular.

Since this needs to be done per component and changes the way you need to structure your events, I’d consider this to be one of the “higher rungs” as Sam Julien put it. It is more difficult to achieve but could have great improvements if accomplished.

As you probably guessed, this section is all about caching. These next group of devs thought of caching first when asked for an Angular performance tip!

Paul is an Angular dev and a really great teacher too. He is an instructor for Angular Bootcamp. They do training for individuals and for teams and I HIGHLY recommend them. Here is what Paul had to say for his performance tip:

Brad is a down to earth and kind developer. He hails from Oklahoma (where I’m originally from) and gave us this great tip on performance:

Asim Hussain is a EMEA Lead for Cloud Developer Advocacy at Microsoft and gave us advice for hosting your site and caching to improve performance:

As of March this year, Maxim Salnikov is taking his PWA super powers to a whole new level and joining up with the Azure team as a Dev Advocate. Here is his tip for a performant Angular app:

Maxim specializes in all things PWA. Check out his recent talk for more deets:

My slides for the seriously updated «Deep, deep offline - web can do it» session I delivered at @CSS_Minsk_JS in beautiful Minsk, Belarus: https://t.co/U2o8asUbLx #PWA Background fetch / sync / periodic sync & more. Plus @workboxjs quickstart :) pic.twitter.com/Su0hHp2gvG

— Maxim «PWAdvocate» Salnikov (@webmaxru) September 21, 2019

This last dev to give caching advice also hit on change detection and lazy loading! Check out what Juri Strumpflohner (developer, speaker, teacher and Cypress.io Ambassador) had to say:

Simona Cotin is also a Cloud Dev Advocate for Microsoft. She is talented speaker and developer and her fashion sense is second to none. Check out her tip for Angular performance:

Mike Hartington is the developer advocate for Ionic, a GDE, and rocks a kick-butt beard! Check out his performance tip, it’s almost as awesome as his beard. :D

Jecelyn had one other piece of advice that is an easy one to achieve:

This was such a wonderful mix of advice from the influencers in our community. If you are still wanting more on performance, though, Minko Gechev from the Angular team made this wonderful performance checklist on Github.

I’d like to give a huge shout-out to all the incredible developers who made this article possible. I appreciate you all not only for your advice but for what you do behind the scenes to make our Angular community great. I see you.

Good luck to all you Angular devs out there on your future performance endeavours! I hope to see you around at the next Angular conference/event. <3