[Web performance optimization]-Use online tools to compress html, js, css

reference

1. Learning Points

• Use online tools to compress html, css, js
• Learn to analyze the efficiency improvement points before and after compression

2. Solution:

2.1 HTML compression

1. Online compression
2. nodejs provides the html-minifier tool (compresses the code at the build layer)
3. Back-end template engine rendering compression
   

2.2 CSS compression

1. Use html-minifier to compress css in html
2. Use clean-css to compress css

Use online compression as shown below.

2.3 js compression and confusion

1. Use html-minifier to compress js in html
2. Use uglifyjs2 to compress js
3. ps: Pay attention to dependencies
   

3. Compression comparison

1. Merged and compressed js
2. After the merge, the page blank time (DOMContentLoaded) has been reduced from 2.70s to 936ms now
3. Page load time (Load) reduced from 2.93s to 1.24s now