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

0

0