Optimising Angular Application

I like to explain the ideal steps for optimising an angular project as per the priority. These steps should be applied one after the other to know the signficance of each techinque for your case. This will also let you know which technique dev team must bring while developing a new angular application.

CDN for assets.

  a. CDN store your assets very close to the end-users network. 
  b. Usually bundles size of a large application is above 5 mb's.
  b. Cloudfare can provide 2x speedup at some cost.

Service Workers

  a. Avaible with angular out of the box.
  b. POST requests are not cached by service workers
  	1. If they are idempotent requests.
    2. If made by get would have crossed 2k safe character limit.
    3. Then you need to cache them using some external mechanisms.
    3. https://github.com/angular/angular/issues/29790 
    4. Use ngx-cacheable
    	1) It caches methods.
        2) Create a unique key of your post request by md5.
        3) This also provides a cache invalidation support.
        4) Can be hooked at service-worker update event.
        5) Can be hooked at custom app update notification service.
  c. Seamless update with and without user interaction.
  	1. Depending on the state of a page.
    2. Depending on api update. 
    3. Can invalidate cache in the background.
    4. Refetch the updated resources.
  d. Fallback if service worker disabled or not available.
     1. Optimize browser cache configuration provided by default in angular.
     1. E-tag can be configured by your hosting server and through CDN.
     2. Last modified is important for some api requests.

Optimized API hits

 a. At client side
    1. Minimize data footprint
       1. Optimise request response data structure.
       2. Remove unwanted fields.
 b. At the server side.
    1. When doing SSR.
       1) ngoninit is fired some APIs can be called at this time.
       2) Enabling fast APIs response.
       3) If APIs & node server are on the same network.
       4) Send this data to the client (Client side rehydration)
       5) Initialize state based on above.
    2. Some optimal mechanism for keeping static data at the client.
       1) Such as in-memory redis.
       2) So, this data is not requested through some api.
       3) This also reduces development time.
       4) You can precache this data.
       5) If some of your components are completely static data-driven.

Lazy loading

 a. Modularization of independent components & pages.
 b. This reduces initial time to interactive significantly.
 c. Reduces app load time.
 d. Loading popups lazily improved our app's performance.
 e. Twice as our case had around 10 heavy popup's.
 f. To wrap the whole site's functionality in just two unique pages.
 c. Images or any static resource can also be loaded lazily or prechaced.
 d. Using some heustic alogrithm.

Images Optimizations

 a. Jpeg format can be upgraded.
 b. Png format can be upgraded
 c. Webp can loaded for browsers which support it.
 d. This also improves site load by 75%. 
 e. Example here https://stackblitz.com/edit/angular-webp-pipe.
 f. Build a webp converter from source at your machine.
 g. So you can use the latest stable release of standard alogrithm.
 h. Loading a webp when image is referenced in css or scss.
 	1. Will be little tricky.
    2. But you can append a class to body.
    3. Based on webp support detection service.
    4. Specify respective webp or other image based on that class.