WordPress性能极致优化（一）CSS压缩优化、删除未使用的 CSS

对于一些国外主题，特别是Themeforest上购买的主题，几乎每个主题都是个大全家桶，因为他们需要提供尽可能多的功能，其实博壹不建议使用那些主题。但如果你必须要使用臃肿的主题，那么减减体重就必不可少了，首先就得从CSS入手，因为其实每个页面用不了那么多CSS样式，但这些主题动不动就是四五百Kb的CSS文件，一个页面往往要加载七八个CSS文件。

怎么样才能给CSS减负？

可以在 Chrome 开发工具覆盖率报告中找到最大的 CSS 文件。大多数情况下，最大的文件与臃肿的主题、页面构建器或插件有关。虽然使用轻量级主题/插件是显而易见的解决方案，但还有其他方法可以减小 CSS 文件的大小。

1. 找到你最大的 CSS 文件

在 Chrome 开发者工具中查看覆盖率报告并按“使用可视化”排序以查看最大的 CSS 文件。URL 通常包括文件来源的插件、主题或第三方代码的名称。现在您无需猜测就知道需要优化什么。

在 Chrome Dev Tools → Sources → Coverage 中查找最大的 CSS 文件

2. 在单独的文件中删除未使用的 CSS 和已使用的 CSS

有简单的方法，使用 FlyingPress、LiteSpeed Cache 或 Perfmatters 等插件删除未使用的 CSS。这些插件可以删除未使用的 CSS，但有些插件使用内联 CSS 加载，而其他插件则将其加载到单独的文件中。与内联方法不同，单独的文件速度更快，因为它不会增加 HTML 大小并且可以缓存文件。

3. 避免使用添加大量 CSS 的插件

查看覆盖率报告中的 URL 以了解某些插件是否添加了 CSS。

博壹总结了以下功能的插件常常会添加一大堆CSS和JS：

图库、滑块、联系表、评论、聊天、日历和与设计相关的页面构建器插件（比如下面的Elementor）。

4.重点：使用轻量级主题+页面构建器

其实 Gutenberg 本身作为页面构建器性能是最强的，也可以用 Oxygen Builder。 Elementor 或 Divi这两个是最臃肿的，他们前端添加了太多的 CSS、JavaScript 和字体。如果再加上 Elementor Pro 和 Ultimate Addons，难怪网站会巨慢无比了。但如果你必须使用他们，在设置页面一定要开启CSS优化。

压缩、优化、精简CSS文件

可以精简优化CSS达到缩小CSS文件的目的。同时也不会影响前端的样式。

一般的优化插件都会提供此功能，如WP Rocket 、WP-Optimize等。如果你不想装任何插件，自己动手也丰衣足食。

这里博壹提供精简CSS的国内网站。

在线JS/CSS/HTML 压缩 - 在线工具

国外还有专门网站可以删除未使用的 CSS。

PurifyCSS – 免费的 CSS 删除工具。添加您的网站，单击“清理 CSS”并打开缩小输出。扫描完成后，下载合并、净化和缩小的 CSS 文件。

Unused-CSS – 免费增值 CSS 删除工具。您可以通过该工具运行一个页面，它会告诉您将删除多少 CSS（以及使用的 CSS 选择器的百分比）。如果您想为整个站点下载 CSS，则需要向他们提供您的电子邮件并注册付费计划。

UnCSS – 更繁琐的 CSS 删除工具，需要您将 HTML 和 CSS 复制/粘贴到他们的工具中并下载。