Optimize your css

Series Overview

In the era of the rise of mobile web, speed optimization has been paid attention to by everyone again, because the network environment and performance of mobile phones are much worse than that of PCs. I guess everyone can also feel that when opening web pages on mobile phones, it can be clearly felt. to the page at a snail's pace.

The optimization of this series will be based on the mobile environment. Of course, most of the rules are also suitable for PC.

Basic principles of optimization

There are some basic ideas for speed optimization, summarize them in advance

On-demand loading (only load what you need)

Parallel (make serial things parallel)

Compression (reduce the size through compression) )

Cache (use cache to reduce request waiting)

Prediction (predict user behavior and issue requests in advance)

Merge (merge multiple scattered files to reduce requests)

Automation (make speed optimization a Conventional, combine with automated tools (such as gulp, grunt, fis) to reduce costs)

Get to the point, optimize your css

Why is the first article talking about css, because css is the most difficult to optimize, you can do both pictures and js Lazy loading, but CSS cannot, you must load css in front of dom, and you must accept the reality that css blocks dom rendering.

css optimization compression (cssshrink)

We generally perform regular compression on css, mainly to remove spaces and line breaks. The cssshrink recommended here will do more detailed work. cssshrink will first parse the css through the css parser, and then perform targeted optimization. For example, Huiba converts 0px and 0% to 0, bold to 700, and the ultimate compression at the character level. Thumbs up for the author.

Cssshrink specific optimization strategy, click here to view

cssshrink: GitHub address

css optimization merge

Use gulp-concat to merge multiple css together

Do not use @import to reduce blocking and requests

css disassembly The points

seem to conflict with the above. This is also the difference between css and other parts of optimization. Generally, we are used to putting css at the top and js at the bottom. This is a good practice, but not the best choice for css.

On the mobile side, everyone attaches great importance to the first screen time, which is the time when users see the page. Put the CSS of the entire page at the top. A large amount of CSS that is not used on the first screen will block the display of the first screen.

The head only puts the css that can be used on the first screen, and the css outside the first screen is moved down

css usage rate

Generally, after multiple people maintain the page, a large amount of unused css will be generated, and no one dares to delete it at will. This requires some detection tools

unu
1.1 unu is a Node.js module used to detect which css on the page are not used
1.2 Advantages: Provides a visual interface, very simple to use, enter the URL to view the usage of the css on the page
1.3 Disadvantages: Currently only Supports style tag css, and does not execute js on the page

uncss
2.1 uncss is a module that can remove unused css from the page
2.2 Advantages: supports command line and gulp, grunt plug-ins, supports link method, based on phantomjs, Simulates browser execution and supports js execution
2.3 Disadvantages: CSS exported by only one URL has no practical value, and it does not support style tags

critical
3.1 critical is used to detect unused css on the first screen Module
3.2 Advantages: You can enter the width and height of the first screen for detection, and there are gulp and grunt plug-ins
3.3 Disadvantages: It does not support url, only supports local html, and does not support style tags

Summary

Speed ​​optimization is a must for developers Things that reduce productivity need to be automated as much as possible, set up rules, and optimize painlessly while avoiding subsequent deterioration.