如何安全地删除 WordPress 中未使用的 CSS

您想删除 WordPress 中未使用的 CSS并使您的网站更快吗？

网站优化的一个关键目标是删除任何不必要的代码。 这可以减少您网站页面的总大小，并缩短页面加载时间并为访问者提供更好的用户体验。

可以大大减小网站页面大小的一个方面是样式。 网站样式是通过一种称为级联样式表的基于规则的语言来控制的，它与 HTML 和 Javascript 一起是万维网的核心构建块之一。

样式表通常缩写为 CSS，可用于定义页面颜色、字体、背景、图像样式、边距、填充等。 在下面的示例中，CSS 代码确保标题居中并显示为红色。

 h1 { text-align: center; color: red; }

典型的 WordPress 网站需要许多样式表才能正确显示页面。 除了 WordPress 核心版本中使用的 CSS 样式外，CSS 调用还由您激活的 WordPress 主题和 WordPress 插件进行。 因此，一个 WordPress 网站可能需要十几个 CSS 文件才能正确设置所有内容的样式。

如果文件太大或调用的 CSS 文件太多，层叠样式表会增加页面加载时间。 可以采用多种技术来解决这个问题，例如延迟、缩小和合并。

下面是这些技术的总结。

如果你想进一步降低 CSS 的重量，我建议删除 WordPress 中未使用的 CSS 规则，以便访问者只下载所需的样式。 通过阻止浏览器加载不必要的 CSS 代码，您可以加快页面加载速度并为访问者提供更好的用户体验。

让我们仔细看看未使用的 CSS 并检查如何从您的 WordPress 网站中删除未使用的 CSS 代码。

什么是 WordPress 中未使用的 CSS？为什么会出现？

未使用的 CSS 是指任何未在当前页面上调用的 CSS 规则。 这种情况经常发生，因为页面很少需要调用样式表中的每个 CSS 规则。 例如，您的样式表可能包含一条使用红色显示标题的 CSS 规则，但如果没有实际请求，这将被归类为未使用的 CSS。

由于浏览器不需要未使用的 CSS 规则，因此代码不必要地增加了 CSS 文件的大小。 因此，您可以通过删除 WordPress 中未使用的 CSS 代码来缩短页面加载时间。

WordPress 主题需要使用 styles.css 文件作为主要样式表，尽管主题通常为字体、主题皮肤和其他设计元素使用额外的样式表。 主题 CSS 文件中包含的许多 CSS 规则仅在某些情况下才需要。 尽管如此，这些 CSS 文件通常会加载到您网站的每个页面上。

WordPress 插件对于将未使用的 CSS 插入页面特别不利，因为开发人员默认情况下经常在所有页面上加载样式表。

删除 WordPress 中未使用的 CSS 是一种很好的做法，但是如果您删除任何对网站设计很重要的 CSS 代码，您的网站设计就会中断。

关键 CSS 怎么样？

您可能经常听到的另一个术语是Critical CSS 。 它指的是无需滚动即可立即向用户显示内容所需的任何样式。 此区域称为首屏，浏览器加载首屏内容所需的时间称为首次内容绘制(FCP)。

Google 建议在 HEAD 元素中提取、缩小和内联显示关键 CSS，以确保快速加载 First Contentful Paint。 Defer 可用于稍后加载非关键 CSS 文件，以确保不太重要的 CSS 文件不会减慢初始页面加载速度。

如何查找未使用的 CSS

在页面上发现未使用的 CSS 的一种快速方法是将其 URL 输入性能报告工具，例如 GTmetrix、Google PageSpeed Insights 或 Pingdom Website Speed Test。 该报告将突出显示未使用的 CSS 并建议删除或推迟未使用的规则。

现代浏览器提供开发人员工具来帮助您分析网站的设计和代码。 Google Chrome 中的开发人员选项称为 Chrome DevTools，其Coverage 选项卡可用于查找未使用的 Javascript 和 CSS 代码。 这是查找包含许多未使用规则的 CSS 文件的快速有效方法。

要加载 Chrome DevTools，您所要做的就是右键单击页面并选择Inspect 。 然后，您可以单击 Coverage 选项卡以查看每个文件的 URL 以及该文件是 Javascript、CSS 还是两者兼而有之。 在右侧，您可以看到文件的总大小（以字节为单位）和未使用的总字节数。 可视化栏以红色显示未使用的代码，以蓝绿色显示必需的代码。 这在底部面板中进行了总结，但是如果您单击特定文件，您将看到未使用的 CSS 规则在上面的面板中以红色突出显示。

查看 Chrome Developers Coverage 页面，了解有关 Coverage 选项卡如何工作的更多信息。

可以在线找到许多其他免费和高级未使用的 CSS 工具。

• JitBit 未使用的 CSS 工具 – 一项免费服务，可抓取您网站上的每个页面并突出显示未在任何地方使用的 CSS 选择器
• PurifyCSS Online – 一个有用的免费工具，可以突出显示未使用的代码并为您提供干净的 CSS 文件
• UnusedCSS – 一项高级服务，可扫描页面 URL 并提供没有不必要代码的更清晰的 CSS 文件（定价从每月 25 美元起）

虽然 Chrome DevTools 和 PurifyCSS Online 等工具可用于查看网站上未使用的 CSS 规则，但它们在解决动态平台（如 WordPress）上未使用的 CSS 问题时并不总是实用。

WordPress 主题和插件需要在整个网站上加载不同的样式表，因此未使用的 CSS 数量因页面而异。 这就是为什么我认为使用优化 WordPress 插件来删除（或推迟）WordPress 中未使用的 CSS 通常更好。

让我们仔细看看一些有用的 WordPress 插件，它们有助于从您的 WordPress 网站中删除未使用的 CSS。

使用 WP Rocket 删除 WordPress 中未使用的 CSS

WP Rocket 是市场上最受欢迎的 WordPress 性能解决方案之一。 WP Rocket 的许可证每年 49 美元。

该插件具有一个工具，只需单击一个按钮即可从您的网站中删除所有未使用的 CSS。 在后台，WP Rocket 所做的是检查每个页面上的所有样式表和脚本，并将 CSS 规则与 HTML 代码中的 CSS 选择器相匹配。 此过程在 WP Rocket 的服务器外部完成，因此请确保您的 WordPress 安全插件已将其服务器 IP 地址列入白名单。

由于 WP Rocket 会自动删除所有未使用的 CSS 代码，您可能会遇到此工具会破坏网站设计的一部分的情况，例如联系表单。 如果发生这种情况，请将相关的 CSS 文件、ID 或类添加到 WP Rocket CSS 安全列表。

推荐阅读：如何清理 WordPress 数据库

使用 Perfmatters 删除 WordPress 中未使用的 CSS

Perfmatters 是我在我的网站上使用的优化解决方案，用于删除未使用的 CSS 代码。 这是一个高级 WordPress 插件，每年仅需 24.95 美元。

使用 Perfmatters 脚本管理器，您可以在整个网站的特定帖子和页面上启用和禁用 CSS 文件和 Javascript 文件。 可以根据正则表达式、用户的登录状态及其设备类型对脚本排除进行例外处理。

我发现该插件在处理优化不佳的 WordPress 插件方面非常有效。 以 Jetpack 为例。 即使您的网站前端没有使用任何 Jetpack 模块，它仍然会在您网站的每个页面上加载一个 85.1 KB 的 CSS 文件。 正如您在下面看到的，Perfmatters 允许我停止加载这个不必要的 CSS 文件。

使用 Asset CleanUp 删除 WordPress 中未使用的 CSS

Perfmatters 的一个很好的替代品是 Asset CleanUp。 该插件可免费使用，但付费版的售价为 42.08 欧元，可解锁许多附加功能。

Asset CleanUp 的 CSS 和 Javascript 管理器可让您在整个网站的特定页面上预加载文件和禁用文件。 登录用户可以例外。

如果升级到 Asset CleanUp Pro，您将更好地控制加载网站 CSS 和 Javascript 文件的哪些区域，并能够为屏幕尺寸和正则表达式添加额外的例外。

使用 RapidLoad 删除未使用的 CSS 文件

Autoptimize 是一个有效的优化 WordPress 插件，允许您聚合、缩小和缓存 CSS、Javascript 和 HTML 文件。 WordPress 插件 RapidLoad Power-Up 通过帮助您删除 WordPress 中未使用的 CSS 进一步扩展了 Autoptimize。

与 WP Rocket 的 CSS 优化工具一样，RapidLoad Power-Up 通过检查实际需要哪些 CSS 规则来减少页面加载时间。

顾名思义，该插件利用 RapidLoad 服务来减小 CSS 文件的大小。 因此，您需要注册 RapidLoad 服务才能使用 RapidLoad Power-Up。 RapidLoad 提供每月 5.83 美元的月度计划。

最后的想法

开发人员在优化设计和塑造我们网站的样式表方面做得还不够。 您会发现许多 WordPress 主题和插件会在整个网站加载所有 CSS 规则，即使这些规则仅在特定页面上需要。

要查看您自己的网站上有多少未使用的 CSS 代码，我建议在 GTmetrix、Google PageSpeed Insights 或 Pingdom Website Speed Test 等性能报告工具上运行一些基准测试。 Chrome DevTools 和 PurifyCSS Online 等开发人员工具也可用于查看 CSS 向页面添加了多少不必要的权重。

值得庆幸的是，我们可以使用多种 WordPress 性能解决方案删除 WordPress 中未使用的 CSS。 如果您更喜欢自动化该过程，我建议使用 WP Rocket 或 RapidLoad Power-Up。 那些对 WordPress 维护有更多实际操作方法的人会更喜欢 Perfmatters 和 Asset CleanUp，因为这些插件使您可以完全控制加载网站 CSS 和 Javascript 文件的哪些区域。

请注意，删除重要的 CSS 代码会导致您的网站设计中断，因此请务必定期检查您的网站页面以确保一切正常。

推荐阅读：如何在 WordPress 中延迟解析 javascript

祝你好运。

凯文