Angular is a fast evolving framework - which is one of the reasons I enjoy Angular. 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.

In case you've never heard of Brotli, it's a way to compress your build files and serve them to your users as smaller files. But since you and I are Angular people, here's how to create a custom build step that automatically compresses the production files with Brotli. Next time you create a production build, the build files of your Angular application will automatically get compressed with the Brotli algorithm which allows you to serve smaller files to your user's browser. And then, last of all, well discuss how to make sure it performs fast once its been loaded. Many Angular developers are frustrated with Angular because they say it is slow. You can find all the examples and best practices here.

You can find it here. I opened the app.module.ts file to take a peak and I was shocked! Yes buddy, if your Angular app bundle is too large the first place I'd go hunting is in the app.module.ts. Here's the command. Angular trackBy is used to define how to track changes for an item in a list. Open the main.ts file (used to bootstrap your Angular application) and edit these lines of code Now that we've got the debug tools enabled, we can use them to discover how long change detection is taking.

A deeper explanation with lots of examples requires its own article so if you want a complete, step-by-step guide on how to monitor HTTP requests then click here. So does this mean that your Angular application is just doomed to perform like a turtle? Brotli was introduced as a successor to Gzip and has gained more popularity recently.

In this complete Angular performance guide I'm going to show you the step-by-step process to make your Angular app load faster, run faster and perform faster while making your team, your boss and your users elated with its performance. The Angular Material CDK has a great virtual scrolling package worth checking into. Or at least I thought I did, because I was the main developer and had written 95% of the code for the project. I don't remember. It's a great way to quickly optimize your Angular application. This is how to do Angular performance optimizations like a boss. The Angular app shell is such a big game changer that I've created a separate article - The Ultimate Guide To The Angular App Shell - to explain things in-depth.

Or is it light and runs faster even on small mobile devices? . An app shell is a way to rapidly render a portion of your Angular application.

And who knows - you might scare up some weird stuff. The first step is to add a trackBy function to our components Typescript file, like this. That is change detection in a nutshell.

Let's say we have an Angular component that displays a list of 5,000 random numbers. How would you feel if you knew exactly where to go looking to find the performance bottlenecks in your Angular application? I'm also giving you an Angular performance checklist that you can download free and use anytime you want. You're an Angular developer and you've gotta learn how to do Angular performance optimizations. Well, when I checked the change detection cycle it was taking at least 12 - 14ms. It was busting with imports and libraries that the project had since outgrown. The Angular framework is powered by a library called Zone.js that triggers change detection anytime a DOM event occurs. Because Zone.js triggers a new render every time a DOM event occurs that means your list is being re-rendered when a button is clicked, etc and of course you never see it because the list's data hasn't changed. Angular load performance refers to how long it takes for a browser to download your application, load it into the browser, parse the JavaScript and get it displayed to your user. By default, NgModules are eagerly loaded, which means that your Angular application loads ever single NgModules gets loaded, even if they are not immediately necessary. To describe the Angular trackBy function in a nutshell, it is an optional function that can be used with Angular's ngFor. 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. We'll run our Angular application with ng serve --open. Well, you can use an HTTP interceptor to monitor any slow HTTP calls. You can use Brotli to compress anything. It all depends on who uses your Angular application. React and Vue.js developers also experience leaky, slow applications with their tools as well - don't blame the Angular framework. Or because it was poorly engineered by the Angular team from Google? And although opinions vary, I would recommend that you never let your change detection cycle go beyond 10ms.

That was a mistake that cost me a lot of performance issues. Obviously my friend's 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. I yanked those imports out and trimmed the project up, nice and clean, just like a hipster-house-puppy. For a very basic Angular application you can expect a change detection cycle of 0.01 - 0.05 milliseconds. Angular also has another nifty feature called ngFor. The second package you need to install is brotli-webpack-plugin. What does it take to create our own trackBy function? It was designed to boost the speed of your Angular application by creating a static rendered page (or a skeleton that is common for all pages) that is sent to the client. The Ultimate Guide To The Angular App Shell. And fix Angular performance issues? It's built by a great group of people that want to know the frustrations Angular developers have. This Angular performance guide is split into two sections - a section on Angular load performance and a section on Angular runtime performance. And what Angular performance optimizations have worked best for you?

If your users are employees on a high-speed fiber-optic connection, then use a preload-all strategy and load the entire Angular app right away. And then, we'll modify our ngFor to use the new trackBy function. This kind of optimization approach is nothing but a clown show and deserves every kind of criticism it can get. Imagine doubling or tripling the performance of your Angular application. When we were together he'd pull out a browser and show me just how much faster it was And how my Angular application was a turtle compared to his Django stuff We started actually counting the milliseconds by using the browser's developer tool.

Not if you apply what Ill show you in this article, follow the steps, and put in the work. Once its loaded, the next type of performance is runtime performance. Below is a basic example of the Angular trackBy function. And if it is, how would you know? Somehow, we as developers don't always notice the extra second or two that will bother the users.

There are other preloading strategies available for you to install and configure and if you want to know more than read this article where I explain Angular preloading strategies in-depth. And that's how to use Brotli with Angular. It's worth watching just for the laughs. Need a quick checklist to help optimize the performance of your Angular app immediately? If you want to download the Angular Performance checklist, then click on this link. 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.

. This might be fine if your list never grows. Is your Angular app snappy and fast as users interact with it? To be clear, there is no special relationship between Angular and Brotli. As I already said, Angular uses Zone.js to detect events like mouse clicks, keyboard press and so forth.

Then click here to view and download the complete Angular performance checklist. On average you can expect JavaScript files compressed with Brotli to be roughly 15% smaller, HTML files are around 20% smaller, and CSS files are around 16% smaller. What can you do to improve the performance of your Angular application?

This is a simple example of a bad-performing component. It might be a cool feature but it's got limits and if you abuse Angular change detection it'll get cranky.

We'll configure Angular to use our custom webpack builder and webpack config file. The Angular team has already shed a lot of sweat to improve the performance of Angular applications and we can expect that they'll continue to do so. I knew the project like the back of my hand. It'll look like this. .

Weve got so much to cover and youre in for a real ride! When Zone.js detects an event, it checks the data bindings and updates any stale data bindings that way the data show to the user is always fresh, new and correct. And avoid expensive re-rendering operations? Years ago when I was still green behind the ears and hardly knew anything about Angular I created a LARGE angular application and pilled the whole thing into one module - the app.module.ts file. Otherwise, if you want to dive deep into Angular performance optimization and wade through all the mechanics and logic of how we improve the performance of an Angular application, then read on. This Angular performance checklist was created to help you tackle your Angular application like a football-tackling-rock-star. It's crucial that you install the version that matches the version of your Angular application so head over to the package page and grab the installation instructions for your specific version of Angular. Whenever your boss shows up to tell you that the Angular application is slow you know exactly where to start and the steps to follow to make your Angular app perform faster. So to make your Angular application load faster, you need to first split the big beast into smaller pieces. Just hand it an array of information to render and watch it whiz until it SNAPS and POPS and BLOWS UP in your face! Is it a memory pig? Which one was faster? And that is how to use a trackBy function to make your lists perform faster. Otherwise, keep reading and I will give you the step-by-step formula to make your Angular application perform faster than it ever has. But, no Angular application is immune to runtime performance.

If you're interested, this article will teach you everything you need to know about how to profile the performance of an Angular app. So what did I do? It's like trying to bake a cake without the necessary measuring cups. How to add a loading spinner to Angular Material button, The complete guide to testing Angular HTTP Services, The Complete Angular Performance Guide For 2022. But if your Angular application has mobile users on slow 3G connections than a conservative approach is wiser. And buddy, that's what I intend to make ya - a shrewd and wise Angular developer that knows how to make your Angular apps perform! But small lists tend to become large lists, and large lists will generate performance issues unless you're a wise Angular developer. Runtime performance is usually caused by not properly unsubscribing from a RxJS observable, binding thousands of elements to a list without using a trackbyFn and overloading the change detection cycle.

Some think that its hard to build a fast Angular application. Our last change will be to the angular.json file. Maybe you've heard of the well known Gzip standard? After profiling the performance of my Angular app vs his Django app we discovered that they were averaging about the same load time.

An app shell is designed to show a meaningful first paint allowing your application to appear quickly before it loads and parses the rest of the JavaScript files.

So how do we trace change detection performance issues? And now that we've got our dependencies installed we need to create a webpack.config.json in the root directory of our Angular application. And as youve probably already guessed, the most common Angular performance issue is in the first option - Angular load performance.

Ahsan also has a great video explanation if you'd rather watch instead of reading. He kept insisting that his Django application was faster than my Angular app.

Recently I was reviewing the code for a business application built with Angular. Lists are a bad culprit for long change detection cycles and a good way to fix a long list is to use a virtual scrolling strategy. Want to guess what answer got the most votes? If you're not familiar with Angular modules, then check out this entertaining video by the Angular comedian Shai Reznik. The first step is to install the custom-webpack package. Once we have our application split into lazy-loaded modules, we need to optimize how those modules are loaded. And that, my friend, is an explanation of the multitude of ways that you can double or even possibly triple or quadruple the performance of your Angular application. Sure, Angular might have a performance quirk, but I still prefer it over some other libraries and frameworks out there. The Angular docs do a great job of explaining how to set up lazy loading modules.

And guess what? Maybe a sluggish API server is making your Angular application slow?

Some developers know that they need to optimize their Angular app but they have no idea how much or where exactly to start. Or does it slow down at times? Or once it had loaded, it performed many times faster than it currently does? Once you've created your HTTP interceptor, use it to monitor how long outbound HTTP requests are taking to complete. We need to define a few things before we dive into the code of your Angular application.

Especially given that the bundle sizes of its biggest rivals - React & Vue.js - are usually about half as small and take about half the time to parse and run the JavaScript. If you want to learn more than I've got an entire article that explains Brotli and Angular.

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 blazing fast. The Angular framework gives us two basic preloading strategies. Well first dive into the mechanics of making your Angular application load faster. As soon as it launches in your browser, open the console in Developer Tools and type the following command to measure how long the last change detection cycle lasted. Is it because Angular is a crappy project?

. Nope. Yup, count the milliseconds. . And it works just as well with other frontend libraries and frameworks like React or Vue.js and more. Yes buddy, you have to learn how to make your Angular application load faster, run faster and perform faster. For example, one of my developer buddies is a Django developer. .

Or re-arranging the chairs on the deck of the Titanic before it sank. First, there are two performance bottle-necks that your Angular application might have. What if your Angular application loaded twice as fast? . It was initially developed by Google in 2013 and since then has gained a lot of traction. At least that's been my experience. The browser then loads the rest of your Angular application and switches to it automatically when finished. Brotli is the quickest way to boost the load time of any Angular application.

How about we dive into some code. I recently surveyed a group of angular Developers and asked them what their biggest frustration with Angular is.