如何删除 WordPress 中未使用的 CSS 和 JavaScript?

Astra、GeneratePress 和 Genesis 等轻量级主题在网站上加载的 CSS 和脚本非常少。 这有助于消除 Google PageSpeed Insights 工具中未使用的 CSS 和 JavaScript 错误,并使速度得分飙升。 然而,99% 的商业 WordPress 主题结合了多种功能并加载繁重的脚本和 CSS。 无论您使用轻量级或重度主题,您仍然需要通过插件提供许多功能。 结合主题和插件,整体速度得分将对网站上的每个源文件产生影响。 在本文中,我们将解释如何删除 WordPress 中未使用的 CSS 和 JavaScript 以提高 Google PageSpeed Insights 得分。

什么是未使用的 CSS 和 JavaScript?

让我们用一个简单的例子来解释这一点。 联系表格 7 是在 WordPress 网站中添加联系表格的流行插件之一。 通常,您需要在“联系”页面以及其他几个页面中使用联系表格。 您不会在每篇博文中使用联系表格。 但是,Contact Form 7 插件将在您网站的每个页面和博客文章上加载 CSS 和 JavaScript。 当您有 1000 篇博文并且所有博文都加载联系人表单脚本/CSS 时,这是一个大问题。 这些不必要的 CSS 和脚本称为未使用的 CSS 和未使用的脚本。

另一个很好的例子是 WooCommerce 商店。 您只需要在产品、产品档案、购物车、结帐和商店等页面上使用 WooCommerce 样式和脚本。 但是,该插件没有任何选项来阻止在博客文章或页面上加载文件。

为什么这是一个问题?

不幸的是,几乎所有插件都会在您网站的所有页面上加载资源。 这将严重影响页面加载速度并降低 Google PageSpeed Insights 等工具的速度得分。 在 PageSpeed Insights 中测试页面 URL 时,您将看到如下错误作为机会。

未使用的 CSS 和 JS 的 PageSpeed 错误
未使用的 CSS 和 JS 的 PageSpeed 错误

虽然该工具说这不会直接影响性能得分,但它对加载时间有巨大影响。 在这一点上,30% 的分数是阻塞时间,没有使用的 CSS / JS 和渲染阻塞资源会将分数拉低。 此外,一些托管公司会根据带宽使用情况收费。 在您的站点上加载不必要的 CSS / 脚本文件将成倍增加带宽使用。 因此,有必要识别未使用的 CSS 和 JavaScript,并将它们从所有页面上的加载中删除。

如何识别未使用的 CSS 和 JavaScript?

您必须了解是什么导致未使用的资源加载到您的页面上。 如上所述,您不需要在所有页面上加载联系表格、在线商店或评论插件。 然而,整个任务比你想象的要复杂。

  • 首先,清除缓存并禁用您网站上的缓存插件。 现在转到 Google PageSpeed Insights 工具并检查速度得分。
  • 单击“删除未使用的 JavaScript”和“删除未使用的 CSS”消息以展开它们。 Google 会向您显示包含传输大小和潜在节省的资源列表。
在 PageSpeed 中查看未使用的资源
在 PageSpeed 中查看未使用的资源
  • 外部代码 – 正如您在上面的屏幕截图中看到的,“pagad2.googlesyndication.com”来自 Google AdSense。 您不能删除从第三方网站加载的未使用的 CSS 和 JavaScript。 这些脚本通过广告、分析、YouTube 视频嵌入或社交分享插件加载到您的网站上。 因此,您必须了解这些外部资源会影响页面速度,除非您决定删除它们,否则您无法控制它。 查看有关 AdSense 与页面速度的文章,了解广告会降低您的页面速度。
  • 插件和主题文件 – 我们将在下一节解释如何删除它们。
  • 内联 CSS 和脚本 – Google PageSpeed Insights 工具通常不会显示它们。 您必须手动识别它们并将其从您的站点中删除。 如果插件插入内联 CSS/脚本,则禁用插件文件或避免添加自定义内联代码。 请记住,使用带有数千行的 style.css 的重主题存在一个大问题。 您必须手动删除 style.css 文件中的代码以减小大小。

总之,如果将未使用的 CSS 和 JavaScript 作为单独的文件加载,则很容易删除它们。 加载巨大的 style.css 文件或内联 CSS 无法删除,除非您手动查看它们并删除未使用的代码。 或者,您可能需要找到一个轻量级的主题或插件来解决这个问题。 找到导致错误的原因后,您可以在您的站点上启用缓存插件。

如何删除未使用的 CSS 和 JavaScript?

当页面在浏览器上加载时,您可以使用两种方法来删除未使用的 CSS 和 JS 文件。 第一种选择是使用 WP Rocket 等高级插件,第二种选择是使用免费插件。 我们将详细解释这两种方法,以便您检查并选择适合您的方法。

使用 WP Rocket 删除未使用的 CSS

WP Rocket 是最流行的 WordPress 缓存插件,它提供了超级简单的用户界面。 为了提高页面加载时间,您必须购买插件并将其更新到最新版本(3.9 以上)。

  • 转到 WordPress 管理面板中的“设置 > WP Rocket”菜单。
  • 单击“文件优化”选项卡并向下滚动到“CSS 文件”部分的底部。
  • 选中“优化 CSS 交付”复选框以查看用于启用“删除未使用的 CSS”和“异步加载 CSS”的两个按钮。 您可以一次使用其中一个选项,但不能同时使用两者。
  • 选择“删除未使用的 CSS”选项并从警告消息中确认“激活删除未使用的 CSS”选项。
删除 WP Rocket 中未使用的 CSS
删除 WP Rocket 中未使用的 CSS
  • 该插件将开始处理您网站中的 CSS,这可能需要几分钟才能完成。
删除 WP Rocket 中未使用的 CSS
删除 WP Rocket 中未使用的 CSS
  • 完成后,您将看到一条成功消息“Remove Unused CSS is complete!”。
删除未使用的 CSS 已完成
删除未使用的 CSS 已完成
  • 单击页面底部的“保存更改”按钮以重新生成缓存文件。

确保彻底测试您的网站,以确认所有帖子类型在删除未使用的 CSS 后都能正常工作。 如果您发现任何问题,您可以在排除框中排除 CSS 或 JavaScript。 如果移除 CSS 对您的站点不起作用,您还可以尝试“异步加载 CSS”选项来生成关键 CSS 并避免呈现阻塞 CSS 问题。

使用 WP Rocket 删除未使用的 JavaScript

与 CSS 不同,使用 WP Rocket 插件无法删除 JS。 但是,您可以在“文件优化 > JavaScript 文件”部分启用“延迟加载 JavaScript”和“延迟 JavaScript 执行”选项。 这将延迟内部和外部代码并消除渲染阻塞 JavaScript 问题。

在 WP Rocket 中延迟 JavaScript 执行
在 WP Rocket 中延迟 JavaScript 执行

启用这些选项后,请确保测试您的站点是否正常工作。 这将使您在 Google PageSpeed Insights 工具中的页面速度得分接近 100,因为延迟 JS 将减少总阻塞时间,这在性能得分计算中占 30% 的权重。

  可能影响您网站的 9 个隐藏的 SEO 问题

使用 Asset CleanUp 插件删除未使用的 CSS 和 JavaScript

当您加载了大量插件和主题文件时,请按照以下说明在不需要它们的页面上删除它们。

  • 登录到您的 WordPress 管理仪表板并导航到“插件 > 添加新”部分。
  • 在搜索框中输入“asset cleanup”并找到插件“Asset CleanUp: Page Speed Booster”。
安装和激活插件
安装和激活插件
  • 单击“立即安装”按钮,然后激活插件。
  • 激活插件后,我们建议您阅读显示的文档。 这是正确使用插件所必需的。
阅读入门指南
阅读入门指南

插件设置

该插件有许多设置,我们不会在本文中解释。 如果您在您的网站上使用像 WP Rocket 这样的缓存插件,请确保除了禁用未使用的脚本和 CSS 之外不要使用任何其他功能。 转到“资产清理 > 设置”菜单,然后转到“插件使用首选项”选项卡。 在这里,您可以决定查看和禁用页面上未使用的 CSS / 脚本的方式。

  • 在仪表板中管理 – 启用此选项。 这将帮助您从管理仪表板中的帖子编辑器分析页面。
在仪表板中启用管理
在仪表板中启用管理
  • 在前端管理 – 如果您想从前端浏览器分析页面,则启用此选项。 否则,您可以禁用此功能。 请记住,前端分析只能由登录的管理员用户完成。 在您检查期间,访问您网站的用户不会受到影响。
在前端启用或禁用管理
在前端启用或禁用管理
  • 资产列表布局 – 单击下拉菜单并选择“所有样式和脚本 > 按位置分组(主题、插件、核心和外部)。 这将帮助您查看分组在不同类别中的资源文件。
设置视图布局
设置视图布局
  • 从资产列表中隐藏 WordPress 核心文件? – 启用此选项,这样您就不会弄乱核心 WordPress 文件。

现在,转到“测试模式”选项卡并启用“启用测试模式”选项。 这将帮助您在公开之前禁用脚本和 CSS 后检查站点是否中断。

启用测试模式
启用测试模式

单击底部的“更新所有设置”以应用您的更改。

删除未使用的 CSS 和 JavaScript

根据设置,您可以从编辑器或前端分析页面。

  • 从编辑器中禁用脚本和 CSS – 编辑任何现有帖子以转到帖子编辑器。 向下滚动到底部以查看 Asset CleanUp 插件中的元框。 查看该页面上加载的所有 CSS 和脚本并禁用您不需要的资源。
  • 从前端禁用脚本和 CSS – 如果您启用了“在前端管理”选项,请在浏览器前端打开您的任何帖子。 请记住,您应该在另一个浏览器选项卡中登录到您的 WordPress 管理面板。 在页面底部,您将看到类似的元框禁用页面上加载的资源。

在这两种情况下,您都会看到页面上加载的所有 CSS 和 JavaScript 文件根据您的设置进行分组。

查看组中加载的资源
查看组中加载的资源

展开每个组并查看插件和主题加载的文件的详细信息。 对于每个 CSS 和 JS 文件,您有多个选项,如下图所示。

禁用或启用 CSS 和 JS
禁用或启用 CSS 和 JS
  • 卸载页面上的资源。
  • 在站点范围内禁用文件
  • 禁用所有帖子(它将继续在页面和自定义帖子类型上加载)。
  • 很少有其他选项(例如使用 RegEx)仅在插件的专业版中可用。

禁用文件后,更新您的帖子以使更改在网站上生效。

查看禁用的文件和删除测试模式

  • 转到“资产清理 > 批量更改”部分。
  • 导航到“帖子、页面和自定义帖子类型”选项卡,然后从下拉列表中选择“帖子”。
  • 在这里,您可以查看您网站上所有已禁用的文件。
  • 选中“删除批量规则”复选框,然后单击底部的“应用更改”按钮以再次启用文件加载。
  • 或者,您可以在帖子编辑器中编辑任何帖子并修改文件的加载行为。
查看和删除批量文件
查看和删除批量文件

检查您的站点,如果一切正常,请返回设置页面并禁用“测试模式”选项。 这将使所有访问您网站的用户都能看到更改。 同样,您可以通过编辑自定义帖子类型、页面和产品页面来禁用 CSS 和 JS 文件。 使用 Google PageSpeed Insights 工具检查您的网页,看看错误是否已消除。

最后的话

我们希望这篇文章有助于从您的网站中删除未使用的 CSS 和 JavaScript 文件并提高 Google PageSpeed 得分。 我们推荐使用 WP Rocket,因为它很容易删除 CSS 和延迟外部 JS,只需点击几下。 如果您使用免费的 Asset Cleanup 插件,它只会帮助您禁用从插件和主题加载 CSS 和 JS 文件。 您必须避免使用第三方代码并手动删除 main style.css 文件中不必要的代码。 手动编辑文件时,请确保使用子主题来更新样式表,这样您在更新主题时不会丢失更改。

类似文章