Lighthouse Angular performance improvement hints

Improve the performance of our Angular frontend app, using Lighthouse plugin of Chrome's DevTools:

SERVE STATIC ASSETS WITH EFFICIENT CACHE POLICY

HTTP Caching
- Edit HTTP response's cache-control / max-age to a bigger number

- Verify in Inspect/Network tab, that images are cached (from memory cache)
See https://web.dev/uses-long-cache-ttl/

Angular-level caching

- Create an ImageService that:
- Stores images' blobs in array of url/blob objects
- Retrieves images from this array, if already stored there

See https://medium.com/@sonigaurav119/cache-images-in-angular-43964e26ff62

Method-level caching with ngx-cacheable

- Use cacheable decorator to:
- Retrieve objects from cache (@Cacheable)

- Update cache when saving/updating function runs (@CacheBuster)

See https://itnext.io/improve-your-angular-app-performance-by-using-this-simple-observable-cache-decorator-71e81dfa76ae

MINIMIZE MAIN THREAD WORK (SCRIPT EVALUATION)

Optimize third-party JavaScript

     Check all "Show 3rd-party resources" points, and see if they are time-consuming.
     Consider refactoring these 3rd parties' packages

Debounce your input handlers

 - Using input handlers / animations can slow your app's responses

 - In order to diagnose this, 

    - Run Performance test in Performance tab (or click View Trace in Lighthouse tab)

    - Search for "Recalculate Style" or "Forced Reflow" signs, like below:

 See https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

Use web workers

 - Relief main thread's work, with web workers

 - Using these, some chosen actions/methods will execute on another thread.

 - First, we pass data from DOM/main thread to Worker thread (worker.postMessage(data))
 - Then, worker does the heavy job

 - Finally, worker passes data from worker's thread to DOM/main thread(postMessage(data))

See https://blog.bitsrc.io/angular-performance-web-workers-df382c4d3919

MINIMIZE MAIN BUNDLE SIZE

Remove imports of large CSS files (e.g. styles.scss) in SCSS/CSS files of all components.

Refactor former ones to smaller files, and then import in each component.

IMPROVE IMAGES/MEDIA FETCHING

Avoid multiple calls for media assets for every component or request.

Have a centralized service for this task.