Tips to Boost Angular App Performance | Web page Speed Optimization

Tips to Boost Angular App Performance
✔ Stop unwanted Change detections
By default, components in an Angular application runs change detection for every user interaction. We can use ChangeDetectionStrategy.OnPush
in the @Component decorator. This tells Angular to run change detection only if an input has changed, and that all of the inputs can be considered immutable.
✔ Optimize ngFor with track By | Minimize DOM Manipulations
Most of the time we use ngFor to render data. In case, if any value updates, change detection cycle
runs for all rendered objects in ngFor. so trackBy
provides a unique identity to each row and saves unwanted rendering.
✔ Avoid Computing Values in the Template
This becomes a problem because Angular needs to re-run your function in every change detection cycle, if the function performs expensive tasks, it can be costly. So we can use pupe pipes here.
✔ Use pure pipes
Angular executes a pure pipe only when it detects a pure change to the input value.
✔ Lazy Loading
Lazy loading is the mechanism where instead of loading the complete app, we load only the modules which are required at the moment.
✔ Preload, Prefetch Strategy with Lazy Load
In the lazy load way, modules chunks file gets loaded when the user clicks on a particular route link. Here we can see some minor delay that results a bad user experience. Preload strategy is most popular to load all lazy modules in the background. So when a route activates, it loads module files without wasting a second.
✔ Unsubscribing Observables
Observables could create a memory leak issue. So it is better to unsubscribe them when they are not needed anymore.
✔ Tree-shaking
This is the process of removing unused code, resulting in a smaller build size. If you are using angular-CLI, Tree-Shaking is enabled by default. use providedIn
concept. If we create a service with provided-In: root and this is not injected to anywhere in the application, so during build time Angular itself removes this file from the bundle.
✔ Mark AOT as the default compiler
Mark AOT as default compiler if you are working angular version less than 9. It compiles the app during build time on the server, not on the browser, so it speeds-up loading files.
✔ Server-side rendering
We can use Angular Universal
to perform server-side rendering.
✔ PWA – Progressive Web App
PWA makes your app load much faster, it gives the offline capability to your app and gives a native app experience.
✔ Implementation of web worker
We can move heavy processing of requests to separate threads using web workers. in Angular 8 there is now a special CLI command to generate web workers.
✔ Prod flag
Enable prod flag to create a build for production. It will enable various build optimizations like uglify, AOT, removal of source maps, service workers (if enabled) producing a much smaller build size.
✔ IVY Compiler
It reduced bundle size by 40% than the current engine, also improved debugging experience. With IVY we can also get instance of ‘ng’ on the developer console. we can also load components as a lazy load instead of modules using IVY.
Read here for features of IVY:
What’s new in Angular 8 | Angular 8 Latest Feature By JS mount
✔ Unnecessary use of third-party packages
For small things avoid the use of third party packages.
✔ async and defer attribute in the script tag
To load the script use these attributes for better rendering of the page.
Read here for more on async and defer:
JavaScript Interview Questions & Answers for Experienced – Part 1
✔ Global Variables
global variables can be a cause of memory leaks. So try to avoid global variables.
💡 Tip to Improve JavaScript Performance
✔ Cache resources in Browser
We can cache multiple script files, images, CSS files into the cache using service workers. It increases loading much faster.
✔ Remove unused code and JavaScript
It increases bundle size so always check code and if not in any use for production just remove it.
✔ Prevent Maximum call stack exceeds
Take care of such code that can create overflow in the stack which results memory issue. Mostly its occurs when multiple frames are loaded in the call stack and do not get popped out.
✔ Defer the load of JavaScript that is not necessary
We don’t need all functions to load initially. So to load the page quickly we can use defer strategy in loading scripts.
✔ Avoid accessing DOM multiple times
If you have a need to read the content of an element several times, it’s better to save it in a local variable and can perform operations using this. In case if we remove the dom element, make sure to set this variable as ”null’ to avoid a memory leak.
✔ Avoid memory leaks
In Chrome Dev Tools, We can analyze website has memory leaks by recording a timeline in the Performance tab.
Usually, memory leaks come from pieces of the DOM that are removed from the page but have some reference in any variable, and therefore, the garbage collector can not eliminate them.
Use of many Closures is also an example of memory leaks.
✔ web workers
Use web workers when you need to execute code that needs a lot of execution time.
Tips to Boost Angular App Performance
💡 Increase Web page Performance
✔ Use of a CDN – Content Delivery Network
The CDN allows your site’s visitors to load data from their nearest server. If you use a CDN, your site’s files will automatically be compressed for rapid delivery across the globe.
✔ Optimize the size of images
Try to compress the image size. There are multiple tools available to reduce image size without impacting its quality.
✔ Minimize the number of JavaScript and CSS files
It creates a large number of HTTP requests if there are a lot of javascript and CSS files. So we can minify all JS files into one and also minify CSS files to prevent such requests over the network.
✔ Proper placement of CSS & JavaScript files
Take care of the proper placement of JavaScript and CSS files. Load script files at last which are not useful in the initial page load.
How JavaScript Works? Execution Stack, Event Queue, Function Execution Context, and much more…
JavaScript Rotate 2D matrix 90 degrees clockwise | Top Interview Question
HashTable Data Structure in JavaScript with Add Delete & Search Algorithms
TypeScript New & Latest Features You should know | JS Mount
Tips to Boost Angular App Performance
One thought on “Tips to Boost Angular App Performance | Web page Speed Optimization”