Best Online Tutorials

SQL Tutorial

Free SQL Tutorial

SQL Interview Questions

SQL Practice Questions

SQL Tips & Tricks

SQL Errors

SQL Books

Angular Tutorial

Free Angular Tutorial

Angular Interview Questions

Angular Practice Questions

Angular Tips & Tricks

Angular Errors

Angular Books

Node.js Tutorial

Free Node.js Tutorial

Node.js Interview Questions

Node.js Practice Questions

Node.js Tips & Tricks

Node.js Errors

Node.js Books

React.js Tutorial

Free React.js Tutorial

React.js Interview Questions

React.js Practice Questions

React.js Tips & Tricks

React.js Errors

React.js Books

SSIS Tutorial

Free SSIS Tutorial

SSIS Interview Questions

SSIS Practice Questions

SSIS Tips & Tricks

SSIS Errors

SSIS Books

SEO Tutorial

Free SEO Tutorial

SEO Interview Questions

SEO Practice Questions

SEO Tips & Tricks

SEO Errors

SEO Books

Javascript Tutorial

Free Javascript Tutorial

Javascript Interview Questions

Javascript Practice Questions

Javascript Tips & Tricks

Javascript Errors

Javascript Books

MongoDB Tutorial

Free MongoDB Tutorial

MongoDB Interview Questions

MongoDB Practice Questions

MongoDB Tips & Tricks

MongoDB Errors

MongoDB Books

Next.js Tutorial

Free Next.js Tutorial

Next.js Interview Questions

Next.js Practice Questions

Next.js Tips & Tricks

Next.js Errors

Next.js Books

Tips to increase the performance of an angular application 

Prashant Surya  |   Nov 28, 2019  |  Views: 952


If you want to increase the performance of  your angular application follow the below tips one by one to reduce the loading time of your angular application.

Production build:
When we have to deploy the angular application , we should build with production mode with additional command --prod

ng build --prod

AOT build:
AOT saves the compilation time at browser end, which increase the laoding time upto 60%, using the command --aot at the time of build.

ng build --prod --aot

Cache Interceptor:
If possible use the cache interceptor to save the frequently used api responses in the cache.

Angular Universal (SSR):
Angular universal helps in prerendering the page at the server side thus saves the browser rendering time.

Minify css and js files:
minify all the js and css files you are referring in index file or in angular.json file, which reduces up-to 70% of the file size and thus reduces the loading time.

gzip flles:
zip the files while deploying on the server using gzip

Lazy loading:
Use lazy loading of modules in the application ,which reduces the loading time of unused chunk of files.

Compressed or resized images:
Use the compressed images, for better loading, use the exact size of images to make the page light weight.

Remove unwanted codes:
Before deploying. remove the unwanted codes, duplicate codes so as to make it neat and clean.
Unwanted lines of codes will increase the file size. So try to remove all.

Code Re-usability:
Try to reuse the code or methods rather than rewriting the same line of code at multiple places.

Server side pagination:
use server side pagination to reduce the unnecessary load of records at once on the page.

Use trackby in *ngfor:
use trackby while binding the records, to avoid unnecessarily refreshing of the records.

Pure Pipes:
Try to use the pure pipes, so as to reduce the unnecessary change detection cycle.

Less use of animation:
Try to use less of animations, in the page to reduce the loading time and complexity.

Good Hosting:
Choose a good hosting place for the application which provides good speed and bandwidth.

Content Contributor
Prashant Surya

Prashant Surya

Software developer at Uniserve Data Technologies Pvt. Ltd.  |   Noida, Uttar Pradesh, India

I am a software developer, freelancer and trainer working on technologies likes. MEAN stack, MERN Stack, ASP.NET full stack, WebRTC, ,PWA, SQL, JavaScript, jQuery, HTML, CSS, SEO, responsive UI/UX designing... having 7 years of experience in development in multiple domains like, eCommerce, RTA, capital markets, education, real estate...

Read related articles

how to convert html to image in angular

Prashant Surya  |   Feb 12, 2020  |  Views: 3179

Copy to clipboard in angular

Prashant Surya  |   Jan 14, 2020  |  Views: 1019

How to use require() in angular typescript file

Prashant Surya  |   Jan 9, 2020  |  Views: 1399

Angular demo book - DritalConnect Suggestions

Prashant Surya  |   Dec 23, 2019  |  Views: 932

Angular 8 reactive Form with validation

Prashant Surya  |   Dec 23, 2019  |  Views: 1146

What's new feature in Angular 9

Prashant Surya  |   Dec 18, 2019  |  Views: 975

Home loan EMI calculator in Angular

Prashant Surya  |   Dec 17, 2019  |  Views: 2531

How to initialize an interface in typescript

Prashant Surya  |   Dec 13, 2019  |  Views: 1513

How to add google adsense in angular universal

Prashant Surya  |   Dec 2, 2019  |  Views: 2147

How to use localstorage in angular universal ssr

Prashant Surya  |   Nov 28, 2019  |  Views: 3054

How to manage multiple async calls in angular

Prashant Surya  |   Nov 27, 2019  |  Views: 1136

Angular tutorial - DritalConnect

Prashant Surya  |   Nov 20, 2019  |  Views: 916

How to import a javascript file in angular

Pooja Goel  |   Nov 15, 2019  |  Views: 1067

Topics to learn in Angular | Angular Tutorial

Prashant Surya  |   Sep 25, 2019  |  Views: 1168

Difference between Angular and React js

Abhishek Roy  |   Sep 25, 2019  |  Views: 1049

Want to sell your software ?-

If you want to sell your readymade software to the genuine clients or businessman, list your software with details and demo links.

  • Sell ERP
  • Sell Website Clones
  • Sell App Clones
  • Sell Readymade Portals
  • Sell Readymade Websites
  • Sell Mobile Apps
  • Sell Window Apps

Clients will find it using our advanced search filter and will contact you directly.

No any charge for the product lsiting.

Do you own a Company ?+

Buy or Sell Commercial Property+

Are you a freelancer ?+

Looking for a job ?+

Are you a Service Provider ?+

Are you a blogger ?+

Do you own an IT Institute ?+