如何在 WordPress 中删除未使用的 CSS _ 厦门创意互动网络科技有限公司

当插件或主题加载了页面上不需要或未使用的代码时，PageSpeed Insights 会触发“减少未使用的 CSS”警告。开发者通常只会在样式表被使用时才将其加载到队列中。然而，很多时候，开发者还会添加一些可能并不需要的额外样式。这会导致大量未使用的 CSS，从而降低 WordPress 网站的速度，甚至可能触发渲染阻塞警告。

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

减少 PageSpeed Insights 中未使用的 CSS 警告

如何查找未使用的 CSS

查找未使用的 CSS 的最简单方法是使用PageSpeed Insights测试 URL 。如果存在未使用的 CSS，您会看到类似上面的警告。与 PageSpeed Insights 的所有功能一样，只有当未使用的 CSS 超过其认为足够重要的阈值时，才会触发警告。

查找未使用的 CSS 的另一种方法是使用 Chrome 开发者工具。他们有一个叫做 “代码覆盖率”的工具，可以显示 CSS 和 JS 中未使用的字节数。

Chrome 覆盖率工具中未使用的 CSS

以下是一些可以解决“减少未使用的 CSS”警告的方法，以及一些建议。

使用 Perfmatters 删除未使用的 CSS
常见除外情况
清晰使用的 CSS
过滤未使用的 CSS
排查未使用的 CSS 问题

优化已使用的 CSS 排除项
使用脚本管理器禁用未使用的 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。

第一步

点击进入Perfmatters插件设置。

Perfmatters 插件设置

步骤 2

点击“CSS”菜单。

CSS菜单

步骤 3

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

在 Perfmatters 中移除未使用的 CSS

步骤 4（使用 CSS 方法）

处理所使用的 CSS 有两种不同的方法可供选择：

内联（默认）：您使用的 CSS 会直接嵌入到网站源代码的首屏位置。此选项最有利于提升 PageSpeed 分数，但也会增加 HTML 页面的大小。
文件：您使用的 CSS 代码会被放在一个单独的 CSS 样式表（文件中）。这样做对用户体验和感知性能最为有利，因为该文件可以在重复访问时被缓存，并能减小 HTML 页面的大小。

使用了 CSS 方法

步骤 5（样式表行为）

接下来，您需要选择原始样式表（未使用的 CSS）的行为方式。这通常用作备用方案，以防止出现问题。有三种不同的选项：

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

未使用的 CSS 原始样式表行为

步骤 6

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

您使用的 CSS 代码（在未登录的情况下）会根据文章类型而有所不同：

页面： 页面通常包含大量独特的 CSS，因此，首次访问时，每个页面都会单独生成所使用的 CSS。这包括首页，无论首页被设置为普通页面还是归档页面。
文章： 文章通常共享许多相同的 CSS，因此使用的 CSS 仅在首次访问时生成一次。文章与页面的区别在于，文章使用的 CSS 仅生成一次。
自定义文章类型：每种文章类型使用的 CSS 是单独生成的。
类别归档： 使用的 CSS 只生成一次。
其他存档：使用的 CSS 是按文章类型单独生成的。

清除已使用的 CSS

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

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

Perfmatters 生成的 CSS 文件存储在以下目录中： /wp-content/cache/perfmatters/yourdomain.com/css/

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

第一步

点击进入Perfmatters插件设置。

Perfmatters 插件设置

步骤 2

点击“CSS”菜单。

CSS菜单

步骤 3

向下滚动，在“CSS”部分下，点击“清除已使用的CSS”。

Perfmatters 清晰地使用了 CSS

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

清除单个页面/文章中使用的 CSS

有时，您可能只修改了单个页面或文章，而不需要清除全局已用的 CSS。您可以只清除单个页面或文章已用的 CSS。在编辑器右侧，点击“清除已用的 CSS”。

清除单个页面/文章中使用的 CSS

已排除的样式表

要从“移除未使用的 CSS”功能中排除特定的 CSS（样式表），请添加源 URL（example.css），或添加源 URL 的唯一部分。格式：每行一条。

已排除的样式表

排除的选择器

#id通过添加元素 ID、类名等（，），从“移除未使用的 CSS”功能中排除特定的 CSS（选择器）.class。格式：每行一个（参见常见排除项）。

排除的选择器

如何将页面/文章从未使用的 CSS 中排除

您可以将特定文章、页面或自定义文章类型排除在“移除未使用的 CSS”功能之外。在编辑器右侧，取消勾选“未使用的 CSS”。这将排除整个页面。例如，对于结账页面或联系我们页面，此功能非常有用，因为这些页面可能比网站其他页面存在更多问题。

单个页面上未使用的 CSS 排除项

常用的未使用 CSS 排除项

使用 Perfmatters 的“移除未使用的 CSS”功能时，您可能需要添加一到两个排除项。排除项的数量通常取决于网站的复杂程度。例如，使用 Elementor 等大型页面构建器的网站很可能比使用 GeneratePress 等轻量级网站需要更多的排除项。

以下是一些常见的例外情况。我们会随着功能的改进不断更新此列表。

引用块

.wp-block-quote
blockquote

代码块

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

列数

.wp-block-columns

.comment
.comment-content

经典编辑器#

.wp-caption

Adobe Fonts（Typekit）

//use.typekit.net/

阿斯特拉

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

Astra 手机菜单

.ast-mobile-menu-buttons

Avada Google 地图

.fusion-google-map

Avada菜单

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

Divi

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

/et-cache/
.et_mobile_menu

Elementor flexbox 容器

如果您在 Elementor 中使用 Flexbox 容器时遇到任何问题（尤其是在使用横幅广告时），有时以下 CSS 代码可以提供帮助。这并非排除其他方法，而是您可以添加到 WordPress 自定义工具或其他自定义 CSS 解决方案中的自定义 CSS 代码。

.e-con:before, .e-con>.elementor-background-slideshow:before, .e-con>.elementor-motion-effects-container>.elementor-motion-effects-layer:before, :is(.e-con,.e-con>.e-con-inner)>.elementor-background-video-container:before {
    width: max(100% + var(--border-inline-end-width) + var(--border-inline-start-width),100%);
    height: max(100% + var(--border-block-start-width) + var(--border-block-end-width),100%);
}

Elementor 固定菜单

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

GeneratePress 移动菜单

.toggled

GeneratePress 高级侧边栏移动菜单

/wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css

英勇击倒

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

Google 评论插件

这个插件会导致已使用的 CSS 编译出现异常行为。如果您正在使用此插件，则需要将该样式表排除在外。

/widget-google-reviews/assets/css/public-main.css

Raptive（前身为 AdThrive）

.adthrive
.adthrive-ad
ads.min.css
adthrive.min.css

萨希法

.lazy-enabled

智能滑块

.n2-ss-loaded

WS 表格

ws-form

如何过滤未使用的 CSS

Perfmatters 中提供了多种过滤器，可用于控制移除未使用 CSS 的方式。以下示例展示了如何使用 perfmatters_remove_unused_css 过滤器仅在页面上禁用未使用的 CSS。

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

查看其他筛选条件。

排查未使用的 CSS 问题#

关闭动态内联 CSS

有些主题（例如 GeneratePress）提供两种生成动态 CSS 的选项：“内联嵌入”和“外部文件”。为了确保 Perfmatters 中的未使用 CSS 功能正常工作，您应该始终使用“外部文件”方法。这种方法更有利于缓存，并且能够确保我们的工具尽可能多地识别未使用的样式。

关闭组合/编译器

要让 Perfmatters 中的“未使用的 CSS”功能正常工作，您需要关闭所有第三方插件中合并 CSS 文件的功能。合并 CSS 文件本身就是一种过时的优化技术，从 HTTP/2（现在是 HTTP/3）时代起就已弃用。现在并行加载单个文件速度更快。

如果您正在使用 Autoptimize、LiteSpeed Cache、WP Rocket 等工具，请关闭 CSS 合并功能。
如果您使用的是 Avada，请关闭CSS 编译器功能。我们发现一些客户在使用此功能以及我们的“未使用 CSS”功能时效果不错。您可以分别测试启用和禁用此功能的效果，看看哪种方式更适合您的网站。

排除动态使用的 CSS

一些页面构建器和主题会生成自己的动态 CSS，这些 CSS 仅在需要使用时才会加载。这有利于性能，也符合预期。如果遇到问题，您可以尝试排除它们的动态 CSS，这样就无需使用我们的“未使用 CSS”功能进行解析。

以下是一些我们发现它们被存储的路径示例：

/uploads/pagebuilder/css/
/uploads/pagebuilder/cache/
/uploads/pagebuilder/
/uploads/theme/-dynamic-css
/缓存/

如果始终需要，我们会定期将这些模式添加到 Perfmatters 核心中。

缩小排除范围#

快速缩小未使用 CSS 问题范围的方法是暂时排除整个目录：

/themes/
/plugins/
/wp-includes/
/上传/
/缓存/

然后，您可以像下面的示例一样，在前面添加注释，逐个注释掉它们--。这同样适用于排除选择器。

--/themes/
/plugins/
/wp-includes/
/上传/
/缓存/

404 错误#

某些主机提供商（例如 Pantheon）会限制对/wp-content/我们使用的 CSS 文件所在文件夹的写入权限。如果您无法更改权限，可以使用我们的 perfmatters_cache_path 过滤器来更改文件位置，例如更改到该/uploads/文件夹。

CDN URL（使用其他重写方案时）#

如果您使用的是带有自定义 URL（例如 cdn.domain.com）的第三方 CDN，我们建议您使用 Perfmatters 的CDN 重写功能。如果您使用其他重写方案，则在编译 CSS 时可能会遇到加载顺序问题。您可以使用我们的高级选项功能来解决此问题。

步骤 1

在Perfmatters中启用“显示高级选项”。

步骤 2

在Perfmatters的CSS部分，向下滚动并输入您的CDN URL。

未使用的 CSS CDN URL

步骤 3

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

另一种解决方法是使用我们的 perfmatters_local_stylesheet_url 过滤器。

MIME 类型错误#

如果您遇到如下错误，这通常是因为您正在运行第三方 CDN，但您没有正确地重写 CDN 使用的 CSS。

The resource from “https://domain.com/wp-content/cache/perfmatters/domain.com/css/front.used.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Refused to apply style from “https://domain.com/wp-content/cache/perfmatters/domain.com/css/front.used.css” because it's MIME type (“text/html”) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

如何优化已使用的 CSS 排除项

有些样式表会被我们自动从 CSS 解析中排除，原因可能是不兼容或动态生成（这意味着解决方案应该只添加它们自身使用的 CSS）。无论哪种情况，您仍然可以通过内联加载或异步加载来优化被排除的 CSS。这将解决任何渲染阻塞问题。

perfmatters_rucss_inline_stylesheets允许您将任何已从已用 CSS 中排除的样式表内联到 HTML 中。我们建议在较小的样式表上使用此功能，因为较大的 HTML 页面可能会导致更高的 LCP（生命周期成本）。
perfmatters_rucss_async_stylesheets允许您异步化任何已从已用 CSS 中排除的样式表。

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

另一种移除或减少未使用 CSS 的方法是使用 Perfmatters 中的脚本管理器。如果您使用 PageSpeed Insights 进行测试，可以将资源的“传输大小”与“潜在节省量”进行比较。如果这两个值完全相同，则表示该资源 100% 未使用，很可能可以禁用（至少在您正在测试的 URL 上）。这有助于减少首次访问时生成所用 CSS 的构建时间。

未使用的 CSS 传输大小

减少或更换插件/主题

插件或主题只有在页面实际使用样式表时才应该加载它。然而，很多时候并非如此。为了减少未使用的 CSS，您应该始终使用快速轻量级的主题，并移除任何臃肿的插件。

如何在 WordPress 中删除未使用的 CSS

如何在 WordPress 中删除未使用的 CSS

如何查找未使用的 CSS

使用 Perfmatters 删除未使用的 CSS

建议

第一步

步骤 2

步骤 3

步骤 4（使用 CSS 方法）

步骤 5（样式表行为）

步骤 6

清除已使用的 CSS

第一步

步骤 2

步骤 3

清除单个页面/文章中使用的 CSS

已排除的样式表

排除的选择器

如何将页面/文章从未使用的 CSS 中排除

常用的未使用 CSS 排除项

引用块

代码块

列数

评论

经典编辑器#

Adobe Fonts（Typekit）

阿斯特拉

Astra 手机菜单

Avada Google 地图

Avada菜单

Divi

Elementor flexbox 容器

Elementor 固定菜单

GeneratePress 移动菜单

GeneratePress 高级侧边栏移动菜单

英勇击倒

Google 评论插件

Raptive（前身为 AdThrive）

萨希法

智能滑块

WS 表格

如何过滤未使用的 CSS

排查未使用的 CSS 问题#

关闭动态内联 CSS

关闭组合/编译器

排除动态使用的 CSS

缩小排除范围#

404 错误#

CDN URL（使用其他重写方案时）#

步骤 1

步骤 2

步骤 3

MIME 类型错误#

如何优化已使用的 CSS 排除项

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

减少或更换插件/主题

相关网站建设文章