如何消除 WordPress 中的渲染阻塞资源(非常简单)

渲染阻塞资源对博主来说可能是一个很大的痛苦。 谷歌不断警告以消除它们。 有很多方法可以删除它们,但这里有一个非常简单的方法,不需要编码。

拥有一个快速的博客或网站非常重要。 如果您想在搜索引擎中排名靠前,这一点很重要。 如果你的网站速度很慢,那肯定会伤害你的 SEO。

此外,缓慢的网站会使跳出率变高,这在技术上会在很多方面损害您的品牌。 缓慢的网站会影响收入和转化率。

大多数用户都没有耐心,如果您的网站加载时间过长,他们会放弃它并转向更快的替代方案。 那是一个潜在的客户或收入的助推器消失了。

如果您一直在尝试加速您的网站,并且您使用了 Google 等测试工具 PageSpeed洞察力,您可能会收到的一个警告是消除渲染阻塞资源。

在本文中,您将学习如何轻松消除渲染阻塞资源。

什么是渲染阻塞资源?

阻止渲染的资源是 CSS 和 JavaScript,它们会减慢网站的加载时间,因为它必须由 Web 浏览器下载,然后才能渲染页面内容。

当访问者试图访问一个网站时,浏览器会立即开始从上到下阅读该网站。 如果有任何 CSS 或 JavaScript,浏览器将停止读取,直到下载并处理文件。 在浏览器可以呈现首屏内容之前,它必须下载 CSS 或 JavaScript 文件。

您安装的插件或主题可以添加其中一些 CSS 和 JS。 有些不需要先加载,它们可以稍后加载。 但是因为它们位于顶部,它们会减慢您的网站速度。

所以谷歌“消除渲染阻塞资源”的意思是你从网站顶部删除不必要的资源,因为它会减慢网站内容的加载速度。

如何找到渲染阻塞资源

在解决渲染阻塞问题之前,您需要知道它的来源。 您可以通过运行测试找出哪些资源正在渲染阻塞 谷歌 PageSpeed 洞察 or 网络测量。

您可以按照以下步骤查找渲染阻塞资源:

1。 访问 谷歌 PageSpeed 洞察

2.输入你的网址,点击分析

3. 向下滚动并注意消除渲染阻塞资源警告。

在移动和桌面点击中检查它。

PageSpeed Insight Desktop
对于 BloggingTools,我们在桌面上有 100,幸运的是我们没有渲染阻塞问题

针对 博客工具,我们没有桌面版的渲染阻塞问题,但我们有移动版。 因此,为此,我们将使用 Mobile,如下所示。

PageSpeed Insight Mobile score
PageSpeed Insight mobile
我们有 2 个手机问题

如您在上面看到的,对于移动设备,我们有 2 个渲染阻塞问题。 得分为 93。得分更高,但为了这篇文章,我不得不停用 Autoptimize 插件。

BloggingTools.org 在没有优化的情况下获得了这个分数,因为我们使用了一个非常快速和轻量级的主题,称为 GeneratePress. 我们还托管在一个非常快速的网络主机上,称为 Cloudways.

备注:您不应该痴迷于在 PageSpeed 洞察力得分上获得 100 分。 它只是一个指南。 通常,对于大多数人来说,65 到 80 的平均分数就可以了。 不要删除对您的业务至关重要的文件。

WordPress 的好处是您无需手动完成所有操作。 有一些编码良好的插件可以提供帮助。

如何修复消除 WordPress 中的渲染阻塞资源问题

请按照以下步骤修复消除渲染阻塞资源问题:

1.安装并激活自动优化

有很多 WordPress 插件可以做到这一点,例如 W3 总缓存、WP Rocket 等。 但是根据我在许多网站上的经验,Autooptimize 总是比其中任何一个都处理得更好。 奇妙的是,Autooptimize 与几乎所有 WordPress 缓存插件兼容,而且它是免费的。

前往 WordPress 插件目录 安装并激活自动优化

2.访问自动优化设置

如果您需要在哪里找到自动优化设置,请在您的 WordPress 仪表板上单击设置,然后单击自动优化。

3.优化JavaScript

在 JavaScript 选项下,选择优化脚本代码并选择聚合 JS 文件。 您可以在下面找到我用于 BloggingTools 的设置。

Autoptimize JavaScript

4.优化CSS

在优化 CSS 选项下选择优化 CSS 代码。 还要选择聚合 CSS 文件和“也聚合内联 CSS”。 请参阅下面我用于 BloggingTools 的选项。

Autoptimize CSS

5.优化HTML

如果你想要更好的性能,你还可以使用 Autooptimize 来优化 HTML。 在 HTML 选项下,选择优化 HTML 代码。 您可以在下面看到我用于 BloggingTools 的设置。

Autoptimize HTML

6.检查杂项选项

您可以检查其他选项并调整一些适合您的设置。 您可以在下面找到 BloggingTools 的设置。

Autoptimize Misc options

7. 保存并清空缓存。

接下来,只需单击保存并清空缓存。 就这些!

毕竟,您可以在 Google PageSpeed Insight 上再次检查您的网站。 对于 BloggingTools,在这样做之后,我们的分数立即跃升至 95,并且所有消除渲染阻塞资源的警告都完全消失了。 见下文。

Google PageSpeed Insight mobile
Google PageSpeed Insight Mobile score

请注意,根据您拥有多少渲染阻止资源以及它们对您的网站的重要性,其中一些可能会保留。 不要试图删除它们。

如果要进一步消除,可以使用 异步JavaScript, 与 Autooptimize 同一作者的插件。 他们一起工作。 我不建议这样做,因为它可能会破坏您的网站。 单独进行自动优化是可以的!

结论

速度很重要,消除渲染阻塞资源可以帮助您的网站加载更快,并在速度测试工具上为您的网站提供更好的分数。 但你永远不应该沉迷于这些分数,因为它们只是用来指导的。

如果您的网站在此之后仍然很慢。 三个最有可能的问题可能是您的主题或您的 Web 主机不好,或者您安装了不好的插件。 我建议 库威 作为最好的网络主机和 GeneratePress 作为最好的主题。 如果你是初学者, BlueHost的 可以处理,但如果你能负担得起,Cloudways 是最好的。 您可以免费开始。 我为 TargetTrend 使用 GeneratePress 和 Coudways

也可以参考:

如何让 WordPress 变得非常快

如何为您的博客增加流量

如何通过博客赚钱

如何开始博客

Mfon Abel Ekene

冯·阿贝尔·埃肯

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

文章:48

接收技术人员的东西

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

发表评论

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