CSS / 页面加载速度答案

【问题标题】：CSS / Page Loading SpeedCSS / 页面加载速度
【发布时间】：2010-12-22 18:50:08
【问题描述】：

真的只是想得到一些意见，我正在尝试提高我网站的加载速度，Google pagespeed 建议的一种方法是从我的每个页面的 CSS 文件中删除未使用的 CSS。

目前我为网站上的每个页面使用一个主 CSS 文件。

我的问题是，为每个页面设置单独的 CSS 文件会使整体加载时间更快吗？我猜第一页会加载得更快，但是每个页面都会有一个不同的 CSS 文件，这可能最终会花费更长的时间来完成整个站点的访问？

pagespeed 似乎也警告不要包含多个 CSS 文件，所以我想我不能真正将它们“分层”...

【问题讨论】：

【解决方案1】：

如果 CSS 文件被缓存，那么包含多个文件将不是一个优势。

注意

有关 CSS 的性能规则，您可以

更详细的阅读请阅读这里

【讨论】：

【解决方案2】：

在这种情况下，有两个相互矛盾的优化指令。当然，如果可能，您应该减小文件的大小，但您也应该尽可能少地请求。使用全局样式表可以减少请求的数量，但这意味着更大的文件。

你只需要看看你的需求在哪里。如果您需要减少初始加载时间，您应该将样式移出全局样式表。如果您需要减少请求的数量，您应该使用全局样式表而不是单个页面样式表。

【讨论】：

【解决方案3】：

下载并安装YSlow，它将让您准确了解页面的运行速度以及提高性能的实用步骤。

【讨论】：

【解决方案4】：

我不会担心太多。通过过滤器运行您的 CSS 以去除 cmets 和空格，了解诸如 padding: 1em 3em .5em 5px 等小快捷方式，确保文件被正确缓存，并使用 gzipping 从您的服务器发送，并且您会好的。 CSS 通常只占有效负载的一小部分，不值得为此失眠。

我唯一会拆分 CSS 文件（以交付给客户）的情况是，如果我的网站有很大一部分需要大多数人永远不会冒险的独特样式：例如，管理部分。

【讨论】：

【解决方案5】：

想一想典型用户将如何使用您的视线。如果（像许多网站一样）普通用户在继续之前只查看一个页面，那么为每个页面提供专用的 CSS 文件可能是值得的。

但是，在绝大多数情况下，单个 css 文件肯定是首选解决方案

【讨论】：

【解决方案6】：

CSS 文件无论如何都会被浏览器缓存，因此无论是单个文件还是多个拆分文件，在第一次使用时全部加载后都没有关系。

【讨论】：

【解决方案7】：

对所有页面只使用一个 CSS。一旦你的 css 被缓存，那么一次又一次地下载 css 将不会有任何开销。
另外，ad adam 说Minify你的css

【讨论】：

【解决方案8】：

DustMeSelectors 是您需要的扩展名。它将遍历您的所有站点（并提供所有这些都是相互链接的）将获取您的 css 中哪些选择器未在任何地方使用。

【讨论】：