文档中心 >Google PageSpeed

简化CSS

概览

压缩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文档看到这样的

  1. <html>
  2.   <head>
  3.     <style>
  4.       /* This comment will be stripped */
  5.       #iddy, .anotherId {
  6.         border: solid 1px #cccccc;
  7.         padding: 1.2em;
  8.         float: left;
  9.         color:##ff0000;
  10.       }
  11.     </style>
  12.     <link rel="stylesheet" type="text/css" href="extStyle.css">
  13.   </head>
  14.   <body>
  15.     Wow, <div class="classy" id="iddy">
  16.     CSS is <span>stylin'</span>.</div>
  17.   </body>
  18. </html>

extStyle.css代码如下

  1. div.classy span, div.classy img {
  2.     display: block;
  3.     border: none !important;
  4.     background: none !important;
  5.   }

那么，可以简化成这样

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

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

  1. 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