优化 CSS 文件太大
Optimize CSS file size too big
我正在尝试通过 Google PageSpeed Tools 检查我的网站速度。
Google PageSpeed 工具结果：
http://cellsoftware.co.uk/wp-content/cache/autoptimize/css/autoptimize_741fb0cdb70079b195ed32dd2fe38206.css
css 文件太大。我下载了检查大小，大小为 1.11MB。之后我试图将 css 减少 Critical Path CSS Generator 它的容量最大：800000 个字符，但我的 css 文件有 1169501 个字符。所以不能减少。
那么我可以使用什么流程进行优化？
有点晚了，但我的方法是查看为什么您的 CSS 文件如此之大。 1.11MiB 的样式太多了。为了比较，一个好的大小 CSS 应该在 150KiB 以下，最大可能是 200KiB。如果您的 CSS 超出了这个范围，您可以进行一些优化。几点优化：
- 未使用 CSS。您的样式表是否包含 CSS 甚至未被使用的规则？有一些工具可以 scan/crawl 您的整个网站并为您提供未使用的样式行的参考。
- 您的 CSS 中有任何数据 URI 之类的 base64 编码图像吗？也许考虑把这些拉出来。但是，如果是这种情况，您可以通过某种图像文件大小处理工具优化图像，然后为您的 CSS.
重新编码它们
- 样式重复。如果一组 class 元素有很大一部分样式重叠，则它们应该共享一个样式定义，然后根据特定样式要求进一步向下 CSS 单独更改。
- 过度使用复杂的选择器。通常最好有一个 ID 或 class 名称，并且应该避免复杂的级联 DOM 选择器。这不仅会损害 CSS 的浏览器解析，还会使 CSS 文件本身膨胀。
如果您使用的是模板（看起来您使用的是 Wordpress），那么我几乎建议您放弃当前的模板，获得一个接近您想要的精简模板并进一步设计样式牢记上述规则。我相信这可能是您访问快速网站的最快途径。
我正在尝试通过 Google PageSpeed Tools 检查我的网站速度。
Google PageSpeed 工具结果：
http://cellsoftware.co.uk/wp-content/cache/autoptimize/css/autoptimize_741fb0cdb70079b195ed32dd2fe38206.css
css 文件太大。我下载了检查大小，大小为 1.11MB。之后我试图将 css 减少 Critical Path CSS Generator 它的容量最大：800000 个字符，但我的 css 文件有 1169501 个字符。所以不能减少。
那么我可以使用什么流程进行优化？
有点晚了，但我的方法是查看为什么您的 CSS 文件如此之大。 1.11MiB 的样式太多了。为了比较，一个好的大小 CSS 应该在 150KiB 以下，最大可能是 200KiB。如果您的 CSS 超出了这个范围，您可以进行一些优化。几点优化：
- 未使用 CSS。您的样式表是否包含 CSS 甚至未被使用的规则？有一些工具可以 scan/crawl 您的整个网站并为您提供未使用的样式行的参考。
- 您的 CSS 中有任何数据 URI 之类的 base64 编码图像吗？也许考虑把这些拉出来。但是，如果是这种情况，您可以通过某种图像文件大小处理工具优化图像，然后为您的 CSS. 重新编码它们
- 样式重复。如果一组 class 元素有很大一部分样式重叠，则它们应该共享一个样式定义，然后根据特定样式要求进一步向下 CSS 单独更改。
- 过度使用复杂的选择器。通常最好有一个 ID 或 class 名称，并且应该避免复杂的级联 DOM 选择器。这不仅会损害 CSS 的浏览器解析，还会使 CSS 文件本身膨胀。
如果您使用的是模板（看起来您使用的是 Wordpress），那么我几乎建议您放弃当前的模板，获得一个接近您想要的精简模板并进一步设计样式牢记上述规则。我相信这可能是您访问快速网站的最快途径。