如何消除WordPress中的渲染阻塞资源 [插件或手动方式]

在当今竞争激烈的数字化环境中，网站速度对于在线业务的成功非常重要。像谷歌这样的搜索引擎巨头优先考虑加载速度快的网站，认识到提供无缝的用户体验的必要性。

研究表明，快速加载的页面可以提高用户参与度和转化率。事实上，页面加载时间延迟一秒可能导致客户转化率下降7%。鉴于此，显然网站所有者应高度关注网站性能。

谷歌十分重视网站性能，并将其考虑在搜索结果中。因此，加载速度快的网站更有可能首先显示在搜索结果中，吸引更多访问者，最终产生更多收入。但是，如何满足谷歌的要求并快速加载网站呢？

您需要清除可能阻塞website’s loading time的资源，例如CSS和JavaScript文件。

然而，对于缺乏技术技能的个人来说，删除这些资源可能具有挑战性且耗时。

在本文中，我们将解释阻塞渲染资源及其对网站性能的影响，并提供逐步指南，以消除您的WordPress网站上的这些资源。因此，让我们开始优化您的网站以提高速度和成功！

阻塞渲染资源

任何在网页显示之前必须加载的资源都被视为阻塞渲染资源。这些资源影响website’s performance的效果并延长加载页面的时间。

如果CSS或JavaScript文件阻塞了网页的渲染，则可以将其视为阻塞渲染资源。然而，加载页面的重要性因其立即需求而异。

当用户访问页面时，浏览器首先处理HTML代码以在视口上方显示其内容。当浏览器遇到CSS和JavaScript文件时，它也会下载并处理它们。如果资源文件包含额外的代码或未使用的部分，则加载网页所需的时间更长。

阻塞渲染资源的类型

通常，在WordPress中，CSS和JavaScript等资源文件被视为阻塞渲染资源。浏览器将这些资源视为关键资源，并要求在显示页面之前加载。但是，还有其他阻塞网页渲染的资源文件。

以下是阻塞渲染资源的列表：

CSS样式表

网页的设计和呈现是由CSS样式表确定的。如果将其放置在HTML页面的部分中，则会将其视为阻塞渲染资源。

在部分的JavaScript文件

JavaScript是一种可以为网页提供动态行为和交互的语言。如果将JavaScript文件放置在HTML页面的部分，则将其视为阻塞渲染资源。

字体

网页上的文本使用不同的字体显示。如果将字体包含在HTML页面的部分并从本地服务器或CDN加载，则也将其视为阻塞渲染资源。

HTML导入

这些是旧的HTML功能，使网页能够包含来自其他HTML文档的元素。虽然现在不常使用HTML导入，但在某些较旧的网站上可能仍然可以看到。 HTML导入也被视为渲染阻塞资源。

为什么渲染阻塞资源对网页很糟糕

如果您的WordPress网站包含渲染阻塞资源，则会在搜索结果中落后。即使您目前处于前线，性能更好的网站也将最终超过您。

具有渲染阻塞资源的网站在渲染网站时会加载额外的文件。在查看网站之前，用户必须等待文件处理完成。这些资源将影响以下网站的性能指标：

最大内容绘制时间：确定加载页面的主要内容需要多长时间。
首次内容绘制时间：浏览器在您的网站上生成第一个文档对象模型（DOM）内容所需的时间。
总阻塞时间：评估从首次内容绘制时间到页面完全可交互所需的时间。

尽管渲染阻塞资源对加载没有必要，但它们可能会妨碍网站或网页的渲染。因此，有必要删除此类资源，以防止使用户难以浏览您的网站。

让我们更详细地了解为什么渲染阻塞对网页是一个严重问题：

页面加载时间慢

渲染阻塞资源会导致网站加载速度变慢，这是其主要缺点之一。当网页包含具有不必要元素的资源文件时，网页加载速度会变慢。因此，它将影响搜索结果的出现，降低用户参与度并增加跳出率。

渲染被阻塞

当浏览器遇到渲染阻塞资源时，通常会停止渲染网页，因为它希望获取和处理渲染阻塞资源。

最终，用户因页面的不响应或渲染缓慢而感到烦恼并离开您的网站。

此外，如果资源加载缓慢，浏览器也可能放弃加载它。这可能导致页面损坏或信息丢失。

用户参与度降低

当发生渲染延迟时，用户参与度也会降低。用户总是期望快速加载时间，并且通常会放弃加载缓慢的网站。因此，他们最终会进入加载速度更快的网站。

加载缓慢的网站对消费者满意度和品牌声誉有负面影响。由此，转化率也大幅下降。

从WordPress中删除渲染阻塞资源有不同的方法。但是，我们将向您介绍手动消除渲染阻塞资源的方法。然后，我们将展示如何使用WordPress中一些知名插件来完成此操作。

手动消除渲染阻塞资源

您可以避免手动操作，所以不要感到沮丧。但是通过阅读本节，您肯定会学到一些技巧。但首先，观看此视频以熟悉所讨论的术语。

#1.识别渲染阻塞资源

在从您的网站上删除这些资源之前，您必须首先找出阻止呈现的资源。只需按照以下步骤查找WordPress网站上的阻止呈现资源：

转到Google PageSpeed Insights。
在搜索栏中输入您网站的URL。
点击“分析”按钮以获取关于您网站的见解。

向下滚动并检查“机会”部分。
如果您的页面有任何阻止呈现的资源，它们将被列出。

#2. 使用“defer”和“async”属性来处理JS

在确定了阻止呈现的资源后，现在是时候消除它们以提高网站性能了。从多种方法中，使用“defer”或“async”方法处理JavaScript文件是一种方法。

关于“defer”属性，它允许浏览器下载JS文件，然后执行它。但是，这只有在页面完成加载并准备显示其内容时才会发生。

因此，页面上的其他元素可以与JavaScript文件并行加载。结果，页面加载所需的时间减少。

另一种方法是“async”属性，它允许浏览器在任何其他页面元素不受阻塞的情况下下载JS文件。因此，JS文件可以与其他元素并行加载，加快加载过程。

您可以通过使用“defer”或“async”属性来摆脱阻止呈现的资源并提高网站速度。

#3. 使用“media”属性来处理条件CSS

使用“media”属性来处理条件CSS是另一种消除阻止呈现资源的方法。使用此属性，您可以为桌面和移动浏览器定义独特的CSS文件。

例如，您可以包含一个专门适用于桌面设备的CSS文件和一个适用于移动设备的CSS文件。您可以告诉浏览器，只有在通过桌面设备访问时才会加载桌面CSS文件。

类似地，只有在通过移动设备访问时才应加载移动CSS。通过为指定设备加载设备特定的CSS，您可以减少阻止呈现的资源并提高网站的加载时间。

#4. 推迟加载非关键CSS

除了使用“media”属性来处理条件CSS外，还可以尝试推迟加载非关键CSS。对于这种方法，您应该首先加载基本的CSS。接下来，随着页面的加载，您可以加载其余的CSS。

例如，您可能有一个包含网站所有样式的庞大CSS文件。但是，只有该CSS文件的一小部分需要用于显示您网站的折叠区域内容。通过推迟加载非关键CSS，可以快速显示折叠内容，并在页面加载时加载其余的CSS。

#5. 删除未使用的CSS和JS

删除不必要的CSS和JavaScript文件是另一种去除阻止呈现资源的技术。这些文件会使您的页面变得更重，并增加加载时间。

通过删除任何未使用的CSS和JS文件，您可以减少阻止呈现的资源的数量。您可以轻松地使用PurifyCSS或UnusedCSS等工具从您的网站中删除任何未使用的CSS文件。

#6. 本地加载自定义字体

自定义字体还可以包含限制渲染的资源。不要依赖于像Google Fonts这样的外部资源，应该本地加载自己的自定义字体，以避免需要这些资源。

通过本地加载，您可以确保自定义字体快速高效地加载，而不会减慢网站的性能。这可能导致网站更快、更响应，并提升用户体验。

#7. 压缩JS和CSS

最后，压缩您的CSS和JavaScript文件可以帮助您的网站更好地运行。压缩会从您的代码中删除不必要的字符，如空格和注释。因此，您的文件大小会减小，从而加快加载速度。

要压缩您的文件，您可以使用MinifyJS或CSSNano等工具。保留原始文件的副本，以防您需要对其进行修改。

使用插件消除阻塞渲染的资源

在本节中，我们将向您展示如何使用WordPress插件消除阻塞渲染的资源。这些插件在WordPress中非常有名，可以快速消除阻塞渲染的资源。最重要的是，您甚至可以在没有专业知识的情况下提升网站性能。

#1. W3 Total Cache

W3 Total Cache（W3TC）提升了WordPress网站的整体用户体验。它消除了阻塞渲染的资源，改善了SEO，Core web vitals等等。该插件利用内容传递网络集成等功能来实施最佳实践。

要消除阻塞渲染的资源，请安装并激活W3 Total Cache插件，并按照以下步骤操作：

转到WordPress仪表板的性能部分，点击常规设置。
在缩小标题下，启用缩小并选择手动作为缩小模式。
现在点击保存所有设置。

然后，通过Google PageSpeed Insights收集所有阻塞渲染的JavaScript和CSS文件。
然后返回性能>缩小。
现在，在js部分，首先，为JS缩小设置启用启用。然后，在操作区域部分，为之前标签的非阻塞使用“defer”类型选择。
现在转到JS文件管理，选择您已激活的主题，并点击添加脚本按钮。现在，在指定的字段中粘贴Google PageSpeed Insights扫描有问题的JavaScript网址。

现在稍微向下滚动到CSS部分。在CSS文件管理部分从下拉菜单中选择您的主题，然后点击添加样式表。现在，您只需按照之前的步骤复制粘贴从PageSpeed Insight收集到的有问题的网址。

设置都配置好后，点击保存设置和清除缓存按钮执行操作。

#2. JCH Optimize

JCH Optimize通过Google PageSpeed Insight衡量增强WordPress网站的性能。该插件改善了首次内容绘制（FCP），最大内容绘制（LCP），速度指数（SI），累积布局移位（CLS），交互时间（TTI）等。

因此，整体用户体验和网站性能得到了显著改善。

安装并激活JCH Optimize后，按照以下步骤消除渲染阻塞资源：

转到设置> JCH Optimize，向下滚动一点，并转到基本功能设置。

启用优化CSS交付以消除CSS渲染阻塞。此功能自动确定在每个网页上显示折叠内容所需的基本CSS，并将其内联到每个页面的HTML内容的部分中。

然后，预加载链接用于异步加载连接的CSS文件。
要删除JavaScript渲染阻塞资源，必须在标签中包含async或defer属性。如果它们之间存在任何依赖关系，可能会更改它们加载的顺序，从而导致JavaScript加载失败。
在JCH Optimize仪表板上，转到组合文件自动设置部分。
现在点击Optimum，它会自动启用延迟/异步JavaScript。

启用最佳设置可以延迟或异步加载JavaScript。
如果JavaScript文件是动态加载的，则无法延迟加载。

#3. Speed Booster Pack

为了改善您的网站性能和整体可用性，Speed Booster Pack是另一个很棒的WordPress插件。您的网站将在Google等主要搜索引擎中排名更高。使用此插件，您将获得增加的流量和巨大的速度。

安装并激活Speed Booster后，只需按照以下步骤进行：

转到WordPress仪表板上的Speed Booster Pack。
要删除JavaScript渲染阻塞资源，请单击资产并向下滚动。转到优化JavaScript 选项。您可以点击所有内容以延迟所有JS文件和内联JS，或者您可以选择自定义以包括您选择的JS脚本。
然后启用将JavaScript移至页脚。这将将所有JS文件和内联JS移至页面源的底部。

现在，点击Optimize CSS选项以删除CSS渲染阻塞资源。

您将得到启用关键CSS的选项，该选项根据Google’s recommendations优化CSS交付。此选项将延迟所有CSS文件并内联折叠内容的样式。

您可以启用内联所有CSS 将所有CSS文件内联到HTML输出中。还有一个选项可以对已内联的CSS进行缩小。

配置插件后，保存所有设置以消除渲染阻塞资源。

#4. Autoptimize

Autoptimize是另一个简化优化和消除渲染阻塞资源的插件。该插件通过将JS脚本和CSS样式重新定位到页脚，汇总，缩小和缓存它们来简化网站。

通过将CSS注入到页面头部、内联关键CSS和引用完整的聚合CSS来优化CSS。此外，它还自动压缩HTML以进行更好的优化。

安装并激活Autoptimize插件，然后按照以下步骤删除渲染阻塞资源：

首先，在WordPress仪表板上转到设置 > Autoptimize。
在Javascript选项部分，勾选“优化JavaScript代码？”
在CSS选项部分，勾选“优化CSS代码？”
现在点击保存更改和清空缓存。

这通常足以解决渲染阻塞资源的问题。然而，结果可能会根据您的WordPress网站上安装的主题和插件而有所不同。要验证问题是否已解决，请再次通过PageSpeed Insights运行您的网站。要进行进一步的优化，请按照以下步骤操作：

在上一步之后，Javascript和CSS选项下有很多选项可供选择。
现在可以启用聚合CSS和聚合JS文件
最后，点击保存更改。

#5. WP Rocket

WP Rocket是一个著名的高级WordPress插件，用于缓存性能优化。但它不仅仅是一个缓存插件，还可以删除网站上的渲染阻塞资源。结果，核心Web Vitals性能和PageSpeed Insight得分得到显著提升。

安装并激活WP Rocket插件后，使用以下步骤消除渲染阻塞资源：

点击WP Rocket，转到文件优化选项卡，然后转到CSS文件部分。
启用优化CSS交付

现在转到JavaScript文件部分，选择加载JavaScript延迟。您还可以尝试启用Jaquery的安全模式。但如果它破坏了您网站的前端设计，可以撤销它。
通过点击保存更改按钮保存所有更改。

删除网站的渲染阻塞资源的好处

更快的页面加载时间可以极大地影响网站的排名。由于Google总是更喜欢加载更快、运行更流畅的网站。因此，得分在90以上的页面将始终在搜索结果方面获得更高的优先级。使用上述插件，您可以实现以下链接得分：

更快的页面加载时间可以增加用户参与度，因为用户更有可能在加载速度快的网站上停留。因此，用户可以舒适地浏览网站或快速进行购买。

此外，删除渲染阻塞资源可以显着改善移动用户体验，因为移动用户更有可能使用速度较慢且数据有限的网络。

最后的思考

我们已经提到了手动和自动（插件）消除渲染阻塞资源的过程。如果您想优化网站性能的各个方面，可以手动操作。但如果您想尽量减少麻烦并立即获得更好的PageSpeed得分，请尝试我们提到的插件。

我们已经在几个网站上实际见证了一些惊人的性能得分。现在，轮到您以最少的技术知识进一步优化您的网站，并提供出色的网站体验了。

您也可以探索一些技巧，以使您的网站速度更快。

如何消除WordPress中的渲染阻塞资源 [插件或手动方式]

阻塞渲染资源

阻塞渲染资源的类型