Here's how to fix Angular performance issues and optimize your Angular load time. 💡
Angular performance is a common issue.
It's probably Angular greatest weakness. 😩
How do I know?
I recently surveyed several dozen Angular developers, asking them their biggest frustration with Angular. Here's what they told me.
Not to mention an article I recently read that was written by Angular consultant where he explained how he optimized an Angular application that took almost an entire minute to load. Yup! One. Whole. Minute.
Just think about it... you spend all this time building an Angular app, but as soon as it hits production people start complaining that it's waaaaay tooooo turtle-slooooooow.
Now that's obviously an exaggerated example, but the Angular performance questions is real.
Not to mention the frustrated Angular developers that don't know where to start when their boss demands a better performing Angular application.
How do you avoid this kind of situation?
How do you optimize your Angular application?
What can you do to improve the performance of your Angular application? And fix Angular performance issues?
Aside from hiring an Angular consultant to help you, here's the in-depth-guide to improve and optimize your Angular performance and making sure it loads blazingly fast. Every. Single. Time.
Table of Contents
- What is loading performance versus runtime performance?
- Getting started: Here's why you must profile Angular load time.
- How to decrease the Angular bundle size?
- Speedy hosting options for your Angular app?
- Rolling our own Nginx server with Brotli support
- Conclusion
What is loading performance versus runtime performance?
When we talk about fixing Angular performance and making our Angular app faster, there are two distinct areas to wrestle with and improve. There's a difference between making your Angular app load fast and making it run fast. This is known as the difference between the loading performance and runtime performance.
This guide focuses on how to make your Angular app load fast.
But if you need to optimize your runtime performance and make your Angular app run fast there are all kinds of Angular optimizations that you can consider like using a trackBy function to improve ngFor performance.
Or building a fast-performing Angular pipe.
As well as tweaking Angular's change detection settings to avoid un-necessary change detection cycles.
And if your suspicious that API calls could be choking your Angular runtime performance then here's how to monitor the slowness of your HTTP calls.
Now that we understand the difference between loading performance and runtime performance, how do we improve it?
Getting started: Here's why you must profile Angular load time.
The first step in improving the performance of your Angular app is to measure how long it takes to load and bootstrap inside the browser.
Why?
Some developers know that they need to optimize their Angular app but they have no idea how much or where exactly to start. And so they make these wild stabs at the code or build configuration and then refresh the app to see if it appears to load faster than it did before. This kind of optimization approach is nothing but a clown show and deserves every kind of criticism it can get. It's like trying to bake a cake without the necessary measuring cups. Or re-arranging the chairs on the deck of the Titanic before it sank.
So what's the smarter approach?
Measure. Measure. Measure.
Somehow we as developers don't always notice the extra second or two that will bother the users. At least that's been my experience.
For example, one of my developer buddies is a Django developer. He kept insisting that his Django application was faster than my Angular app. When we were together he'd pull out a browser and show me just how much faster it was... and how sluggish my Angular app was... until we started actually counting the milliseconds by using the browser's developer tool. After profiling the performance of my Angular app vs his we discovered that they were averaging about the same load time.
Which one was faster? I don't remember. 😁
Obviously my friends internal timer wasn't properly counting and proves why a developer MUST carefully profile the performance of his Angular app and know EXACTLY how many milliseconds it takes to load the thing. By counting the milliseconds that it takes to load your Angular app you will be able to know exactly how much you're improving load speed and performance as you attempt to optimize. Yup, count the milliseconds.
How to decrease the Angular bundle size?
There are all kinds of tweaks and wildly-optimizing tree-shaking stuff floating around on the web about how to decrease the size of your Angular compiled app.
Some of the suggested performance tweaks are impressive, like this one about using the Google Closure Compiler to decrease the size of your Angular app by 2.5x, and I'm glad for the effort that others have made to shave a few KB's. But I find that a lot of the suggestions is like kicking a dead donkey - especially if your Angular app has been poorly engineered.
So how do you design your Angular app to perform faster?
Unless I miss my guess, for every 8 out of 10 Angular projects the quickest and easiest way to shave the size of your Angular app and make it load faster is by splitting your main AppModule into smaller modules and lazy loading the other modules when you choose to.
In other words, make sure the size of your AppModule is as small as possible. Modularize everything you don't need right away and then lazy load them later because lazy loading helps keep the initial size of your Angular app smaller and makes for a speedier Angular load performance.
Speedy hosting options for your Angular app?
And after you've got your Angular app properly split into lazy-loaded modules, what's the next best step?
Deploy to a fast, global CDN.
And what are the fastest Angular hosting options? Where can you host your Angular app to guarantee the fastest load speed?
Here's a list of 3 different hosting options that specifically support Angular. This isn't a comprehensive list but each one of these Angular hosting options...
- Has a free tier that allows you to get started and grow.
- Uses a global CDN that your Angular app is deployed too.
- Is a hosting solution that I've had success with. In other words, I know what I'm recommending.
Roast.io
If you want to start roasting an Angular application on Roast.io then here's the getting started guide for Angular applications.
Netlify
Want to deploy your Angular app on Netlify? Here's how to get started.
Firebase Hosting
Firebase Hosting is a hosting service that was created by Google. If you want to know more then here's how to deploy an Angular app to Firebase Hosting in 2021.
Rolling our own Nginx server with Brotli support
But what if you have your own server with a VPS like Digital Ocean? And would rather not deploy to a CDN?
Then Brotli is here to help you.
Brotli is a compression algorithm developed by Google and considered the successor to gzip. I've seen it cut an entire 1000ms and more off of the load time for Angular apps.
If you're using a pre-backed hosting solution like Firebase Hosting, Microsoft Azure Hosting or another option that I mentioned above then you're outta luck. But if you have your own server that you can tweak and customize then you can compile Nginx from source with Brotli support.
Why compile it from source?
Because Nginx doesn't come built with Brotli support. You have to use Google's Nginx Brotli module.
But the good news is I have a script that will do the job for you. 😉
Here it is.
#Install deps
sudo apt install unzip zlib1g-dev libpcre3-dev libssl-dev brotli -Y
# Pull nginx
mkdir /tmp/nginx-brotli
cd /tmp/nginx-brotli
wget http://nginx.org/download/nginx-1.18.0.tar.gz
tar -xvf nginx-1.18.0.tar.gz
# Pull brotli module
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init
# Build nginx
cd ../nginx-1.18.0
./configure --add-module=../ngx_brotli
./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.conf --pid-path=/usr/local/nginx/nginx.pid --with-http_ssl_module --with-http_v2_module --add-module=../ngx_brotli
make
sudo make install
Conclusion
Angular is fast evolving framework - which is one of the reasons I enjoy Angular - and it's built by a great group of people that want to know the frustrations Angular developers have. The Angular team has already shed a lot of sweat to to improve the size of Angular applications and Angular's performance and I expect that they'll continue to do so.
Daniel Kreider
Top comments (1)
Goodjob