减少未使用的 CSS 是 PageSpeed Insights 等工具中的常见错误提示。这种多余代码通常由主题和插件引起，不必要地增加网站文件大小，导致加载变慢和用户体验不佳。作为长期 WordPress 用户，我亲眼见过未使用 CSS 的负面影响。它会严重拖慢页面、增加网络数据使用，尤其对移动用户。
有很多方法从 WordPress 网站移除未使用的 CSS 脚本，但下面只讲新手友好、最有效的方法。另外，下面，你会学到为什么未使用 CSS 规则是性能问题、如何检测它，以及在不损害网站功能的情况下移除未使用 CSS 脚本的最佳策略。我们开始，为最大速度和性能优化 WordPress CSS。
WordPress 中什么是未使用的 CSS？
未使用的 CSS 指存在于 WordPress 主题或插件中、但未用于样式化当前网页任何元素的层叠样式表代码。这可能由几个原因造成：
- 过时的主题或插件脚本：主题和插件可能包含更新或更改后不再需要的 CSS 代码；
- 定制：如果你对主题做了自定义修改，一些 CSS 样式可能变得冗余；
- 开发遗留：开发者有时可能在主题或插件中留下未使用的 CSS 代码。
另外，某些插件功能不是所有页面都需要，却全站执行。Contact Form Builder 就是这样一个例子。大多数网站只在联系我们页面添加联系表单，所以全站加载联系表单 CSS 脚本是不必要的。
另一个例子是用户访问网站首页时。浏览器不需要加载样式化博客或联系我们页面的 CSS 规则。但因为联系我们页面或博客的 CSS 在全局样式表中，浏览器仍然必须下载和渲染它。这不仅耗时，还不必要。你需要优化 CSS 脚本的加载，让它只在实际需要的页面上执行。
为什么在 WordPress 中移除未使用的 CSS？
未使用的 CSS 是性能杀手，会显著影响网站加载速度。它给网站文件大小增加不必要的重量，显著拖慢加载时间。这反过来负面影响用户体验，因为访客更可能放弃加载慢的网站。除了影响用户体验，加载慢还会损害网站搜索排名。Google 和其他搜索引擎优先考虑快速加载的网站，所以移除页面不使用的 CSS 文件有助于改善网站在搜索结果中的可见度。
通过消除未使用的 CSS 规则，你可以：
- 改善网站速度：更轻量的代码和更高效率，网站速度可能改善并达到最佳性能；
- 增强 SEO：由于速度和性能的改善，你可能会看到搜索排名位置提升；
- 减少服务器负载：更小的网站文件大小给服务器更少压力。这是显而易见的；
- 优化移动性能：未使用的 CSS 在移动设备上尤其有害。考虑到移动互联网流量占比，你应该为移动用户优化 WordPress CSS 样式。
除此之外，修复”减少未使用的 CSS”警告对首次内容绘制、最大内容绘制和可交互时间有显著的真实世界性能影响。页面上加载太多未使用的 CSS 文件会增加 FCP、LCP 和 TTI，这些是 Core Web Vitals 指标的一部分。通过解决未使用 CSS 警告，你应该看到 PSI 中这些指标的分数降低。
如何在 WordPress 中检测未使用的 CSS 样式
有几个工具可以让你发现 URL 中未使用的 CSS 规则。你的技术知识和舒适度决定使用哪些工具。不过，检测未使用 CSS 脚本最流行的工具是 Google 的 PageSpeed Insights。在 PageSpeed Insights 中输入特定 URL，点击”分析”。等几分钟；PSI 会运行全面的性能测试，包括现场和实验室测试。然后你得到结果（如下图）。
其他查找未使用 CSS 的工具包括 DevTools 中的代码覆盖、PurifyCSS 和 UnCSS。这些工具工作方式不同。所以，你需要理解这一点，知道哪个选项适合你。对开发者来说，UnCSS 似乎是更好的选项。它让你手动移除网站代码中未使用的 CSS 样式。只需把你的 HTML 和 CSS 代码粘贴到工具中，让它施展魔法。过程完成后，复制优化或使用的代码去使用。
PageSpeed Insights 是新手或需要自动化的人的合适工具。它是调查页面未使用 CSS 规则的更简单方式。它精确定位需要移除的 CSS 文件，并建议帮助你解决问题的资源。
用 WordPress 插件移除未使用的 CSS
有几个有效的 WordPress 插件可以帮助你移除未使用的 CSS、改善网站性能。在我看来，插件是减少 WordPress 未使用 CSS、把风险最小化到最低限度最容易的方式。插件自动化过程。你不需要手动翻查数百行代码来定位要移除哪些未使用脚本。另外，如果你是零编码经验的新手，尝试自己做会是一次令人沮丧的经历。
1. WP Rocket
WP Rocket 是热门的高级缓存插件，提供广泛功能，包括移除未使用 CSS 的能力。插件让你自动删除网站的未使用 CSS。过程一键完成，会移除网站的渲染阻塞 CSS 样式。这是优化 CSS 交付的最佳方案。它改善用户体验、帮助网站更快加载。
这里唯一的问题是 WP Rocket 是付费插件。没有免费方案。所以，你必须购买授权才能用 WP Rocket 移除未使用 CSS。在这里获取 WP Rocket 插件，按下一步操作。插件在网站激活后，进入 WP Rocket 文件优化设置标签页。
先勾选”压缩 CSS 文件”选项。这帮助移除空白和开发者对脚本的注释，减小文件大小。反过来减少 WordPress 数据库大小、改善加载时间、提升性能。
接下来，滚动到优化 CSS 交付选项。这里启用从网站移除未使用 CSS 样式。WP Rocket 提供两个选项：移除未使用的 CSS 或异步加载 CSS。不过，它推荐移除未使用的 CSS 以获得更好性能和兼容性。
此时，WP Rocket 会自动分析网站的 CSS 文件并移除任何未使用的样式。你不需要做其他任何事，这个过程就会自动运行。它在你每次更新网站时自动工作。每当你更新内容、删除或添加插件、更新主题等，移除 CSS 文件功能都会处理网站文件并消除任何遗留脚本。然后，再次在 PageSpeed Insights（PSI）中测试网站，看看性能改善了多少。
注意：你可能会在 PSI 中看到更少的未使用 CSS 错误，因为完全移除网站未使用 CSS 几乎不可能。由于 WordPress 的工作方式，仍会有一些遗留。另外，页面超过可接受阈值时，PageSpeed Insights 会触发减少 CSS 警告。但影响会很小，不会对真实用户体验产生明显效果。
比如，这是一个在 PSI 中未使用 CSS 错误潜在节省 498 KB 的页面（没有 WP Rocket）。启用 WP Rocket 的移除 CSS 文件模块后，降到 33 KB。
除了优化 CSS 文件，WP Rocket 还自动优化网站首屏区域的 JavaScript 文件和关键图片。要启用 JS 文件优化功能，在同一个文件优化标签页中找到设置。你可以启用”压缩 JavaScript 文件”、”延迟加载 JavaScript”和”延迟 JavaScript 执行”选项。这些是适合我博客的设置。测试哪个选项适合你的博客，坚持使用。
每个 WordPress 博客都有适合自己的设置。启用选项后，测试网站确保它保持视觉设计、正常加载、没有破坏。WP Rocket 的 Critical CSS 图片优化是自动的。它完全在后台工作。不过，它只适用于首屏图片。在本指南中了解更多 WP Rocket 如何处理关键 CSS 生成。
2. FlyingPress
另一个减少未使用 CSS 脚本数量的有用 WordPress 插件是 FlyingPress。你可以打赌这个插件非常高效地快速完成任务。它有三种处理页面未使用 CSS 代码的方式。不过，FlyingPress 也是高级插件。你可以直接从开发者网站购买。FlyingPress 是功能完整的 WordPress 性能插件。从缓存和图片优化、CSS 和 JS 优化、懒加载到数据库优化和臃肿移除，FlyingPress 确保你的网站为真实用户顺畅运行。
要用 FlyingPress 移除未使用 CSS，先安装并激活插件。进入 FlyingPress 设置页面，启用”移除未使用 CSS”设置。这会打开三个设置选项：
- 异步（Asynchronously）：这个选项在后台加载未使用 CSS，不影响网站速度或性能。其他资源继续加载，未使用文件不会阻塞渲染；
- 用户交互时（On-user Interaction）：未使用 CSS 会在用户与页面交互时（如点击鼠标、屏幕移动或滚动）加载。这个选项不是最佳选择；
- 移除（Remove）：FlyingPress 会完全从网站移除未使用 CSS 文件。我想只有确定自己在做什么时才应该考虑这个选项。
FlyingPress 的未使用 CSS 移除选项提供最佳性能，但可能破坏网站。所以，启用选项时彻底测试网站行为、性能和视觉效果。除了三个设置，你还可以从移除未使用 CSS 过程中排除特定样式表。如果你有对网站功能很重要的 CSS 文件，在排除样式表框中输入它们的 URL 或路径。删除页面未使用 CSS 规则时，FlyingPress 会跳过该样式表。同样适用于应包含在使用 CSS 文件中的 CSS 选择器。用这个功能强制 FlyingPress 在选择器中包含使用 CSS 规则。
3. NitroPack
NitroPack 是基于云的缓存和优化服务，可以显著改善网站性能。它提供新手友好的方式删除网站的未使用 CSS 规则。在 NitroPack 中启用”移除未使用 CSS”功能时，你会有更多选项微调设置。你可以进一步优化达到最大性能。
以下是 NitroPack 优化 CSS 文件、移除未使用规则的方式。先注册免费 NitroPack 账户。然后下载插件并连接到 WordPress 网站。然后进入插件的缓存设置，点击HTML & CSS 标签页。找到移除未使用 CSS 选项并启用。
启用移除未使用 CSS 会显示另外两个设置：移除重复和内联最终 CSS。移除重复会删除关键 CSS 生成的最终优化文件中任何已使用的 CSS 规则。这确保浏览器渲染页面时不加载不必要的重复 CSS 规则。如果 CSS 规则或文件已加载在首屏关键 CSS 中，NitroPack 会删除最终优化使用 CSS 文件中的相同规则。
接下来，内联最终 CSS 选项会把优化后的 CSS 文件添加到 HTML 文档。这会减少文件大小、改善加载时间。另外，NitroPack 让你从过程中包含/排除关键 CSS 选择器。如果你想从使用 CSS 过程中保留或移除一些 CSS 选择器，这很方便。
激活这些设置后，你必须彻底测试网站页面，确保 NitroPack 移除未使用 CSS（RUCSS）功能没有对设计或用户体验产生负面影响。尤其如果你网站有弹窗、内嵌注册表单和其他动态内容。你可以用 NitroPack 测试模式设置测试网站。这个功能让你在隔离环境中测试 NitroPack 对网站的影响。
在测试模式中，NitroPack 在生产网站禁用，所以你可以测试每个功能而不打扰用户体验。查看使用 NitroPack 测试模式功能的综合指南了解更多。我在这个 NitroPack 评测中覆盖了所有功能、优缺点，并展示了在此网站启用后的 PSI 分数。
4. Jetpack Boost
Jetpack Boost 是免费插件，提供几个性能优化功能：文件压缩和合并。它还自动为首屏内容重新生成关键 CSS 文件，让浏览器更快渲染重要元素。当你做影响网站 HTML 和 CSS 的更改时，文件也会重新生成。
虽然这些功能与移除页面不需要的 WordPress CSS 代码不同，但性能好处是值得的。Jetpack Boost 通过压缩减小文件大小（CSS 和 JS），让它们在渲染时下载更快。合并功能组合多个文件减少网络请求。
关于压缩的更多信息：过程从 CSS 文件中剥离不必要的空白、注释和分号。这在不影响代码功能的情况下显著减小文件大小。它清理 WordPress 代码、改善加载效率。
文件合并进一步改善优化。假设你的网站各有 200 个 CSS 和 JavaScript 文件。合并会组合、组织和优化其中几个文件，按原始位置分组，把数量减少到最低限度。这个过程可以大幅减少 CSS 臃肿。它还对首次内容绘制和最大内容绘制等 Core Web Vitals 指标有显著积极影响。压缩和合并 JS 和 CSS 文件让页面第一个图片更快加载。页面上最大的元素也更快出现。
如果预算紧张，考虑 Jetpack Boost 作为 WordPress 最佳免费代码优化插件之一。使用 Jetpack Boost 插件，你可以：
- 激活网站页面缓存；
- 优化关键 CSS（每次更新网站代码时手动）；
- 组合、压缩和合并 CSS 和 JS 文件；
- 延迟非必要 JavaScript 文件；
- 自动从全球 CDN 服务器提供图片；
- 用图片 CDN 和图片指南优化图片。
不过，Jetpack Boost Pro 方案提供额外功能：性能历史洞察、优先支持、图片自动缩放、图片质量控制等。
总结
移除未使用的 CSS 是改善 WordPress 网站性能的简单而有效的方式。网站代码越少，Web 浏览器下载和渲染页面越快。这给用户更好的网站体验，让他们更快与元素互动。不过，时间就是金钱。从 WordPress 网站减少未使用 CSS 样式的最佳方式是使用插件。除非你有正当理由手动查找和删除未使用的 CSS 代码，否则企业主没有理由不用插件。
因此，我建议你试试 WP Rocket、FlyingPress 或 NitroPack。这些插件自动检测、移除和优化 CSS 样式，确保网站性能处于峰值。它们不需要复杂配置。即使你从未安装过 WordPress 插件，你也可以在五分钟内让这些插件工作。
常见问题解答（FAQ）
未使用的 CSS 到底是什么？为什么会拖慢网站？
就是存在于主题或插件里、但当前页面根本用不到的样式代码。浏览器不管用没用都得先下载它，白白增加文件大小，拖慢加载速度，对移动端用户的影响尤其明显。
怎么检测网站上有没有未使用的 CSS？
最常用的工具是 Google 的 PageSpeed Insights，输入网址点分析，它会告诉你哪些 CSS 没被用到。懂技术的还可以用 Chrome DevTools 里的代码覆盖、PurifyCSS 或 UnCSS 这些工具。
新手一定要手动改代码才能移除吗？
完全不用。用插件最省事，像 WP Rocket、FlyingPress、NitroPack 都是一键或几步操作，自动分析并移除未使用的 CSS。新手自己翻几百行代码又累又容易出错，插件是风险最低的方式。
WP Rocket 免费吗？预算有限有什么选择？
WP Rocket 是付费插件，没有免费版，得买授权。预算紧张的话可以看免费的 Jetpack Boost，它做文件压缩和合并，虽然和”移除未使用 CSS”不完全一样，但性能收益也很实在。
移除未使用 CSS 会把网站弄坏吗？
有一定风险，所以启用后一定要彻底测试。像 FlyingPress 的”移除”选项和 NitroPack 的功能都可能影响设计，尤其网站有弹窗、注册表单这类动态内容时。NitroPack 还提供了测试模式，可以先在隔离环境里试。
用插件移除后，PSI 里就完全没有未使用 CSS 警告了吗？
几乎不可能完全清零。因为 WordPress 的工作方式，总会有一些遗留，但只要影响很小、对真实用户体验没明显影响就没事。实际效果还是很明显的，比如文章里那个例子从 498 KB 降到了 33 KB。
