简化CSS

文档中心 >Google PageSpeed

概览

压缩CSS代码可以节省很多字节和加速下载、解析以及执行时间。

简化CSS的好处跟简化JS一样：减少网络延迟，增强压缩，以及使浏览器更快加载和执行，webkaka提供了在线简化CSS的免费工具。

说明

通过分析链接和内嵌CSS，重写发现的图片和简化CSS，CSS在<style>块和<link>引用中发现。

许多图片在CSS里引用而不是在HTML，如果优化图片能重写这些图片，那么可以节省字节和延长缓存时间。

简化可以大大的减少公共CSS的字节数，通过删除所有说明文字和大多数空白符和缩短颜色名称。

只有headers里包含public或没有Cache-Control的URLs资源需要优化。

操作

这个重写分析HTML文档和找到所有在<link>标签引用的CSS，以及在<style>标签内嵌的CSS，分析CSS和简化结果。

实例

例如，在HTML文档看到这样的

<html>
  <head>
    <style>
      /* This comment will be stripped */
      #iddy, .anotherId {
        border: solid 1px #cccccc;
        padding: 1.2em;
        float: left;
        color:##ff0000;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="extStyle.css">
  </head>
  <body>
    Wow, <div class="classy" id="iddy">
    CSS is <span>stylin'</span>.</div>
  </body>
</html>

extStyle.css代码如下

div.classy span, div.classy img {
    display: block;
    border: none !important;
    background: none !important;
  }

那么，可以简化成这样

<html>
  <head>
    <style>#iddy,#anotherId{border:solid 1px #ccc;padding:1.2em;float:left;color:red}</style>
    <link rel="stylesheet" type="text/css" href="extStyle.HASH.css">
  </head>
  <body>
    Wow, <div class="classy" id="iddy">
    CSS is <span>stylin'</span>.</div>
  </body>
</html>

而重写文件extStyle.HASH.css包含这些代码

dif.classy span,div.classy img{display:block;border:none!important;background:none!important}

本页面中的内容已获得知识共享署名3.0许可，并且代码示例已获得Apache 2.0许可；另有说明的情况除外。

文章源地址：https://developers.google.com/speed/pagespeed/service/MinifyCSS