The polyfills bundle contains the polyfills and shims to make sure the app has the desired browser support. The runtime contains the Webpack loader, that is used to load the subsequent bundles. When the app loads they are fetched in this order: Runtime bundle These are the different bundles in an Angular CLI app (ordered after load priority): The different bundles in an Angular CLI app To accomplish this we need to know how Angular CLI (using Webpack) is going to bundle our application. We want to keep our main bundle as small as possible and lazy load everything that is not relevant to the initial route. Use Webpack bundle analyzer to find out how things are bundled. Get an overview of the bundles and load times I don’t like to give vague shitty advice so let’s dive in and have a closer look at how bundling works in an Angular CLI app. Once the main bundle starts to increase the performance goes down exponentially because every kB extra on the main bundle is contributing to slower:
Lazy loading helps with that as we can keep the visible parts, relevant to the initial route, in the main bundle and lazy load everything else in separate bundles. Optimizing the size of the main bundleīasically, the reason everyone is talking about lazy loading in a performance context is that it is about making the main bundle as small as possible. If you want better performance, you just do more iteration cycles and optimize the areas we will touch upon in this post. It is about iterating over these three steps until you have got the desired performance level. Performance tuning is not a linear process. Measure how well the performance tuning worked (using audit/lighthouse), eg.Fix it by implementing the hypothesis, eg.moving a big library out of the main bundle, will make the app load faster Investigate what the problem is and where it is located.If you have read my other post about performance, you know I use this universal principle when performance tuning Angular apps:
JBIDWATCHER PAGE LOAD TIME DOWNLOAD
Using service worker caching can then make subsequent requests faster by skipping the download phase. You don’t need the next fancy performance tool to make your Angular app load fast, you just need to make the main bundle small. If you just do this and manage to get your main bundle small, then you don’t have load time problems anymore. The time for downloading, parsing and executing JS all blows up quickly as the main bundle size increases. The thing that will make the biggest impact on your Angular app’s load time (of the initial route) is making the main bundle as small as possible. It might give you a faster first paint though as well as some SEO benefits but it definitely has a price. Angular Universal is making the time to interactive (TTI) slower because it requires you to first render the server page and then the client bundles. This is not making the app load considerably faster compared to the previous points. You might be like, wait there is more! What about Angular Universal? This is ordered after the biggest impact first: The areas to optimize for when improving load timeĪfter watching numerous BlinkOn videos and reading EVERY blog post on performance tuning Angular apps (yes every literally, even my own!), and tested all of this knowledge in practice, I have located the areas in an Angular app, we need to tune to make the load time faster. The tips in this post have been used to 6x the first paint time on a real app so trust me it works. Since, according to Google, 40% of visitors abandon a website if it takes more than 3 seconds to load, this is a seriously important topic, we should have good and practical advice on.Īnyways, this post is taking care of all of this and will be your goto for a step-by-step guide to make your Angular app’s load time to perform world-class. If you can’t advise in a step-by-step manner, your advice is not that practical. These advice were, well, not that useful and practical. “Upgrade to Angular 8 and use differential loading”.That is why there are so many slow Angular apps out there.
JBIDWATCHER PAGE LOAD TIME HOW TO
One of the motivations for writing this post is because there is basically only vague advice available on how to optimize Angular apps online. This forced me to really understand how the browser works when loading websites and in the process I developed a systematic approach to making your Angular application as fast as possible. Recently, I helped a big e-commerce site with optimizing their load time, as every ms of waiting time decreases conversions. Now it is time to dive into one of the big and important topics: optimizing Angular load time performance. In the past, I have written a lot about performance tuning Angular apps.
0 kommentar(er)
