如何修复WP Rocket移除未使用CSS功能无效问题

WP Rocket是最流行的WordPress网站缓存插件。仅作为高级版，它们支持超过200万个网站，以加快和改善页面加载时间。

在您的站点上安装并激活后，该插件将自动缓存内容并减少手动配置所需的大量手动工作。

但是，删除未使用的CSS是一个beta功能，可能会给您带来问题。如果您坚持并且无法使用删除未使用的CSS功能，这里有一些您可以尝试解决问题的想法。

了解使用和未使用的CSS

早些时候，速度优化主要集中在延迟页面加载的JavaScript文件上。然而，谷歌的Core Web Vital完全改变了情况，现在的重点是改善用户体验，最终应该会提高速度。为此，您必须通过删除在首屏内容下方加载所需的不必要代码来优化网站每个页面的首屏内容。

例如，您可能会在页面底部显示一个漂亮的时事通讯小工具。但是您用于此小工具的插件或主题将加载页面标题部分所需的CSS文件。传统上这很好，因为CSS文件总是包含在标题部分中。现在，专注于用户体验，Google PageSpeed Insights会在初始加载页面时警告您有未使用的CSS。问题是您需要开发人员或后端技能来手动分析above the fold并将未使用的CSS推迟到以后加载。当您有不同的页面布局（如文章、页面、WooCommerce产品和自定义文章类型）时，这将更加复杂。您必须分析站点上的每个页面并删除未使用的CSS，而WP Rocket只需在管理仪表盘中单击几下即可完成此操作。

删除未使用的CSS的好处

它只是减少了CSS文件，从而减少了对服务器的HTTP请求的页面大小。除此之外，删除未使用的CSS将有助于修复PageSpeed Insights工具中的以下项目。

• 减少未使用的 CSS
• 移除渲染阻塞资源

由于未使用的CSS导致的渲染阻塞问题

它还可以帮助使用较小的折叠样式更快地加载最大的内容绘画。

请记住，删除未使用的CSS本质上意味着在每个页面上仅收集和保留使用的CSS。所以，不要混淆“使用”和“未使用”这两个术语。

如何修复WP Rocket删除未使用的CSS功能不起作用的问题？

要删除未使用的CSS，请转到“设置 > WP Rocket > File Optimization”部分。本部分包含两个子部分，用于优化您网站上的CSS和JS文件。向下滚动并检查“CSS File”下的“Optimize CSS delivery”部分。您将找到两种优化CSS交付的方法，并且一次只能使用一个选项。

• 删除未使用的CSS（测试版）——我们将专注于这个选项。
• 异步加载CSS – 这是为您的页面生成关键CSS。在我们关于如何在WordPress中生成关键CSS的文章中了解更多信息。

您可以选择“删除未使用的CSS”按钮并向下滚动到底部以保存更改。现在，该过程将运行并显示一个进度条，如下所示。

删除WP Rocket中未使用的CSS进程

在3.11.x版本中，WP Rocket人员更改了删除未使用的CSS工作的方式，并弄乱了WooCommerce的操作调度程序和日志。这将使操作调度程序表的大小以GB为单位增长。您可以更新到他们的最新版本来解决这个问题并手动删除不必要的表条目。现在，该插件将首先为主页生成使用的CSS，然后每60秒处理每100个URL。

WP Rocket处理或使用的CSS

您将在仪表盘中看到指示服务正在运行并处理您的页面的消息。

删除在后台运行的未使用的CSS

使用WP Rocket删除未使用的CSS的问题

在WP Rocket中使用此功能时，您可能面临或需要了解三个主要挑战：

• 第一个问题是很多时候进度条会卡在中间，这个过程永远不会完成。由于这是一个后台进程，即使您离开设置页面，它也会继续运行。使用最新版本时，不会向用户显示该过程已完成。几天后我们与Google PageSpeed进行了检查，仍然发现警告正在显示，而WP Rocket没有任何消息是否完成工作。
• 其次，在成功构建使用过的CSS样式后，您可能会发现布局突然被破坏。这是由于您在网站上进行的手动更改或WP Rocket本身的自动操作。
• 第三，即使使用最新版本的插件，WP Rocket表（如下面第5点所述）仍将继续增长。
• 最后，很少有特定的元素会损坏，而其他部分会正确加载。您可以在排除列表中为那些损坏的元素添加CSS选择器或样式表URL以解决问题。

让我们解释涵盖上述两个问题的所有可能情况以及可能的修复。

1、云服务慢

WP Rocket使用他们的云服务器运行删除未使用的CSS进程。这确实是一个复杂的过程，总结如下：

• 从您的每个页面收集所有CSS/JS文件。
• 发送到他们的云服务器以处理文件并识别CSS选择器。
• 收集的CSS样式将与页面的HTML进行比较，并分类为已使用或未使用。
• 将已使用和未使用的CSS存储在数据库表中。
• 最后，使用的CSS将被内联检索以修复PageSpeed Insights问题。

因此，当您拥有数千个页面和不同的文章类型时，可能需要很长时间。有时，他们的云服务永远不会响应，导致进度条长时间停留在相同的百分比。此外，您的请求将在队列中提交，所需时间取决于队列中已处理的请求数量。如前所述，WP Rocket支持超过200万个站点，并且使用的CSS生成过程会在每个站点上30天后自动运行。因此，您的请求有可能在队列中并且需要时间。

您可以在这里做的是简单地禁用该选项并保存您的更改。等待一段时间，然后再试一次，看看是否有效。避免，不断切换此功能以防止向处理队列发送多个请求。它只会进一步延迟该过程，并且不会帮助您快速完成。如前所述，现在他们通过每60秒自动处理100个URL来控制此计划。但是，用户端不会停止打开或关闭该功能。因此，请避免打开和关闭此功能，并等待一段时间检查结果。

2.允许WP Rocket IP地址

WP Rocket云服务器IP地址为135.125.83.227。在极少数情况下，您可能会拦截此IP，这将导致CSS生成过程失败。请记住，您可以拦截IP范围，例如 135.*.*.* 或 135.125.*.* 或 135.125.83.*。在所有这些情况下，该过程都会失败，您需要删除IP拦截才能访问他们的服务器。

3. 启用Cron作业

如前所述，删除未使用的CSS进程将使用默认的WordPress cron作业 (WP-Cron) 在后台运行。该过程将在有人访问该页面的60秒后运行，并且每30天自动重新构建使用的CSS样式。所有这些都使用WP-Cron并确保您没有在您的网站上禁用此功能。许多用户和开发人员禁用了WordPress中的默认WP-Cron，因为它会减慢管理部分的速度。在这种情况下，您可以设置自己的cron作业以确保WP Rocket可以使用它。

如果您感到困惑，有一个WP-Cron Status Checker插件可以帮助您通知cron在您的站点上不工作。该插件将每24小时运行一次，以检查您网站上运行的WP-Cron的状态。在自己的cron作业和插件检查的情况下，您需要了解频率会影响您的CSS生成过程。当您怀疑cron没有在您的站点上运行时，首先确保它可以正常工作，然后再尝试在WP Rocket插件的设置页面中启用删除未使用的CSS选项。

您还可以咨询您的托管公司，以确认WP-Cron正在运行并且没有在您的站点上被禁用。如果您使用Cloudflare，请了解有关解决使用Cloudflare导致WP-Cron不工作问题的更多信息。

4. 更新后清理使用的CSS

当您启动该过程时，WP Rocket将立即开始显示一个用于清除已使用CSS的新菜单项。您可以在“WP Rocket > Clear Used CSS”下的顶部管理栏中看到这一点。单击此菜单将从数据库表中删除所有存储的使用过的CSS样式。

清除使用的CSS

• 在更改主题、安装添加样式的附加插件、使用主题面板或定制器手动添加CSS时，您应该删除使用的CSS。否则，您将看到布局损坏，表明您使用的CSS无法正常工作。在这种情况下，CSS生成将自动运行，并且没有选项供您验证是否成功完成。因此，在WP Rocket中使用删除未使用的CSS选项时，请确保经常测试您的网站。否则，由于您的操作或 WP Rocket 插件的自动 CSS 重建，布局会突然中断。
• 当您在生成CSS时卡在进度条（或发现错误出现在Google PageSpeed中）时，请先清除您使用的CSS并禁用优化CSS交付选项。验证上述第2点和第3点并等待一段时间再重试。虽然重新构建CSS可能需要额外的时间，但它有助于确认您方面没有问题。

5. 清空后端WP Rocket表

仅在WP Rocket中启用删除未使用的CSS功能并不止于此。它可以随时通过更新产生问题，您可以使用“清除未使用的CSS”并重建已使用的CSS，如上面第4点所述。但是，由于WP Rocket创建的大型后端表，可能会发生问题。WP Rocket将创建两个数据库表，您可以使用 phpMyAdmin、Adminer或任何其他数据库管理工具检查它们。

• wp_ wpr_rucss_resources – 所有CSS和JS文件（WP Rocket每30天检查一次并从该表中删除未使用的CSS）
• wp_wpr_rucss_used_css – 使用的CSS

当您的主题或插件使用许多CSS和JS文件时，资源表可能会很大。同样，当您为移动设备启用单独的缓存时，使用的CSS表会快速增长。尽管您不会在PageSpeed中看到减少未使用的CSS警告，但较大的表格大小将直接影响您网站的性能。您可以查看在GitHub中针对该主题打开的问题。以下是那里注册的投诉之一，提到由于此问题，数据库大小从8MB变为800MB。

GitHub中WP Rocket删除未使用的CSS问题

这个问题可能是由于页面构建器插件（如Elementor）、动态广告脚本和为单个页面使用自定义CSS的主题而发生的。这里的解决方案是禁用单个页面上的动态内容或手动清空数据库表，以便插件重新构建。您只需单击MySQL数据库表中的“清空”选项并确认弹出窗口即可删除其内容。

空数据库表内容

请注意，当您从设置中停用删除未使用的CSS功能时，WP Rocket不会删除这些表条目。如果您决定从您的网站中删除它，请查看我们关于如何完整删除WP Rocket插件的教程。

6. 检查您的安全插件

尝试启用删除未使用的CSS功能时，您的安全插件可能会拦截WP Rocket服务器。通常，安全插件应用防火墙来保护站点免受恶意攻击。它可能会拦截WP Rocket并停止使用的CSS生成过程。因此，当您发现删除未使用的过程不起作用时，请禁用您的防火墙设置并再次检查。如果可行，那么您可以在防火墙设置中将WP Rocket服务列入白名单。

像Wordfence这样的插件提供了一种学习模式来运行任何所需的操作，以便插件在您以后启用防火墙设置时学习并且不会阻止请求。但是，该过程可能会根据您使用的安全插件而有所不同，您可能需要咨询插件开发人员以修复防火墙问题。

7. 使用CSS安全列表

这是一个不同的问题，因为该过程将在设置页面中完成，但由于删除CSS样式，您的网站布局将被破坏。例如，当您删除未使用的CSS时，WP Rocket将使用搜索和过滤功能破坏数据表。

• 在这种情况下，右键单击页面并在Developer Tools中检查损坏的元素。
• 找到元素所需的CSS样式表。
• 通过排除域名粘贴CSS文件的URL。
• 保存您的更改并重新生成使用过的CSS。

假设您发现以下URL引起了问题：

https://yoursite.com/wp-content/plugins/my-plugin/css/123.css

您需要在CSS安全列表框中输入以下 URL：

/wp-content/plugins/my-plugin/css/123.css

也可以像下面这样使用通配符来排除文件夹中的所有CSS文件来删除样式。

/wp-content/plugins/my-plugin/css/(.*).css

小结

WP Rocket的人大力宣传他们的插件，称这将有助于提高Core Web Vitals和PageSpeed Insights得分。主要是删除未使用的CSS、延迟加载JS和媒体文件，您可以获得好成绩。但是，他们不会告诉你的是，当有问题时，他们不会支持你。特别是，你会遇到“删除未使用的CSS”背后如此复杂的逻辑问题。该功能多年来也处于测试阶段，但并未提醒它会构建庞大的数据库表。如果您遇到困难，请尝试上述修复并检查它是否有帮助。否则，您需要登录您的WP Rocket帐户以提出票证并等待很多天才能得到他们的回复。简而言之，您需要禁用该功能并尝试“异步加载CSS”或寻找替代选项。

即使在使用WooCommerce操作调度程序后使用最新版本的插件，数据库表的大小仍然很大。如果这是您想要购买WP Rocket插件的唯一功能，我们强烈建议您不要购买并检查其他插件，例如Perfmatters。虽然过程与Perfmatters相同，但它不使用数据库表。相反，它将缓存存储在易于处理的单独文件夹中。