optimization.md

Optimization Report

Trial #1

---

Description: On using Lighthouse tool to audit our application, it showed in the report that minifying javascript files can reduce payload and script parse time.

Steps:

• Set optimization flag in our angular.json file to true. This flag enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining.

Results:

• The Lighthouse audit report showed that the score increased by 15 points.
• The compiled code size reduced significantly from 32.5mb to 20.8mb. Using webpack bundle analyzer we saw that the javascript files generated sizes decreased.

Trial #2

Description: Lighthouse report suggested that we can remove unused CSS, as it slows down the browser's construction of the render tree.

Steps:

• we checked the coverage tab in Chrome Dev Tools, and we noticed that angular material css was never used in our app, and we didn't need this package at all so we removed it.
• the styles.js file it's size significantly decreased from 108kb (~4500 lines) to 31kb (~1500 lines).

Results:

• The Lighthouse audit report didn't show much improvement in the preformance, but the total blocking time has decreased by ~300ms and first contentful paint decreased by 200ms