CSS /页面加载速度

Question

只是想真正得到一些意见，我试图提高我的网站的加载速度，并且Google pagespeed提出的一种方法是从我的CSS文件中为每个CSS文件移除未使用的CSS页。

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

我的问题是每个页面都有单独的CSS文件会使整体加载时间更快？我想第一页会加载得更快，但是每个页面都会有一个不同的CSS文件，这可能最终在整个网站访问中花费更长的时间？

另外的PageSpeed似乎警惕包括多个CSS文件，所以我想我不能真的“层”起来......

Answer 1

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

你只需要看看你的需求。如果您需要缩短初始加载时间，则应将样式移出全局样式表。如果您需要减少请求数量，则应使用全局样式表而非单个页面样式表。

Answer 2

如果CSS文件缓存则包括多个文件不会是一个优点。

注

出于性能方面的规则关于CSS可以

1. 尝试涅槃你的CSS

2. 优化CSS精灵

3. 避免使用滤镜

4. 避免CSS表达式

如需更详细的阅读经历这个

Best Practices for Speeding Up Your Web Site

Answer 3

我不会担心太多。通过过滤器运行你的CSS去除评论和空白，知道的小快捷方式，如padding: 1em 3em .5em 5px等，确保文件正确缓存，并从你的服务器发送gzipping，你会没事的。 CSS通常只是有效载荷的一小部分，不值得失眠。

我分裂一个CSS文件（交付给客户端）的唯一时间是，如果我的网站有很大的部分需要独特的风格，大多数人永远不会冒险：例如，管理部分。

Answer 4

做一点思考典型用户如何使用你的视线。如果（像很多网站一样）普通用户在继续之前只查看单个页面，那么为每个页面分配专门的CSS文件可能是值得的。

然而，在绝大多数情况下，一个CSS文件肯定是首选的解决方案

Answer 5

CSS文件被浏览器缓存无论如何，所以要么你有一个单一的文件或多个分立的，不会在第一次使用之后，所有这些东西都会被加载。

Answer 6

对所有页面只使用一个CSS。一旦你的css被缓存了，那么就不会有一次又一次地下载这个css的开销。
此外，广告亚当说Minify你的CSS

Answer 7

下载并安装YSlow，它会给你的你的网页速度有多快，以及实际的步骤来提高性能的准确描述。

Answer 8

DustMeSelectors是您需要的扩展。它会通过你的所有网站（并提供所有这些都是相互关联的）将获取你的CSS中哪些选择器不被使用任何地方。