目录
“删除未使用的 CSS”（或最新的：“减少未使用的 CSS”）是您在测试网站速度时可能会得到的 PageSpeed Insights 建议之一。
然后，您将阅读 PSI 解释：“从样式表中删除死规则并推迟加载未用于首屏内容的 CSS，以减少网络活动消耗的不必要的字节。”
简单来说，这意味着某些 CSS 文件会影响您的网站加载时间 – 您应该解决该问题以提高速度。
在本文中，您将了解未使用的 CSS 的含义以及如何删除或减少它并优化您的网站以提高速度和性能 – 手动或使用插件。
什么是未使用的 CSS 以及为什么它会使您的网站变慢
未使用的 CSS 是对于渲染和加载页面完全无用的样式表 – 然而，它们包含在页面的代码中。如果你把它们全部删除，什么也不会发生。页面将在首屏上方和下方正确显示。
同时，未使用的 CSS 会影响页面的加载时间。如果它们在页面上，浏览器必须下载、解析并呈现它们——这需要一些时间。
对于首屏的 CSS来说尤其如此——这是页面上的基本内容，应该尽快渲染。快速渲染意味着最相关的内容将快速显示，用户可以快速开始与页面交互。
这也是为什么您应该删除或减少所有未使用的文件，这些文件会降低网站速度并且无法提供良好的用户体验。
还有更多。
未使用的 CSS 对性能的影响
未使用的 CSS 会影响加载时间和特定指标，例如最大内容绘制 (LCP)和总阻塞时间 (TBT)。
LCP 和 TBT 在 PageSpeed Insights 分数中都发挥着至关重要的作用：它们各自占最终 PSI 分数的 25%。更重要的是，Lighthouse v8 即将发生的变化将使总阻塞时间变得更加关键——TBT 将占到 30%。LCP 和 TBT 在 PSI 等级中的权重总计为 55%。
最重要的是，最大的内容绘制也是核心网络指标之一，它也可能会影响 SEO 性能。
这就是为什么解决未使用的 CSS 问题并修复它们至关重要。
作为额外的性能优势，删除未使用的 CSS 将减少 HTTP 请求的数量，并进一步提高网站速度。
如何查找未使用的 CSS 文件
识别未使用 CSS 的最常用工具是 PageSpeed Insights 和 Chrome DevTools 中的 Coverage 选项卡。
通过 PageSpeed Insights 查找未使用的 CSS
通过在 Google 的页面速度工具上测试页面的网址，您将获得性能得分和要解决的 PageSpeed 建议。
如果页面有任何未使用的 CSS 需要删除（或减少），您会在“机会”部分下找到 CSS 文件旁边的橙色或红色标志。
通过 Chrome DevTools 查找未使用的 CSS
识别未使用 CSS 的另一种方法是通过 Chrome DevTools 中的“覆盖范围”选项卡。
打开命令菜单并选择显示覆盖率命令后，您可以分析覆盖率选项卡。
您会发现页面代码上运行的所有文件，包括 CSS。
正如您在上面的屏幕截图中看到的，该表包含有用的信息，例如文件类型和相关的未使用字节重量（具有非常有用的百分比）。
这样就可以轻松识别要管理的未使用文件并确定其优先级。
| 还想解决未使用的 JS 问题吗？在我们的专题文章中了解如何删除未使用的 JS 文件！ |
如何删除 WordPress 上未使用的 CSS 文件
现在的问题是：如何删除或减少网站上未使用的 CSS？您可以手动或使用插件来完成。
如何手动删除未使用的 CSS 文件
手动方式需要一定的技术知识。
如果您想完全删除未使用的 CSS，可以使用PurifyCSS等工具来了解可以减少多少 CSS 文件大小。一旦获得了应该删除的 CSS 代码，您就必须手动将其从页面中删除。
如果您想深入了解手动解决方案，可以阅读CSS-tricks 深入文章。
另一方面，如果您想减少未使用的 CSS 影响，可以使用资产管理插件，例如Asset CleanUp。请注意，这样的插件只会删除未使用的样式表。它不会从未使用的样式表中删除未使用的代码。因此，PageSpeed Insights 的建议不会消失。
| ⚠️ 这些工具可能仍然不是 100% 准确 – 并且使过程非常精确是很困难的。最好对网站进行自定义编码并仅使用页面上存在的 CSS 代码。 |
如何使用插件删除未使用的 CSS 文件：一种简单的方法
WP Rocket 提供了一项强大的功能，让您可以一键解决未使用的 CSS。您只需要启用”删除未使用的 CSS “选项，该插件就会删除页面 HTML 中未使用的 CSS。这是减少页面大小和页面加载时间的有效方法。可以在“文件优化”选项卡中找到该选项。
4 个额外的性能技巧
有几个性能优化技巧需要时刻牢记，它们也能派上用场，最大限度地减少未使用的 CSS 影响：
- 选择一个轻量级且精简的 WordPress 主题 – 如果您不确定要选择哪个，请查看我们最快的免费 WordPress 主题列表。
- 优先使用包含模块化 CSS 的主题和插件（仅加载必要的代码来设计其模块或页面上的输出）。
- 尽可能减少在前端添加大量代码的插件数量。
- 使用资产控制插件从臃肿的主题和插件中删除不必要的 CSS 文件。
发表回复