移除无用的CSS

Remove unused CSS
移除无用的CSS
Overview

Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner.
为了减少下载量及更快的开始绘制，请移除或者延时加载无用的样式文件

Details

Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. Even if a stylesheet is in an external file

that is cached, rendering is blocked until the browser loads the stylesheet from disk. In addition, once the stylesheet is loaded, the browser's CSS engine has to evaluate every

rule contained in the file to see if the rule applies to the current page. Often, many web sites reuse the same external CSS file for all of their pages, even if many of the

rules defined in it don't apply to the current page.

当浏览器开始绘制一个网页前，必须下载和分析所有需要样式表。很多网站经常使用一个单一的样式表，这个样式表包含了所有页面需要的样式。样式表引擎会分析所有的样式是否和当前文档匹配。

The best way to minimize the latency caused by stylesheet loading and rendering time is to cut down on the CSS footprint; an obvious way to do this is to remove or defer CSS

rules that aren't actually used by the current page.
最好的办法是减少css样式表的大小。常见的解决办法是移除或者延时加载哪些当前页面不使用的CSS样式表

Tip: When you run Page Speed against a page referencing CSS files, it identifies all CSS rules that don't apply to that page.
page speed 会分析出来当前页面不使用的 CSS


Recommendations

    Remove any inline style blocks containing CSS that is not used by the current page.
   移除所有不使用的行内CSS样式表
    Minify CSS.
   最小户CSS
    If your site uses external CSS files shared among multiple pages, consider splitting them into smaller files containing rules for specific pages.
    如果你的网站使用一个所有页面公用的CSS样式表，将他们分拆成多个仅仅当前页面使用的样式表
    If a page references style rules that are not needed right at startup, put them in a separate .css file and defer loading of the file until the onload event is fired.
    当一个样式在页面展示的时候没有用，那么等待页面onload之后再加载这个样式表
    If you use JavaScript to generate styles, be sure that those functions aren't called from pages that don't use those styles. This may require some refactoring of JS code.

如果使用javascript生成CSS样式，请确保这些函数不被不使用这些样式的页面调用。如果存在这种情况，则需要重构js代码

https://developers.google.com/speed/docs/best-practices/payload?hl=zh-CN#RemoveUnusedCSS