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

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

在您的网站中有大量未使用的 CSS 和 JS 会损害您的网站加载时间。 如果您通过 速度测试工具谷歌 PageSpeed 洞察,您可能会收到删除未使用的 CSS 的警告。

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

这是因为一个惊人的插件被称为 资产清理:页面速度助推器. 有了这个插件,删除未使用的 CSS 就像点击几个按钮一样简单。 或者,如果你不介意每年花几块钱, WP Rocket,有一个已移除的未使用 CSS 按钮,只需激活它,插件将自动移除所有未使用的 CSS。

查看: 前 7 名托管 Google Cloud WordPress 托管

什么是未使用的 CSS?

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

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

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

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

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

查看: 前 10 个最快和最好的 WordPress 主题 

如何识别未使用的 CSS

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

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

Unused CSS

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

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

在您的 chrome 浏览器上,打开 Chrome 开发工具,然后转到覆盖范围。 然后单击覆盖区域内的重新加载按钮。 你可以找到一个 Google Developers 工具中有关如何执行此操作的综合指南.

另一种选择是使用 jitbit 扫描未使用的 CSS 选择器。 你也可以使用 净化CSS 查找未使用的 CSS

如何删除未使用的 CSS

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

1.安装资产清理

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

2.进入插件设置

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

3.卸载不需要的CSS和JS

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

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

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

Unload CSS

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

删除未使用的 CSS WordPress 插件

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

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

Asset CleanUp

资产清理:页面速度助推器 即使是初学者也可以轻松删除未使用的 CSS 和 JSin WordPress。 您所要做的就是停用特定页面不需要的特定 CSS。

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

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

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

2。 WP火箭

WP Rocket 是排名第一的 WordPress 高级性能插件。 如果您是菜鸟,我的意思是如果您对 WordPress 没有经验或不熟悉,那么 WP Rocket 是删除未使用的 CSS 的最简单方法。

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

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

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

Remove Unused CSS WP Rocket

3。 Perfmatters

Perfmatters

Perfmatters 是由 Brian Jackson 和他的兄弟 Brett Jackson 开发的高级插件。 这个插件可以帮助轻松删除未使用的 CSS。

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

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

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

4. CSS JS 管理器

CSS-JS-Manager

CSS JS 管理器 可以专门从 Mobile 或 Desktop 中删除 CSS 或 JS。 取决于你想要达到的目标。

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

结论

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

删除所有未使用的 CSS 可能是不可能的,但您可以将它们减少到最低限度。 我利用 Asset CleanUp 删除未使用的 CSS 目标趋势.

请记住,优化但不要太着迷,除非您希望您的网站看起来像 世界上最快的网站.

也可以参考:

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

如何让 WordPress 变得非常快

如何为您的博客增加流量

Mfon Abel Ekene

冯·阿贝尔·埃肯

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

文章:48

接收技术人员的东西

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

3条评论

  1. 好清单。 资产清理对于大多数主题来说都不够好,因为我无法删除主 CSS 文件。 通常主 CSS 文件也很大。

    唯一一款无需外部服务订阅的免费插件是 Debloat。你可​​以考虑一下:https://wordpress.org/plugins/debloat/

发表评论

您的电邮地址不会被公开。 必填带 *