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.
When we have to deploy the angular application , we should build with production mode with additional command --prod
ng build --prod
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
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.
zip the files while deploying on the server using gzip
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.
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:
while binding the records, to avoid unnecessarily refreshing of the records.
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.
Choose a good hosting place for the application which provides good speed and bandwidth.