Detailed explanation of Web front-end performance optimization: resource merging and compression

Resource merging and compression for two purposes

1. Reduce the number of http requests
2. Reduce the size of requested resources

Google homepage case study

1. HTML compression
2. CSS compression
3. Compression of js
4. File Merger
5. Enable gzip

1. HTML compression

Figure 1 shows Sina's homepage without compression, while Figure 2 shows Google's homepage after compression.

HTML code compression is to compress the characters that have meaning in the text file but are not displayed in HTML, including spaces, tabs, line breaks, etc., as well as some characters with other meanings, such as
HTML comments can also be compressed.

How to compress HTML

1. Use online websites for compression
2. nodejs provides html-minifier tool
3. Backend template engine rendering compression

2. HTML compression

1. Dead code removal
2. CSS semantic merging

How to compress HTML

1. Use online websites for compression
2. Use html-minifier to compress CSS in HTML
3. Use clean-css to compress CSS

3. Js compression and confusion

1. Removal of invalid characters
2. Remove comments
3. Code semantic reduction and optimization
4. Code protection

How to compress and confuse js

1. Use online websites for compression
2. Use html-minifier to compress js in html
3. Use uglifyjs2 to compress js

3. File Merger

Comparison of file merging and non-merging

1. There are upstream requests inserted between files, which increases the network delay by N-1 times.
2. More seriously affected by packet loss
3. You may be disconnected by proxy server

Problems with file merging:

1. First screen rendering problem
2. Cache invalidation problem

Solve the problem of file merging:

1. Public library merging
2. Merging different pages
3. Act according to circumstances and adapt to changing circumstances

How to compress and confuse js

1. Use online websites for compression
2. Use nodejs to implement merging

Image-related optimization
The difference between png8/png24/png32

1. png8 - 256 colors + support for transparency
2. png24 - 2^24 colors + no support for transparency
3. png32 - 2^24 colors + support for transparency

Each image format has its own characteristics. It is important to choose different image formats for different business scenarios.

Common business scenarios for images in different formats

1. jpg - Most business scenarios that do not require transparent images
2. png supports transparency and is compatible with browsers
3. Webp compression is better and compatible with iOS webview
4. svg vector graphics, embedded code, relatively few, relatively simple image styles

Common business scenarios for images in different formats

1. jpg - Most business scenarios that do not require transparent images
2. png - Most business scenarios that require transparent images
3. webp —— Android All
4. SVG vector graphics——Business scenarios with relatively simple image styles

Compress the image

For real pictures, discard some relatively insignificant color information

CSS Sprite

Combine several images used on your website into a single image

advantage

Reduce the number of HTTP requests your website makes

shortcoming

When the integrated image is large, it will be slow to load at one time

Image inline

Embed the image content into HTML to reduce the number of HTTP requests for your website

Using webp on Android

The advantage of WebP lies in its better image data compression algorithm, which can bring smaller image size and has image quality that is indistinguishable to the naked eye; it also has lossless and lossy compression modes, Alpha transparency and animation features, and the conversion effects on JPEG and PNG are excellent, stable and unified.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.