The best 11 tips to boost angular application performance
I was wondering why people often says that React is faster than Angular and Angular is not much faster as compare to React but then i noticed some of most common mistakes a developer do while working with Angular framework.
We can develop an Application in Angular with more power and performance as compare to any other Technology today.
Angular can perform very well on the track and according to expectation of Developers and Vendors but as I told you before Angular is a huge framework so we must have cleared basics of Angular framework that really help building a best Angular architecture so that the speed and overall performance of an Angular application can be well-behaved.
Let me go you through my best 11 tips boost any angular applications that can help you boost angular web as well as angular mobile performance.
Reuse components
When it comes to angular bundle size we must take care of unnecessary files we have in the application. we can recycle components and the code itself (functions etc...) of an angular app so that the application architecture is more reliable and reusable.
- We can use angular decorators @Input and @Output to transport data from one component to another.
- Make reusable functions
Server Side Rendering
Server side rendering comes with many advantages in angular. Angular Universal is used to render an angular application at server side. Normally Angular is a framework that is used to build Single Page Applications (SPA's) and executes on the browser which means angular application renders on client side , not on the server side.
Advantages:
- Load initial Page much faster
- SEO friendly
- Facilitate web crawler through search engine optimizations
- load Angular server side
I have a complete Article on Server Side Rendering using Angular universal. Have a Look!
Unsubscribe Observables
In RXJS Subscribing has an unsubscribe() function to release the resource from the execution we can cancel observable if it is completed executing.
- It can prevent memory leakage in the application.
- Unsubscribing a subscription can cancel all its child subscribes and make them destroyed.
export class AppComponent implements OnInit, OnDestroy {
subscription: Subscription
ngOnInit () {
var observable = Rx.Observable.interval(1000);
this.subscription = observable.subscribe(x => console.log(x));
}
ngOnDestroy() {
this.subscription.unsubscribe()
}
}Avoid unnecessary files from main bundle
We must keep all necessary files in the main bundle as the application need only needed files to serve. This can avoid having big bundle size so that the application loading time improves.
Having light bundle size should make application more free to serve other files faster.
Consider deleting unnecessary file first.
Cumulative layout shift
To have better user experience we must take care of layouts we have in our site. The moment of visible elements in layouts because of
- Images
- On dynamic tables data load
shifts the layout of your page so try giving them fixed length in the layouts.
NgForOf - Angular (ngFor TrackBy)
Angular Provides trackBy function that is used to trigger ngForOf on every ngDoCheck that means when any property of the object changes in *ngFor then this trackBy function get triggered and that can help us to make change detection for only changed property in the object.
So that we can avoid more change detection on the layout of an angular application!
Here is how we do it-
@Component({
selector: 'my-app',
template: `
<li *ngFor="let item of list; trackBy:identify">{{item.name}}</li>
`
})
export class App {
list:[];
identify(index, item){
return item.name;
}Enable AOT
AOT or Ahead Of Time is used to create application bundle before running the angular app on browser by default AOT is disabled and Angular uses JIT that means Just in Time technique where Angular create application bundle at run time then browser downloads is and then render on the Web Page.
Benifits:
- Smaller bundle size
- Fast rendering
- spots compilation errors
Change Detection Strategy (OnPush)
Angular uses a strategy to detect changes in angular components and there is a strategy that works default ChangeDetectionStrategy.Default, where a component is always check for changes. We have change detection strategy OnPush where angular will instruct the change detection to skip all component where no change detected and look for these all situations:
- Change in Input references in a component
- Change on event click
- Changes on Observable Subscribing
then Angular only checks if there is really change detects in a component.
Detaching the Change Detector
Detaching the change detector can help you skip checking the component and its subtree. That means Angular will not apply the change detection technique to detect changes in component and on its subtree. we have some methods to detach change detection.
- markForCheck
- detach
- detectChanges
- checkNoChanges
- reattech
Lazy load Images
Lazy load image is technique to load images when required that means when the actual active portion of an image is being rendered then it loads , Normally all images get loaded on page load and that can cause the application speed or show content little bit late because of multiple API's calling on a web page.
If some big size images occurred while loading the site then a delay may occurred while loading and that can cause the loading time of you site.
- Smooth image load
- Lesser https calls on page load
- Fast Application Rendering
Preloading in Angular
Preloading is a mechanism of loading angular module in background. there are types of preloading in angular
Preloading modules
Preloading module can help loading site more faster it loads all modules initially asynchronously but if must be applied if your application has less modules and have small bundle size just opposite of lazy loading where required modules get loaded and does not load all modules by default.
Preloading Component data
With preloading component data you can avoid rendering components until the data loads with the help of resolver.
There are Two strategy for preloading in angular
- Build-in preloading strategies — There is no Preloading (default) or PreloadAllModules.
- Custom preloading strategies — Preload after some time , Preload on event change, preload network quality , preload at last.
Page Speed Insight
Last but not least , Try using Google's page speed insight to check weather the performance of the application is Good or Bad.
It has 6 sections to give the performance of your application here they are :
Summary
In this section , we focused on top 11 tips to boost angular application performance
Some of them are Angular framework concepts and some are of advance tricks like change detection strategy to only detect changes when needed. This some strategy we can use in our angular application to avoid more loading time.
.jpg)
0 Comments