合并外部CSS

文档中心 >Google PageSpeed

概览

合并外部样式表到尽可能少的文件可以减少网络往返时间，以及下载其他资源的延迟时间。

说明

“合并CSS”是通过单一的CSS文件替换多个不同的CSS文件，这个CSS含有它们所有的内容，以减少在页面刷新时浏览器的HTTP请求的数量。除了减少HTTP标头和通信的开销，这种方法对TCP / IP慢启动的效果也很好，增加了通过浏览器网络连接的有效比特率载荷。

像外部JavaScript一样，多个外部CSS文件会带来额外的网络往返开销。如果您的网站包含许多CSS文件，合并成更少的输出文件可以减少延迟。我们建议最多是3，最好是2个CSS文件。

在开发周期中常常使用许多不同的CSS文件是有道理的，然后捆绑这些CSS文件一起作为部署过程的一部分。请参阅下面的推荐方式区分您的文件，您还需要参考作为部署过程一部分的捆绑文件更新您的所有网页。

建议

划分文件的最佳方法

下面是合并CSS文件的一些规则：

把CSS分为两个文件：一个包含渲染网页时启动所需要的最少代码，另一个包含的代码直到网页加载完成才需要。
很少使用的CSS放到一个文件里，只有当有需要时才使用这个文件。
对于不能缓存的CSS，考虑把它们嵌入到网页里。
不要在CSS中使用 CSS @import规则，如果可能的话，把imported的CSS嵌入到主CSS文件里，或者在HTML里嵌入imported CSS。

在文档头中正确地放置CSS

以正确的顺序引用外部CSS是有好处的，这样能够并行下载。

操作

查找所有CSS<link>标签，如果多于一个则移除那些链接并用一个单独的<link>代替后嵌入文档，把它放到第一个CSS<link>的位置上。

例如，在HTML里这样：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="1.css">
    <link rel="stylesheet" type="text/css" href="2.css">
    <link rel="stylesheet" type="text/css" href="3.css">
    <link rel="stylesheet" type="text/css" href="4.css">
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

合并CSS后，变成这样：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="1-2-3-4.css">
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

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

文章源地址：https://developers.google.com/speed/pagespeed/module/filter-css-combine