How did I improve angular app performance drastically?

Initially, I checked my app first meaningful paint time, it was showing 17secs and performance rating was 20 per cent. Finally, I was able to reduce to 5secs meaningful paint time and 70 performance rating using the below methods.

1. Reusable Components

First, figure out where there is a possibility to reuse components. It helps you to reduce app size.

2. Lazy Loading

Lazy loading helps you to load certain modules only when needed rather than loading all things at a time.

https://angular.io/guide/lazy-loading-ngmodules

3. Caching with Service Worker

Angular pwa help you cache assets and apis too. I used service worker to cache assets and some apis which are not gonna change frequently. You have even an option to give expire time for cache.

4. Lazy load scripts

You can load some external js scripts dynamically rather than loading all at the initial time.

https://thecodeframework.com/angular-how-to-lazy-load-external-scripts/

Try to use async and defer depends upon the scripts which you imported, it helps you to load scripts asynchronously with page parsing and after page parsing.

https://javascript.info/script-async-defer

5. Import what you need

When we import ui libraries, we import all components rather than importing what are we using.

Let me explain in detail, rather than importing whole library css

import 'antd/dist/antd.css'; 

you can import what all needed

import 'antd/lib/notification/style/css';
import 'antd/lib/modal/style/css';
import 'antd/lib/spin/style/css';
import 'antd/lib/select/style/css';

6. Image Thumbnails

In some cases, we don't have to show high-resolution pic. Even if we see flipkart and amazon products list there you don't have to show high-resolution pic. Figure out where all you can just show a thumbnail.

7. Lazy Load Images

Rather than loading all images when page loads you can lazy load images means when user gonna interact ui then only we load the image. Suppose if you have multiple sections with images rather than loading all sections images at a time you can load images when user gonna interact.

8. Shared Modules

Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app

https://angular.io/guide/sharing-ngmodules