您想删除 WordPress 中未使用的 CSS 以便您的网站加载速度更快吗？
未使用的 CSS 是由您的 WordPress 主题或插件添加的您并不真正需要的任何 CSS 代码。删除此 CSS 代码可以提高 WordPress 性能和用户体验。
在本文中，我们将向您展示如何轻松删除 WordPress 中未使用的 CSS，而不会破坏您的网站。
WordPress 中未使用的 CSS 是什么？
WordPress 中未使用的 CSS 是在您的网站上加载但实际上并不需要显示页面的 CSS 代码。
额外的代码可能会使访问者的浏览器需要更长的时间来呈现页面，从而造成糟糕的用户体验。加载时间较慢甚至会影响您的搜索排名，从而导致您网站的流量减少。
您可以使用 Google Pagespeed Insights 了解未使用的 CSS 代码如何影响您的网站。它将向您显示标题为“删除未使用的”的部分CSS’，其中包含哪些 CSS 文件影响您的加载时间的详细信息。
为什么 WordPress 中添加了未使用的 CSS？
CSS 用于设置 WordPress 网站的外观样式。您的 WordPress 主题包含 CSS，其中大部分包含在单个 style.css 文件中。
除了主题的 CSS 之外，您的 WordPress 插件还将加载自己的 CSS。
例如，WooCommerce 将加载 CSS 来显示产品，页面构建器插件将添加自己的 CSS 来显示您的自定义页面，表单构建器插件将包含 CSS 来设置表单样式。
然后，您就有了网络字体、图标字体和其他需要添加自己的 CSS 文件的元素。
通常，这些文件非常小并且加载速度很快。但是，如果您的 WordPress 网站有很多这样的内容，那么效果就会累积起来并对您的网站速度产生显着影响。
如何删除 WordPress 中未使用的 CSS
您可以通过几种不同的方法来减少 WordPress 网站上未使用的 CSS。
但是，完全删除 WordPress 中所有未使用的 CSS 将是一项相当困难的任务。由于 WordPress 在后台的工作方式，一些未使用的 CSS 可能很难找到和删除。
也就是说，我们将向您展示两种删除未使用的 CSS 的方法，您可以选择最适合您的一种。
方法 1：使用 WP Rocket 删除 WordPress 中未使用的 CSS
此方法比较简单，推荐初学者使用。它极大地改善了 WordPress 网站上 CSS 文件的整体交付，包括删除大部分未使用的 CSS。
我们认为它是初学者的最佳解决方案，因为它更容易并且实现了为用户提供更好体验的主要目标。这意味着您的网站在速度测试工具上加载速度很快，并且用户也感觉很快。
首先，您需要安装并激活WP Rocket 插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后，您需要访问“设置”»WP Rocket 页面并切换到“文件优化”选项卡。
接下来，您需要向下滚动到“CSS 文件”部分，然后选中“删除未使用的 CSS（测试版）”选项旁边的框。
由于 WP Rocket 的此功能处于测试阶段，因此它会再次询问您是否要启用该设置。您可以继续并单击“激活删除未使用的 CSS”按钮。
一旦“删除未使用的 CSS”选项处于活动状态，您就可以在“CSS 安全列表”框中指定不应删除的 CSS 文件名、ID 或类。
只需将它们输入到框中即可。
接下来，您需要向下滚动并单击“保存更改”按钮来保存更改。
当您这样做时，WP Rocket 将开始处理您的 CSS 文件并向您显示进度条。
该插件需要几分钟的时间来处理并从您的网站中删除未使用的 CSS 文件。
插件完成该过程后，您将看到“删除未使用的 CSS 已完成！”消息。
现在，访问 Google Pagespeed Insights 工具并测试您网站的性能。
删除 WordPress 的渲染阻塞 CSS
WP Rocket 可让您优化 CSS 文件并从网站中删除阻碍渲染的 CSS。
首先，您可以导航至 WP Rocket 中的“文件优化”选项卡。从这里，向下滚动到“CSS 文件”部分，然后选中“优化 CSS 交付”选项旁边的框。
此选项生成一个 CSS 文件，其中仅包含显示网站可见部分所需的 CSS 代码。它首先加载该文件，向访问者显示页面，然后使用技术加载其他 CSS 文件。lled 延迟加载。
与必须在显示页面之前加载所有 CSS 文件相比，通过删除此渲染阻止 CSS，用户可以更快地查看您的网站。
启用“优化 CSS 交付”选项后，单击“保存更改”按钮，然后等待 WP Rocket 为您的所有帖子和页面生成必要的 CSS 文件。它还会自动清除您网站的缓存。
完成后，您可以使用 Google Pagespeed Insights 再次测试您的网站性能。
额外的文件传输调整以提高性能
WP Rocket 还允许您从静态文件中删除查询字符串、合并 Google 字体文件以及缩小 HTML。
所有这些调整都会对您的整体速度带来微小的改进，从而为您的访问者带来更快的加载体验。
您还将看到缩小和组合 CSS 文件的选项。这些选项ons 将减少 HTTP 请求并为您带来额外的速度提升。
但是，您需要仔细检查您的网站，以确保启用这些设置后没有任何问题。
此外，您可以对网站上的 JavaScript 文件应用相同的优化。
您可以缩小并组合它们作为单个文件，并延迟加载 JavaScript 文件以提高性能。
有关更多详细信息，请参阅我们有关如何在 WordPress 中正确设置 WP Rocket 的分步教程。
方法 2：使用 Asset CleanUp 删除 WordPress 中未使用的 CSS
此方法有点先进，但非常强大，可以让您轻松地从 WordPress 网站的任何页面中删除任何未使用的 CSS。
但是，它有点复杂，您需要彻底测试您的网站功能和外观，以确保没有任何问题。
首先，您需要安装并启动vate 资产清理插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后，您需要访问资产清理»设置页面并切换到测试模式选项卡。从这里，您需要打开“启用测试模式”选项。
这允许您尝试不同的设置并以管理员身份测试它们，而不会影响网站访问者。
之后，您需要访问资产清理»CSS/JS 管理器页面。从这里，您可以逐页卸载不需要的 CSS 和 JavaScript 文件。
它将首先获取您的主页，并向您显示该页面上加载的所有 CSS 和 JavaScript 文件。
您需要向下滚动并查看加载的文件。如果您看到不需要的文件，则可以针对特定页面、帖子类型或整个站点卸载它。
该插件还允许您从此处选择特定的帖子或页面，或者您可以访问通过像平常一样编辑帖子或页面来获得相同的选项。
在帖子编辑屏幕上，您会在帖子编辑器下方找到资产清理框。
当访问者在您的网站上查看此页面时，该插件将自动获取并列出加载的所有文件和资源。
然后，您可以简单地卸载该页面上不需要的未使用的 CSS 或 JavaScript 文件。
重要提示：删除任何未使用的 CSS 或 JavaScript 后，不要忘记测试您的网站，以确保一切正常。
完成卸载并删除未使用的 CSS 和 JavaScript 文件后，您可以返回插件的设置页面并关闭“测试模式”。
不要忘记单击“更新所有设置”按钮来存储您的更改。
您现在可以使用 Google Pagespeed Insights 测试您的网站，以查看未使用的 CSS 通知的变化。
提高 WordPress 性能的专家指南
既然您知道如何通过删除未使用的 CSS 来加速您的网站，您可能想查看一些与提高 WordPress 性能相关的其他指南：
- 提升 WordPress 速度和性能的终极指南
- 如何提高 WooCommerce 性能
- 如何正确运行网站速度测试（最佳工具）
- 衡量 WordPress 网站的重要指标
- 如何优化 WordPress 的核心网络生命力（终极指南）
- 如何使用 GTmetrix 插件提高 WordPress 网站性能
- 如何轻松优化 WordPress CSS 交付
- 最快的 WordPress 托管（性能测试）
- 如何在不损失质量的情况下优化图像以提高网络性能
- 加速您网站速度的最佳 WordPress 缓存插件
我们希望本文能帮助您了解如何轻松删除 WordPr 中未使用的 CSSess。您可能还想查看我们关于构建网站的费用的完整指南以及我们专家精选的最佳托管 WordPress 托管。
如果您喜欢这篇文章，请订阅我们的 WordPress 视频教程 YouTube 频道。您还可以在 Twitter 和 Facebook 上找到我们。
网