Improving performance of an angular app
I have to mention that if it was a CLI project, optimization would be much easier but mine was a visual-studio project.
By the time, I’m writing this we have achieved a sound improvement so I will not be able to share the stats.
To be honest, we could not recreate the performance hit in our environments but we took our chances and started working on it.
First thing we did, since we were not considering to optimize the angular build at the beginning, was to analyze our own code and make code changes which of course had a slight improvement.
Then we analyzed prod mode build and included a few more packages to minify them and to make sure AOT, build-optimizer, uglify and removal of source-map works.
We figured lazy-loading drastically reduce the size of the main.js file because it only loads the modules required at the moment.
After that we tested using a tool called Lighthouse, Page speed to get an idea on what opportunities we have for improvements.
As suggested by the tools, we tried to enable text compression in the build but it turned out that angular doesn’t support it anymore since it can be done through the server itself. This has a huge impact as the transferring size of the files are very much reduced. You may use brotli and for the instances brotli is not supported (like in Internet Explorer), configure to use gzip.
We moved one CanActivate server side validation to OnInit so that we got rid of one obvious rendering delay.
We improved data processing using stored procedures.
Started to load certain scripts and styles in async mode and fonts in swap mode. You may also want to read about preload prefetch attributes which improves the first meaningful paint load. Make sure the solution doesn’t import necessary third party libraries, unused fonts or styles.
We we were not able to consider css separation due to the application structure unfortunately which I believe also has a larger improvement.
It is recommended to compare old and optimized versions so you know you’re good to go :)
These are not all things you can do. There’s a lot more. All what I’ve mentioned are certain suggestions which saved my life.
Refer this for more tips! Happy Optimizing! 😄
