50+ Angular Performance Tips from
the Pros

Alyssa, the author of this article, is the Developer Advocate for Kendo UI here at Progress. If you need to improve your app with killer UI components, check out our Angular component library! We have a wicked fast Data Grid, all the form inputs you could possibly want, consistent theme-able styles and so much more!

Alyssa recently reached out to fellow speakers and influencers in the Angular community for tips regarding performance in Angular apps. Over 40 different developers shared their thoughts about testing your app and knowing where to optimize, code splitting and lazy loading, observables and onPush, and so much more! She's broken their advice into these different categories:

 

You can jump to the section you are interested in or read through them all, they are all gems. A huge thank you to these experts for not only their advice on performance, but for what they do for our community on a daily basis. THANK YOU!!!

sailingRecently, 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!!

Know Before You Performance

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:

James wasn’t the only dev to warn against blindly optimizing though. Many of the influencers warned that optimizing before knowing what you actually need to optimize could harm the performance of your app. Jeff Cross was one such dev. Jeff is not only infamous for his incredible beard but also for the work he does at Nrwl. Check out what Jeff had to say:
Ben Lesh is an inspirational influencer who always encourages people to be their best self. Ben is currently on the RxJS core team and always gives an entertaining show when on stage at Angular conferences.
Next we’ll hear from the incredibly kind Alex Okrushko — a Googler, blogger, speaker and NgRx team member.

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: 

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!

Tools to Measure Performance

Why Perfume.js?

  • ⏰ Latest Performance APIs for precise metrics
  • πŸ”¨ Cross browser tested
  • 🚿 Filters out false positive/negative results
  • πŸ”­ Browser tracker built-in
  • πŸ€™ Support for async/await syntax
  • πŸ›° Flexible tracking tool
  • ⚑Waste-zero ms with Idle Until Urgent strategy built-in

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.

Check out the Angular docs here for a guide on building with Bazel!
Uri Shaked, a brilliant gadgeteer as well as developer, gives some practical advice on how to monitor performance:
Alex had another tip for after you’ve measured your performance. Check it out:

Code Splitting and Lazy Loading

Welcome to the scary world of code splitting and lazy loading! I’m kidding, these aren’t scary at all! I’ll let my friends in the Angular community, though, elaborate more. First we get to hear from Stephen Fluin! Stephen is the coolest, he is a new father and the Developer Advocate on the Angular team! Take it away, Stephen:

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:

{ path: 'shop', loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule) },
Preston Lamb is a developer at Motiv Health as well as the organizer of ngWeber meetup in Utah! His advice is all about the lazy loading:

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:

My hilarious cohort who runs HiRez.io, Shai Reznik, had two pieces of advice. One we will see later, but the first was of course to lazy load all the things. ;)
Ryan Chenkie is a front-end developer and wonderful speaker from Canada. You can find him hosting The Entrepreneurial Coder podcast where he interviews developers that are in business for themselves! His advice was short and sweet:
Minko Gechev is well known for his work at Google for the Angular team. Minko writes, speaks and of course codes! His advice for performance was also short and sweet:
Sani Yusuf is a prolific periscope-r and wonderfully positive influence on our Angular Community. He agreed that lazy loading was key to performance:
The infamous Deborah Kurata is known world wide for her courses on Pluralsight. She is an amazing teacher, speaker and programmer! Here is her two cents on performance:
I cannot say enough good things about this next influencer. Dan Wahlin is so smart and so humble. He is a wonderful developer and teacher but also a down to earth family man and father. I look up to Dan and loved the advice he had to give:
Our next influencer is currently developing for DFINITY but previously was on the Angular team. Hans Larsen is one of the coolest catz I know and gave us this advice for performance:
Another fella that had lazy loading advice to give was none other than Juan Herrera! Juan is a GDE, developer, and organizer of the NgColumbia conference.
Kim Maida is an Angular GDE and international speaker, passionate about identity, teaching, learning from other developers, and working at Auth0. Here is what she had to say:
If you are wanting specifics for lazy loading and code splitting in Angular, Todd Motto has a killer post on them here!

Improving Performance in your Angular Templates

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 :

My good friend and mom of four from Massachusetts, Sharon Dio, had a short and funny tip for us:

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:

Dominic is a kind fella who was recently on Angular Air with me. He was talking all about his library, ngx-template-streams, that allows you to define event streams from any DOM event easily!
Next up is Gerard Sans! Gerard hails from London and is the Dev Advocate for Amazon Web Services. I love what he had to say about perceived performance!!
I love the practical piece of advice Alex Castillo gives. Alex is a Google Developer Expert and formally worked at Netflix and Grubhub! Check out his performance tip:
Front end lead at This Dot Labs, Tracy King organizes AngularDC. She reached out to her community for any performance tips and this one by Dale I just LOVED. Semantics can be such a simple win for performance and yet one that people can miss often.
Dale is a Senior UI/UX Architect at WA State Office of the Insurance Commissioner. Here is what he had to say:

Observables and OnPush

Improving Angular App Performance Reactively, Setting Change Detection to OnPush

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!

Mike Brocchi is a dear friend and incredible developer. He is on Angular Air with me weekly on Wednesdays and has recently started live coding on twitch with Justin . Check out their channel here!
Speaker, writer, developer, trainer, AND the creator of a wicked cool library flex-layout for Angular, Thomas Burleson, gave us his tips in the same vein as Mashhood and Mike:
Next up, we’ll hear from a mentor, speaker, and developer, Azkar Moulana! This year he co-organized the conference NgSrilanka and gave us his advice regarding performance with change detection:
Leonardo Zizzamia, organizer of NGRomeConf AND creator of perfumejs that we heard from earlier had another great tip that he wanted to share.

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. πŸ‘€

Observable Resources:
https://angular.io/guide/observables

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.

Caching for Performance Wins

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:

Angular AND Java, Michi DeWitt does it all! Currently residing in California, Michi co-organizes the Angular San Diego meetup! Here is what she had to say about Angular performance and caching:

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:

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:

Misc. Performance Tips

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

Author

Alyssa Nicoll a developer advocate for progress loves angular and ux

Alyssa Nicoll

Alyssa is an Angular Developer Advocate & GDE. Her two degrees (Web Design & Development and Psychology) feed her speaking career. She has spoken at over 30 conferences internationally, specializing in motivational soft talks, enjoys gaming on Xbox and scuba diving in her spare time. Her DM is always open, come talk sometime.

Comments are disabled in preview mode.