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:
- Know Before you Performance — analyzing (and the tools you need to do so) before blindly trying to increase app performance
- Code Splitting and Lazy Loading
- Improving Performance in your Angular Templates
- Observables and OnPush — A change detection strategy for the performance win
- Caching for Performance Wins
- Misc. or “Higher Rungs” section including AOT, Service workers, Server side rendering, and more
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!!!
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:
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
onPushchange 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.Sam Julien Tweet MeDevRel @Auth0, Angular GDE & Collaborator, teacher, outdoorsy-type.
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:
Test it, don't guess it.
Pascal Precht Tweet MeStriving to be a good fellow every day. I blog at pascalprecht.github.io.
I LOVE LOVE LOVE what James Henry (my British friend residing in Toronto for his work at Nrwl) had to say:
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!
James Henry Tweet MeArchitect @nrwl_io. MVP for TypeScript @Microsoft.
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:
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)Jeff Cross Tweet MeCo-founder & CEO @nrwl_io, Google Developer Expert in Angular & Web, former Googler and Angular Core Team.
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.
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.
Ben Lesh Tweet Me#RxJS core team. Art lover. Working at @citsecurities on React stuff. Former Angular team at Google, and web dev at Netflix.
Next we’ll hear from the incredibly kind Alex Okrushko — a Googler, blogger, speaker and NgRx team member.
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 changesAlex Okrushko Tweet Me
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
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.
Leonardo Zizzamia Tweet MeWeb Tech Lead @coinbase.com
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.
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.
Bonnie Brennan Tweet Me
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!
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.Manfred Steyer Tweet MeSpeaker, Trainer, Consultant and Author with focus on Angular. Google Developer Expert (GDE) and Microsoft MVP.
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.
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.
Wassim Chegham Tweet MeJavaScript @Microsoft @angular team
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:
Don't be blind. Monitor your actual app performance in the wild using the
window.performanceobject 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_APIUri Shaked Tweet MeSoftware and Electronics Engineer, Google Developer Expert, Maker, Founder of @IotMakersIL
Alex had another tip for after you’ve measured your performance. Check it out:
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)Alex Okrushko Tweet Me
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:
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.
Stephen Fluin Tweet MeDeveloper Advocate for Angular @ Google
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) },
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.
Preston Lamb Tweet MeDeveloper @MotivHealth, author @GoThinkster, freelance at Preston Lamb Consulting
According to Christian Lüdemann, there are three main ways to improve first load (in order of biggest impact first):
- Optimizing the size of the main bundle
- Optimizing load of static content
- 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:
Lazy load your routes, generate smaller bundle size. In Angular CLI version 8.1, we can scaffold lazy load route by running command. Easy!
Jecelyn Yeen Tweet MeSoftware engineer. GDE. Director of @WomenWhoCode KL.
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. ;)
Lazy load whatever you can.
Shai Reznik Tweet MeTeacher at @hirez_io & TestAngular.com
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:
Use modules and lazy load!
Ryan Chenkie Tweet MeMaking software with JavaScript, Angular, React, Node, and GraphQL.
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:
Use code-splitting ✂️
Minko Gechev Tweet MeBuilding tools for developers at Google. Angular team. Previously co-founder & CTO at Rhyme.com
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 one thing I will say for performance is lazy load all things.
Sani Yusuf Tweet MeFounder @haibridco. Conf Speaker.
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:
1) Cache data in the client when feasible.
2) Use lazy loading.Deborah Kurata Tweet MeSoftware developer, independent consultant, Pluralsight author, speaker, Microsoft MVP, Google GDE.
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:
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).
Dan Wahlin Tweet MeCoding geek. Onsite training/architecture on Angular/React/Vue, Docker/Kubernetes, .NET Core, Node.js, Azure. Pluralsight author.
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:
Lazy load where it makes sense and manage the bundle sizes efficiently.
Hans Larsen Tweet MeSoftware Engineer @DFINITY, working on the Internet Computer.
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.
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.
Juan Herrera Google Developer Expert in #Angular
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:
Lazy loading modules and OnPush state management, but also: don't be afraid to use performance "sleight of hand" tricks like optimistic updates!
Kim Maida Head of Developer Relations @Auth0. @GoogleDevExpert
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 :
Avoid iterating over a result from a function, meaning
let item of getItems().Shai Reznik Tweet MeTeacher at @hirez_io & TestAngular.com
My good friend and mom of four from Massachusetts, Sharon Dio, had a short and funny tip for us:
Blame the backend?
Sharon Dio Tweet MeFeminist, Mom/4, LEO/USMC wife, UI Dev @predictiveindex, Google Developer Expert, founder @NgBoston.
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:
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.
Dominic Elm Tweet MeGDE for Web Technologies and @Angular
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!!
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.
Gerard Sans Tweet MeDeveloper Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader
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:
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!
Alex Castillo Tweet MeEmpowering the mind at @Neurosityco - building neural devices and neuro-powered apps.
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:
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.
Dale Harris Tweet MeSenior UI/UX Architect @WA_OIC.
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!
If you use observables properly you can easily adopt onPush for your complete app, which makes your app super performant!
Mashhood Rastgar Tweet MeCTO @sastaticketpk - Web and @Angular
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!
Utilize observables and set change detection to ‘OnPush’.
Mike Brocchi Tweet MeBrilliant developer, wonderful father, kind bro, friend to all
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:
Use OnPush strategies and build reactive view components with separate business logic. Architect to push data [to views] only when distinct state has changed.
Thomas Burleson Tweet MeAngularJS Material + @angular/flex-layout - Solutions Architect + Trainer - Loves all things RxJS, Angular, & React
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:
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.
Azkar Moulana Tweet MeFull Stack Dev | OSS enthusiast | Mentor | Speaker | Co organizer - @ngslconf
Leonardo Zizzamia, organizer of NGRomeConf AND creator of perfumejs that we heard from earlier had another great tip that he wanted to share.
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
Leonardo Zizzamia Tweet MeWeb Tech Lead @coinbase.com
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!
OnPush is a means of controlling how often change detection runs.
Mike Brocchi Tweet MeBrilliant developer, wonderful father, kind bro, friend to all
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. 👀
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.
Aaron Frost Tweet Me
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:
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/
Paul Spears Tweet MeAngular developer and instructor for https://angularbootcamp.com/
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:
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!
Michi DeWitt Tweet MeCo-Director and Angular Lead for @WWCodesandiego. Co-organizer of @AngularSD
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:
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.
Brad McAlister Tweet MeSoftware Engineer
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:
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.
Asim Hussain Tweet MeDeveloper • Author • Speaker • Teacher • EMEA Lead for Cloud Developer Advocacy @Microsoft
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:
Use service worker (NGSW or Workbox) to optimize networking for 2nd and further app loads.
Maxim Salnikov Tweet MeDevRel Local Team @Microsoft @Azure
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:
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.. 🙂Juri Strumpflohner Tweet MeGoogle Dev Expert #GDE • @eggheadio instructor
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:
Server side rendering is probably one of your best friends when it comes to performance improvements!
Simona Cotin Tweet MeCloud Developer Avocado @Microsoft
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
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.
Mike Hartington Developer Advocate for @Ionicframework. Google Developer Expert.
Jecelyn had one other piece of advice that is an easy one to achieve:
Using Angular Material CDK Virtual Scroll for huge data display.
Jecelyn Yeen Tweet MeSoftware engineer. GDE. Director of @WomenWhoCode KL.
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
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.