如何删除 WordPress 中未使用的 CSS

这 ”减少未使用的 CSS” 当您的代码被插件或页面上不需要或使用的主题加载时，PageSpeed Insights 会触发警告。 开发人员通常仅在使用样式表时才将其排入队列。 但是，很多时候，还添加了可能不需要的额外样式。 这会导致大量未使用的 CSS，从而降低您的 WordPress 网站的速度。 它还可以触发渲染阻止警告。

除了修复警告之外，删除未使用的 CSS 对减少首次内容绘制 (FCP)、最大内容绘制 (LCP) 和交互时间 (TTI) 产生巨大影响。

如何找到未使用的 CSS

查找未使用的 CSS 的最简单方法是使用 PageSpeed 见解. 如果有未使用的 CSS，您将看到一条警告，如上面的警告。 与 PageSpeed Insights 的所有内容一样，只有当您超过他们认为重要到足以标记的阈值时，它才会触发警告。

查找未使用的 CSS 的另一种方法是使用 Chrome DevTools。 他们有他们所谓的 覆盖范围 工具，它将通过 CSS 和 JS 向您显示两个未使用的字节。

您可以采取以下措施来修复“减少未使用的 CSS”警告，以及一些建议。

使用 Perfmatters 删除未使用的 CSS

解决“减少未使用的 CSS”警告的最简单方法是启用 Perfmatters 中的“删除未使用的 CSS”功能，它会自动完成所有操作。 我们已经在数百个 URL 上测试了此功能（使用不同的主题和设置），以下是我们得到的一些结果：

• FCP 平均下降 15.20%。
• LCP平均下降19.66%.
• TTI 平均下降 14.95%。

建议

在启用 Perfmatters 中的“删除未使用的 CSS”功能之前，我们建议执行以下操作：

• 删除您在 Perfmatters 中设置的任何现有 CSS 预加载（不包括本地 Google 字体样式表）。
• 取消组合你的 CSS。 自 HTTP/2 以来，组合 CSS 是一种已弃用的优化技术。 在某些情况下，组合 CSS 实际上会损害您的性能。
• 确保您还没有尝试使用其他插件删除未使用的 CSS。

步骤1

单击进入 Perfmatters 插件设置。

第2步

单击“资产”选项卡。

第 3 步

向下滚动并在“CSS”部分下，打开“删除未使用的 CSS”。

第 4 步（使用 CSS 方法）

对于如何处理使用的 CSS，您有两种不同的方法可供选择：

• 内联（默认）： 您使用的 CSS 内联在您网站源代码的首屏。 此选项最适合 PageSpeed 分数。
• 文件： 您使用的 CSS 被放​​入单独的 CSS 样式表（文件）中。 这对于用户和感知性能来说是最好的，因为可以在重复访问时缓存文件并减小 HTML 文档的大小。

第 5 步（样式表行为）

然后，您需要选择原始样式表的行为方式（未使用的 CSS）。 这通常用作后备以防止事情破裂。 有三种不同的选择：

• 延迟（默认）： 所有原始 CSS 样式表（未使用的 CSS）都会延迟并在用户交互时加载。 我们建议使用此选项。
• 异步： 所有原始 CSS 样式表（未使用的 CSS）都是通过异步加载的。 此方法有助于防止弹出，因为样式表在页面加载时异步执行。 此方法将导致 LCP/FCP 略高于延迟行为。
• 消除： 所有原始 CSS 样式表（未使用的 CSS）都被删除。 这是最激进的方法，但也很可能需要您添加例外。 我们建议高级用户使用此功能。

第 6 步

向下滚动并单击“保存更改”。

根据帖子类型，您使用的 CSS 生成方式不同（注销时）：

• 页： 页面通常有很多独特的 CSS，因此在第一次访问时会为每个页面单独生成使用的 CSS。
• 邮政： 帖子通常共享许多相同的 CSS，因此使用的 CSS 只会在第一次访问时生成一次。 帖子与页面的区别在于使用的 CSS 生成只发生一次。

清除使用的 CSS

如果您在网站上进行设计或代码更改，您很可能需要 清除您使用的 CSS 以及所有缓存层，以确保正确显示所有更改。

我们建议按以下顺序清除缓存层：主题、第三方插件、Perfmatters（清除使用的 CSS）、托管服务提供商和 CDN。 要验证您的 CSS 更改是否已更新，我们建议您在浏览器的隐身或私密模式下查看您的网站。

Perfmatters 生成的使用过的 CSS 在本地存储在以下目录中： /wp-content/cache/perfmatters/yourdomain.com/css/

要清除使用的 CSS，请按照以下步骤操作。

步骤1

单击进入 Perfmatters 插件设置。

第2步

单击“资产”选项卡。

第 3 步

向下滚动并在“CSS”部分下，单击“Clear Used CSS”。

如果您需要以编程方式清除使用过的 CSS，您还可以使用我们的类函数： Perfmatters\CSS::clear_used_css();

在单个页面/帖子上清除使用的 CSS

有时您对单个页面或帖子进行更改并且不需要清除全局使用的 CSS。 您可以改为清除单个页面或帖子上使用的 CSS。 在编辑器的右侧，单击“清除使用的 CSS”。

排除的样式表

通过添加源 URL (example.css)，或者通过添加源 URL 的唯一部分。 格式：每行一个。

排除的选择器

通过添加元素 id、类名等，从 Remove Unused CSS 功能中排除特定的 CSS（选择器）。（#id, .class）。 格式：每行一个（见 常见的排除）。

如何从未使用的 CSS 中排除页面/帖子

您可以使用删除未使用的 CSS 功能排除单个帖子、页面或自定义帖子类型。 在编辑器的右侧，取消选中“未使用的 CSS”。 这将排除整个页面。 这对于结帐或联系我们页面可能比网站的其他部分有更多问题很有用。

筛选

您可以使用 perfmatters_remove_unused_css 筛选 更改在您的网站上删除未使用的 CSS 的位置。 以下是仅在页面上关闭未使用的 CSS 的示例。

add_filter('perfmatters_remove_unused_css', function($boolean) {
	if(is_page()) {
	  return false;
	}
  	return $boolean;
});

常见未使用的 CSS 排除项

在 Perfmatters 中使用 Remove Unused CSS 功能时，您可能需要添加一个或两个排除项。 该数字通常基于站点的复杂性。 例如，与使用 GeneratePress 的轻量级网站相比，使用像 Elementor 这样的重型页面构建器的网站很可能需要更多的排除项。

以下是我们通常看到的一些常见排除项。 随着我们改进该功能，我们将确保继续添加到此列表中。

块引号

.wp-block-quote
blockquote

代码块

pre
code
.wp-block-preformatted
.wp-block-code

列

.wp-block-columns

注释

.comment
.comment-content

经典编辑器

.wp-caption

阿斯特拉

/uploads/astra/astra-theme-dynamic-css
/uploads/astra-addon/astra-addon-dynamic-css

Astra 移动菜单

.ast-mobile-menu-buttons

阿瓦达谷歌地图

.fusion-google-map

阿瓦达菜单

.fusion-mobile-menu
.fusion-is-sticky
.fusion-open-submenu
.fusion-mobile-nav-item

元素

Elementor 创建动态样式表。 您可以安全地排除这些，因为它们应该只包含使用过的 CSS。

/uploads/elementor/css/post-

Elementor 粘性菜单

#elementor-device-mode
.elementor-sticky--active

GeneratePress 移动菜单

.toggled

英雄知识库

#hkb-jquery-live-search
#hkb.hkb-searchresults
#hkb.hkb-searchresults>li

氧

Oxygen 创建动态样式表。 您可以安全地排除这些，因为它们应该只包含使用过的 CSS。

/uploads/oxygen/css/

WooCommerce

woocommerce-mobile.min.css
woocommerce-smallscreen.css

对未使用的 CSS 进行故障排除

这种情况很少见，但与任何更改和删除代码的事情一样，有时优化 CSS 可能会导致 WordPress 网站通过 Google 的问题 移动友好测试. 这可能会导致 Google Search Console 警告显示“页面不适合移动设备”。 它列出的常见问题是“测试太小而无法阅读”和“可点击元素太靠近”。

以下是一些故障排除技巧，可用于追踪适合移动设备的问题。

1. 我们建议使用“延迟” 涉及未使用的 CSS 时的行为。 但是，要解决问题，您可以暂时将其更改为“删除”。 这可以帮助您更轻松地发现页面上可能出现的问题。 如果您尝试使用“延迟”行为对其进行故障排除，那么在页面下方检测到用户交互时可能会自行解决的任何问题都更难排除故障。 请记住，Google 正在扫描整个页面，并且不会触发延迟。
2. 您还可以使用免费的在线工具，例如 皮奎 在手机上截取您网站的屏幕截图（将高度增加到最大值）。 这可能是一个很好的方式来查看视觉上的破坏。 谷歌搜索控制台截图的问题是你不能一直向下滚动页面，所以有时它不是很有帮助。
3. 通常，您希望查找超出页面或过于靠近屏幕边缘的内容。 您可以将其与 WordPress 网站上的登录视图（未运行未使用的 CSS）与注销视图进行比较。
4. 发现问题后，将其追踪到 div、类或样式表。 然后，您可以为 选择器 或者 样式表. 我们也有一些清单 常见的排除 我们一直在更新和改进。

使用脚本管理器禁用未使用的 CSS

另一种删除或减少未使用 CSS 的方法是使用 脚本管理器 在性能问题。 如果您使用 PageSpeed Insights 进行测试，您可以将资源上的“传输大小”与“潜在节省”进行比较。 如果该值完全相同，则意味着它 100% 未使用并且很可能被禁用（至少在您正在测试的 URL 上）。 当您使用的 CSS 在第一次访问时生成时，这将有助于减少构建时间。

减少或切换插件/主题

插件或主题仅应在页面上实际使用时将样式表排入队列。 然而，很多时候情况并非如此。 为了帮助减少未使用的 CSS，您应该始终使用 快速轻量级的主题 并删除任何臃肿的插件。