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

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

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

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

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

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

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

什么是渲染阻塞资源?

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

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

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

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

如何找到渲染阻塞资源

在解决渲染阻塞问题之前,您需要知道问题出在哪里。您可以通过在Google PageSpeed InsightsWeb.Measure 上运行测试来找出哪些资源导致了渲染阻塞。

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

1. 访问Google PageSpeed Insights

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

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

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

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

对于BloggingTools,我们在桌面端没有渲染阻塞问题,但在移动端有。因此,为了演示方便,我们将使用移动端,如下所示。

PageSpeed Insight Mobile 分数
PageSpeed Insight 移动版
我们有 2 个手机问题

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

BloggingTools.org 在未进行任何优化的情况下就取得了这样的分数,因为我们使用了名为GeneratePress的超快超轻量级主题。此外,我们的网站托管在名为Cloudways 的高速虚拟主机上。

注意:您不必过于执着于 PageSpeed Insights 评分达到 100 分。它只是一个参考指标。通常,65 到 80 分的平均分对大多数人来说就足够了。请勿删除对您的业务至关重要的文件。

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

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

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

1.安装并激活自动优化

有很多 WordPress 插件可以实现这个功能,例如 W3 Total Cache、WP Rocket等等。但根据我管理众多网站的经验,Autoptimize 的表现始终远胜于它们。更棒的是,Autoptimize 几乎兼容所有 WordPress 缓存插件,而且它是免费的。

前往 WordPress 插件目录安装并激活 Autoptimize。

2.访问自动优化设置

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

3.优化JavaScript

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

自动优化 JavaScript

4.优化CSS

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

自动优化 CSS

5.优化HTML

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

自动优化 HTML

6.检查杂项选项

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

自动优化杂项选项

7. 保存并清空缓存。

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

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

Google PageSpeed Insight 移动版
Google PageSpeed Insight Mobile 分数

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

如果想进一步优化,可以使用Async JavaScript,它是 Autoptimize 的同一作者开发的插件。它们可以配合使用。但我并不推荐这样做,因为它可能会导致网站崩溃。单独使用 Autoptimize 就足够了!

结语

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

如果经过以上步骤后,您的网站仍然很慢,最可能的三个问题是您的主题、虚拟主机或插件存在问题。我推荐Cloudways作为最佳虚拟主机,GeneratePress作为最佳主题。如果您是新手,Bluehost可以满足需求,但如果您预算充足,Cloudways 是最佳选择。您可以免费试用。我的 TargetTrend 网站使用的是 GeneratePress 和 Cloudways。

也可以参考:

如何让 WordPress 变得非常快

如何为您的博客增加流量

如何通过博客赚钱

如何开始博客

冯·阿贝尔·埃肯

冯·阿贝尔·埃肯

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

文章:51

接收技术人员的东西

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