优化CSS文件大小过大

Question

我试图通过Google PageSpeed Tools检查我的网站速度。

谷歌的PageSpeed工具结果：

http://cellsoftware.co.uk/wp-content/cache/autoptimize/css/autoptimize_741fb0cdb70079b195ed32dd2fe38206.css 

CSS文件太多大。我下载了检查大小，它的大小为1.11MB。之后我试图减少css的Critical Path CSS Generator它的容量MAX：800000个字符，但我的css文件有1169501个字符。所以它不能减少。

那么我可以使用什么过程进行优化？

Answer 1

有点晚了，但我的方法是看看为什么你的CSS文件是如此之大。 1.11MiB造型太多了。为了比较，一个好的CSS尺寸应该低于150KiB，也许最大200KiB。如果你的CSS结束了，你可能会做一些优化。几点优化：

• 未使用的CSS。你的样式表是否包含甚至没有使用的CSS规则？有些工具可以扫描/抓取您的整个网站，并为您提供未使用样式行的引用。
• 任何数据URI就像CSS中的base64编码图像？也许考虑把这些拉出来。但是，如果这是您的情况，您可能可以通过某种图像文件大小处理工具来优化图像，然后将它们重新编码为您的CSS。
• 风格重复。如果一组类有很大一部分风格重叠，那么它们应该共享一个风格定义，然后根据特定的风格要求在CSS下单独进行更改。
• 过度使用复杂的选择器。通常使用ID或类名是首选，应该避免使用复杂的级联DOM选择器。这不仅会伤害浏览器对CSS的解析，而且会使CSS文件本身膨胀。

如果您使用的模板（看起来像您使用Wordpress），那么我几乎建议扔掉您当前的模板，得到一个很好的靠近你想要的样式和进一步的样式那个有着上述规则的人。我相信这可能是您通往快速网站的最快途径。