如何在 WordPress 中删除未使用的 CSS 和 JS(非常简单)

拥有大量未使用的 CSS 会降低您的网站速度。 如果您使用 Google PageSpeed 洞察力测试您的网站,您可能会收到删除未使用 CSS 的警告。 有一种简单的方法可以做到这一点,而无需编码和技术性。

网站中存在大量未使用的 CSS 和 JS 会影响网站加载速度。如果您使用Google PageSpeed Insights速度测试工具对网站进行测试,可能会收到移除未使用 CSS 的警告。

值得庆幸的是,有一种非常简单的方法可以做到这一点。 您无需具备任何特殊技术知识即可从您的 WordPress 站点中删除未使用的 CSS 和 JS。

这要归功于一款名为Asset CleanUp: Page Speed Booster的出色插件。有了这款插件,移除未使用的 CSS 就像点击几个按钮一样简单。或者,如果您不介意每年花点钱,WP Rocket也提供了一个移除未使用 CSS 的按钮,只需激活它,插件就会自动移除所有未使用的 CSS。

结账:排名前 7 的 Google Cloud WordPress 托管服务

什么是未使用的 CSS?

未使用的 CSS 是页面中存在的 CSS 文件,但在加载页面时通常不需要。 当访问者打开网站时,浏览器通常必须下载、解析和处理访问页面上的所有外部样式表,然后才能将页面内容显示给访问者。 如果在这样的页面上存在任何未在页面上使用的 CSS,浏览器将在其上浪费时间。

一个典型的例子是使用的大多数联系表单插件。 这些插件虽然大多只在“联系我们”页面上使用,但在整个网站上加载其 CSS。 不管是不是主页,CSS都会加载。

如果有太多不需要的 CSS,但它们正在加载并减慢浏览器读取和显示页面的时间,这可能会成为一个问题。

除了插件之外,主题开发者还会在 style.css 中写入很多几乎不需要的东西。 但无论是否需要,只要您的网站加载,它们就会加载!

一个未使用的 CSS 可能不是问题,但大量未使用的 CSS 会影响您网站的加载时间。

推荐:十大速度最快、性能最佳的 WordPress 主题

如何识别未使用的 CSS

查找未使用的 CSS 和 JS 是一件非常容易的事情。 我将推荐两种方法。

一种是通过 Google PageSpeed Insight 分析您的网站。 检查您的网站是否存在删除未使用的 CSS 问题。 单击它,您将能够识别负责它的站点组件。

未使用的CSS

您可以从上面看到记录了一种未使用的 CSS 的情况。 通过查看这个,我可以看到未使用的 CSS 的插件和位置。

第二种选择是获得更详细的分析。 您可以使用 Chrome 开发工具来实现这一点。

在 Chrome 浏览器中,打开 Chrome 开发者工具,然后转到“覆盖率”选项卡。接着,点击覆盖率区域内的“重新加载”按钮。您可以在 Google 开发者工具中找到关于此操作的详细指南

另一种方法是使用Jitbit 扫描未使用的 CSS 选择器。您也可以使用PurifyCSS来查找未使用的 CSS。

如何删除未使用的 CSS

按照以下步骤从 WordPress 中删除未使用的 CSS:

1.安装资产清理

转到插件然后添加新的。 然后在添加新插件页面的搜索框中键入“资产清理”。 安装并激活插件。

2.进入插件设置

要访问插件设置,请从 WordPress 仪表板单击设置,然后单击资产清理。

3.卸载不需要的CSS和JS

在插件设置上,您可能需要在开始之前接受您知道插件在剥离脂肪水龙头下的工作方式。

要卸载 CSS 和 JS,请单击 CSS 和 JSS 管理器。 从那里你可以删除任何你不需要的 CSS 和 JS。 您可以仅为主页、整个站点或特定 URL 删除它。 您还可以删除帖子、页面或类别。

一个示例是从除联系我们页面之外的整个站点的加载中卸载任何联系表单

卸载 CSS

花点时间卸载所有你知道不需要的 CSS 和 JS。 确保在完成后测试您的网站以确保一切正常。

删除未使用的 CSS WordPress 插件

以下是一些可用于删除 WordpPress 中未使用的 CSS 的插件:

1. 资产清理:页面速度助推器

资产清理

Asset CleanUp: Page Speed Booster即使是 WordPress 新手也能轻松移除未使用的 CSS 和 JS 文件。您只需停用特定页面不需要的 CSS 即可。

您也可以单独为个别帖子停用。 使用高级版,您可以通过插件停用未使用的 CSS/JS。

该插件是一个完整的性能插件,具有许多其他选项来加速 WordPress。 删除未使用的 CSS/JS 只是其中的一部分。

在这篇文章中,我使用了这个插件有一个指南。

2。 WP火箭

WP Rocket是排名第一的 WordPress 高级性能插件。如果您是新手,也就是说,如果您对 WordPress 不熟悉或不熟悉,那么 WP Rocket 是移除未使用 CSS 的最简单方法。

您需要购买插件,完成后,您可以从您的帐户下载它或查看您的电子邮件以获取下载链接。

通过仪表板>插件>添加新>上传安装插件。

只需导航到 WP Rocket 设置,然后单击“文件优化”选项卡。 然后向下滚动,您将看到“删除未使用的 CSS”,勾选框,保存并清除缓存。

删除未使用的 CSS WP Rocket

3。 Perfmatters

Perfmatters

Perfmatters是一款由 Brian Jackson 和他的兄弟 Brett Jackson 开发的付费插件。这款插件可以轻松移除未使用的 CSS 代码。

首先,您需要购买插件。 然后安装它。 激活许可证。 当您导航到设置时,打开脚本管理器。

只需转到您网站上的任何页面或帖子,您将在仪表板菜单上看到脚本管理器图标,单击它。 您将能够从页面或全局删除未使用的 CSS 和 JS。

这个插件是一个性能插件,带有许多其他选项来加速 WordPress。 删除未使用的 CSS/JS 是其中的一部分。

4. CSS JS 管理器

CSS-JS-管理器

CSS JS Manager可以专门从移动端或桌面端移除 CSS 或 JS 文件,具体取决于您的需求。

这个插件还可以延迟加载 CSS 或 JS 文件。

结语

如果你有很多未使用的 CSS 和 JS,你会注意到速度和性能得分有很大的提高。

虽然不可能完全移除所有未使用的 CSS,但可以将其数量减少到最低。我使用 Asset CleanUp 来移除TargetTrend中未使用的 CSS 。

记住,要优化,但不要过于执着于此,除非你想让你的网站看起来像世界上速度最快的网站

也可以参考:

如何消除 WordPress 中的渲染阻塞资源

如何让 WordPress 变得非常快

如何为您的博客增加流量

冯·阿贝尔·埃肯

冯·阿贝尔·埃肯

我喜欢创造有用的内容。 我的热情是通过为互联网用户指明正确的方向来帮助他们找到他们需要的东西。 这是我喜欢做的事情,我投入了许多小时的研究和测试,以确保我通过我在 TargetTrend 上的内容做到这一点。

文章:51

接收技术人员的东西

每月一次或两次技术趋势、创业趋势、评论、在线收入、网络工具和营销