Optimize your CSS

Series Overview

In the era of the rise of mobile web, the speed of the optimization of the re-attention, because the network environment and performance of the mobile phone is much worse than the PC, it is estimated that we can also feel the use of mobile phone to open the page, can obviously feel the page snail-like speed.

The optimization of this series is based on the mobile environment, and the vast majority of rules are equally suitable for PC-side.

Basic principles of optimization

Speed optimization There are some basic ideas to summarize in advance

Load on demand (load only what you need)

Parallel (let the serial thing parallel together)

Compression (reduces volume by compression)

Cache (with cache, reduce request waits)

Forecasting (predicting user behavior, making a request in advance)

Merging (merging multiple fragmented files to reduce requests)

Automation (speed optimization becomes a routine, and automation tools (e.g. Gulp,grunt,fis) combine to reduce costs)

Go to the chase and optimize your CSS

Why the first article about CSS, because the CSS is the most difficult to optimize, the picture and JS you can delay loading, and CSS can not, you have to load CSS in front of the DOM, you must accept the CSS blocking DOM rendering of the reality.

CSS optimization compression (cssshrink)

We generally do regular compression of the CSS, mainly to do the space and line-wrapping work. The recommended Cssshrink will do more fine work, Cssshrink will first through the CSS parser CSS parsing, and then targeted to optimize. For example, 0px and 0% converted to 0,bold converted to 700, the character level of extreme compression, for the author to praise.

Cssshrink Specific optimization strategies, click here to view

Cssshrink:github Address

Merging of CSS Optimizations

Use Gulp-concat to merge multiple CSS together

Do not use @import to reduce blocking and requests

CSS Split

There seems to be some conflict with it, and this is where CSS and other parts of the optimization are different. Generally we are all used to put CSS on the top, JS placed at the bottom. This is a good habit, but not the best choice for CSS.

On the mobile side, we attach great importance to the first screen time, that is, the time users see the page. The entire page of CSS on the top, a large number of the first screen can not use the CSS will block the display of the first screen.

Head only on the first screen can use the CSS, the first screen outside the CSS Move Down

CSS usage rate

General page after the maintenance of many people, will produce a lot of use of CSS, we also dare not arbitrarily delete, which requires some testing tools

Unu
1.1 UNU is a node. js module used to detect which CSS is not used in the page
1.2 Advantages: Provide a visual interface, use very simple, enter the URL, you can see the page CSS usage
1.3 Disadvantages: Currently only support style tag CSS, and do not execute the page JS

Uncss
2.1 Uncss is a module that can put the page CSS unused to the removal
2.2 Advantages: Support command line and gulp, grunt plug-in, support link mode, based on PHANTOMJS, simulation browser execution, support JS execution
2.3 Cons: CSS exported with only one URL, no real value, and style tag not supported

Critical
3.1 Critical is a used to detect what the first screen CSS is useless to the module
3.2 Advantages: Can input the first screen width high to detect, have gulp, grunt plug-in
3.3 Disadvantages: URL is not supported, only local HTML is supported, style tag is not supported

Summarize

Speed optimization is a productivity-reducing task for developers, so you need to automate as much as possible, set up rules, painless optimization, and avoid subsequent deterioration.

