识别和减少负责阻止网页呈现的资源是一个关键的优化点，可以决定您的页面速度。

它非常重要，因此可以为您网站的页面体验指标（以及您的用户满意度）带来红利。

2021 年，完全渲染移动网页所需的平均时间为22 秒。2018年是15秒。

显然，这比 Google 建议的 2-3 秒时间要高得多。它也比以前高得多。

什么可能导致渲染阻塞资源出现这些问题？

是什么推动了整体页面渲染速度的提高？

需要注意的一个有趣趋势是，与系统字体相比，对第三方字体的依赖程度越来越高。使用第三方字体作为资源往往会干扰页面的处理和呈现。

使用系统字体，浏览器不必加载任何额外的东西，因此它没有额外的处理步骤。

这种跨行业的依赖可能会影响渲染时间。当然，这不是渲染阻塞资源问题的唯一原因。

此外，谷歌自己的服务往往会对渲染时间产生重大影响，例如谷歌分析或使用第三方 Facebook 像素进行跟踪。

从营销的角度来看，依赖这些技术的愿望并不一定是可怕的。

但是，从渲染阻塞资源的角度来看，它可能会导致页面加载时间以及 Google（和用户）如何看待您的页面的显着增加。

理想的解决方案是确保您的页面尽快加载以进行用户交互。

这也有可能归咎于当今 Web 开发人员使用的糟糕的 Web 开发实践。

无论哪种方式，这在每个网站项目中都应该作为核心 Web Vitals 审核的一部分加以解决。

然而，页面体验不仅仅与整个页面的加载速度有关。

相反，它更多地是关于由 Google 的页面体验框架或 Core Web Vitals 衡量的页面的整体体验。

这就是为什么您要致力于改进和优化整个DOM或文档对象模型的关键渲染路径的页面速度。

什么是关键渲染路径？

关键渲染路径是指渲染整个页面所采取的所有步骤，从浏览器第一次开始接收数据到最终在最终渲染时编译页面。

如果优化得当，这个过程可能只需要几毫秒。

针对关键渲染路径进行优化意味着确保您针对许多不同设备上的渲染性能进行了优化。

这是通过优化关键渲染路径以尽可能快地完成您的第一次绘制来实现的。

基本上，您正在减少用户查看空白屏幕以尽快显示视觉内容的时间（参见下面的 0.0 秒）。

Google 的开发人员指南文档中概述了如何执行此操作的整个过程，但我将重点关注一个特别重要的问题：减少渲染阻塞资源。

关键渲染路径如何工作？

关键渲染路径是指浏览器在渲染页面过程中所采取的一系列步骤，将HTML、CSS 和JavaScript转换为屏幕上的实际像素。

本质上，浏览器需要请求、接收和解析所有 HTML 和 CSS 文件（加上一些额外的工作），然后它才会开始呈现任何视觉内容。

这个过程发生在几分之一秒内（在大多数情况下）。在浏览器完成这些步骤之前，用户将看到一个空白页面。

以下是用户如何根据页面加载过程的不同阶段体验页面加载方式的示例：

因此，改进关键渲染路径可以改善整体页面体验，这有助于提高 Core Web Vitals 指标的性能。

如何优化关键渲染路径？

为了改进关键渲染路径，您必须分析您的渲染阻塞资源。

任何阻止渲染的资源最终都可能在页面的初始渲染中被阻止，从而对您的 Core Web Vitals 分数产生负面影响。

这涉及以下优化过程：

• 减少对渲染路径至关重要的资源数量。这可以通过对任何可能的渲染阻塞资源使用 defer 方法来完成。
• 优先考虑首屏内容，并尽可能早地下载重要的媒体资产。
• 压缩任何剩余关键资源的文件大小。

通过这样做，可以改善 Core Web Vitals 以及您的页面在物理上呈现给用户的方式。

我为什么要在乎？

谷歌的用户行为数据报告说，大多数用户会在大约 3 秒后放弃慢​​速网站。

除了表明减少页面加载时间和改善页面体验可以提高用户满意度的研究之外，您还需要准备好几项重大的 Google 更新。

当这些更新出现时，识别和优化渲染阻塞资源对于保持领先地位至关重要。

谷歌将在 2022 年在桌面上实现页面体验，从 2 月开始推出桌面页面体验，并在 3 月完成。

据谷歌称，相同的三个核心网络生命指标（LCP、FID 和 CLS）及其相关阈值现在将与桌面排名相关联。

此外，谷歌正在研究一个全新的可能是实验性的 Core Web Vitals 指标，考虑到最大事件持续时间和总事件持续时间。

他们对他们正在考虑的这些因素的解释是：

最大事件持续时间： 交互延迟等于交互组中任何事件的最大单个事件持续时间。
总事件持续时间：交互延迟是所有事件持续时间的总和，忽略任何重叠。

许多研究将页面加载时间的减少与有价值的 KPI（转换、跳出率、站点停留时间）的改进联系起来，因此改善站点延迟已成为许多组织的首要业务目标。

SEO 专业人员在指导这项工作方面处于独特的地位，因为我们的角色通常是弥合业务目标和 Web 开发人员优先事项之间的差距。

能够审核站点、分析结果并确定需要改进的领域有助于我们与开发人员合作以提高性能并将结果转化为关键利益相关者。

优化渲染阻塞资源的目标

优化关键渲染路径的主要目标之一是确保尽可能快地加载渲染重要的首屏内容所需的资源。

任何阻碍渲染的资源都必须被取消优先级，并且任何阻止页面快速渲染的资源都必须被取消优先级。

每个优化点都将有助于您的页面速度、页面体验和 Core Web Vitals 分数的整体提升。

为什么要改进渲染阻止 CSS？

谷歌多次表示，编码对于排名不一定很重要。

但是，出于同样的原因，从页面速度优化改进中获得排名优势可能会有所帮助，具体取决于查询。

当涉及到 CSS 文件时，它们被认为是渲染阻塞资源。

为什么是这样？

即使它发生在一毫秒或更短的时间内（在大多数情况下），浏览器也不会开始呈现任何页面内容，直到它能够请求、接收和处理所有 CSS 样式。

如果浏览器呈现样式不正确的内容，您将得到的只是一堆普通文本和甚至没有样式的链接。

这意味着您的页面由于缺乏更好的术语而基本上是“裸露的”。

删除 CSS 样式将导致页面实际上无法使用。

大多数内容都需要重新绘制，以使用户看起来最不喜欢。

如果我们检查页面渲染过程，下面的灰色框表示浏览器获取所有 CSS 资源所需的时间。这样，它就可以开始构建 CSS 的 DOM（或 CCSOM 树）。

这可能需要一毫秒到几秒的时间，具体取决于您的服务器需要做什么才能加载这些资源。

它也可能会有所不同，这可能取决于这些 CSS 文件的大小和数量。

下面的渲染树显示了一个浏览器在 DOM 中渲染所有文件以及 CSS 的示例：

另外，下面是一个页面的渲染顺序的例子，所有的文件在一个进程中加载​​，从DOM的构建到页面的最终绘制和合成，也就是所谓的关键渲染路径.

因为默认情况下 CSS 是一种阻止渲染的资源，所以将 CSS 改进到对页面渲染过程没有任何负面影响的程度是有意义的。

谷歌官方推荐声明如下：

“CSS 是一种渲染阻塞资源。尽快将其提供给客户，以优化首次渲染的时间。”

HTML 必须转换成浏览器可以使用的东西：DOM。CSS 文件也是如此。这必须转换为 CSSOM。

通过优化 DOM 和 CSSOM 中的 CSS 文件，您可以帮助减少浏览器渲染所有内容所需的时间，这极大地有助于增强页面体验。

为什么要改进渲染阻止 JavaScript？

您是否知道并不总是需要加载 JavaScript？

使用 JavaScript，下载和解析所有 JavaScript 资源并不是完全呈现页面的必要步骤。

所以，这并不是页面渲染的技术要求部分。

但是，需要注意的是：大多数现代网站的编码方式都需要 JavaScript（例如 Bootstrap JS 框架）才能呈现首屏体验。

但是，如果浏览器在第一次渲染页面之前发现了 JavaScript 文件，则可以停止渲染过程，直到稍后和 JavaScript 文件完全执行之后。

这可以通过推迟 JavaScript 文件供以后使用来指定。

一个例子是，如果有 JS 函数，比如 HTML 中内置的警报。这可能会在执行此 JavaScript 代码之前停止页面呈现。

JavaScript 拥有修改 HTML 和 CSS 样式的唯一能力，所以这是有道理的。

JavaScript 的解析和执行可能会延迟，因为 JavaScript 可能会更改整个页面内容。默认情况下，这种延迟是内置在浏览器中的——仅适用于这种“以防万一”的情况。

谷歌官方推荐：

“JavaScript 还可以阻止 DOM 构建并在页面呈现时延迟。为了提供最佳性能……从关键渲染路径中消除任何不必要的 JavaScript。”

如何识别渲染阻塞资源

识别关键渲染路径并分析关键资源：

• 使用webpagetest.org运行测试并单击“瀑布”图像。
• 关注绿色“开始渲染”行之前请求和下载的所有资源。

分析您的瀑布视图；查找在绿色“开始渲染”行之前请求但对于加载首屏内容并不重要的 CSS 或 JavaScript 文件。

在识别出（可能）阻止渲染的资源后，测试将其删除以查看首屏内容是否受到影响。

在我的示例中，我注意到一些可能很关键的 JavaScript 请求。

尽管它们很重要，但有时测试删除这些脚本以测试站点上的移动元素如何影响体验是一个好主意。

还有其他方法可以改善这些资源。

对于非关键 JavaScript 文件，您可能需要考虑合并文件并通过在页面底部包含这些文件来延迟它们。

对于非关键的 CSS 文件，您还可以通过将它们合并到一个文件中并压缩它们来减少您拥有的 CSS 文件的数量。

改进编码技术还可以使文件下载速度更快，并且对页面呈现速度的影响更小。

减少页面上渲染阻塞元素的方法

一旦您确定渲染阻塞资源对于在首屏上渲染内容并不重要，您将需要探索无数可用的方法来改进页面的渲染并延迟非关键资源。

这个问题有很多解决方案，从延迟 JavaScript 和 CSS 文件到减少 CSS 可能产生的影响。

一种可能的解决方案是不使用 @import 规则添加 CSS。

确保不要使用 @Import 规则添加 CSS

从性能的角度来看，即使 @import 看起来可以让您的 HTML 文件更干净，它实际上也会产生性能问题。

@import 声明实际上会导致浏览器更慢地处理 CSS 文件。为什么？因为它也在下载所有导入的文件。

渲染将被完全阻止，直到该过程完成。

实际上，最好的解决方案是使用标准方法，在 HTML 中使用 <link rel=”stylesheet”> 声明来包含 CSS 样式表。

缩小 CSS 和 JavaScript 文件

如果您使用 WordPress，使用插件来缩小您的 CSS 和 JavaScript 文件可能会产生巨大的影响。

缩小过程会占用文件中所有不必要的空间并进一步压缩它，因此您最终可以获得不错的性能提升。

此外，即使您不在 WordPress 上，您也可以使用合格开发人员的服务来手动完成该过程。

这将花费更多时间，但非常值得。

缩小的文件通常比以前的文件轻得多，这意味着初始渲染将更快地完成。

除此之外，在缩小过程之后，您还可以期望下载过程更快，因为下载非渲染阻塞资源所需的时间更少。

使用系统字体而不是第三方字体

虽然第三方字体可能看起来使网站“更漂亮”，但事实并非如此。

虽然表面上看起来很神奇，但这些第三方字体文件通常需要更长的时间才能加载，并且可能会导致渲染阻塞资源问题。

由于存在外部文件，浏览器必须发出外部请求才能下载这些文件以呈现您的页面，这可能会导致下载时间显着增加。

如果您所在的团队没有理想的开发最佳实践，那么您可能有许多第三方字体文件对于呈现您的网站不是必需的。

在这种情况下，删除所有这些不必要的文件可以显着改善您的渲染阻塞资源，并有助于您在 Core Web Vitals 中的整体改进。

另一方面，使用系统字体仅在浏览器内进行处理，无需外部请求。

此外，还有可能与您使用的第三方字体非常相似的系统字体。

改进您的编码技术和组合文件

如果您自己使用代码，您可能（也可能不会……没有人在这里评判）发现技术不是最优的。

一个例子：你在任何地方都使用内联 CSS，这会导致浏览器中的处理和呈现故障。

简单的解决方案是确保您采用所有内联 CSS 并在 CSS 样式表文件中正确编码它们。

如果其他开发人员的代码不符合标准，这可能会导致页面呈现出现重大问题。

例如：假设您有一个使用旧技术而不是现代和精简技术编码的页面。

较旧的技术可能包括严重的代码膨胀，从而导致页面呈现速度变慢。

为了消除这种情况，您可以通过创建更精简、更少臃肿的代码来改进您的编码技术，从而获得更好的页面呈现体验。

合并文件也可以改善这种情况。

例如：如果您有 8 个或 10 个 JavaScript 文件都参与同一个任务，您可以聘请开发人员的服务，然后他可以为您组合所有这些文件。

而且，如果它们是不太重要的 JavaScript 文件，那么为了进一步减少页面呈现问题，还可以通过将这些文件添加到页面上 HTML 代码的末尾来延迟这些文件。

通过组合文件和改进您的编码技术，您可以为更好的页面呈现体验做出重大贡献。

关键要点

一段时间以来，寻找减少渲染阻塞资源的解决方案一直是 SEO 审计的主要内容。这很重要，有几个原因：

通过减少渲染阻塞资源，您可以让您的网站更快。您还可以对您的网站进行反向工程，以利用将在 Google 的整体页面体验更新中发挥作用的元素。

您还可以利用 Google 的 Core Web Vitals 指标带来的提升。

Core Web Vitals 不会消失。它们已成为一个关键的优化点，以便在您当前的框架内实现最快的潜在渲染时间。

随着未来引入新的 Core Web Vitals 指标，确保您了解现有指标的最新情况始终是一个好主意。

查找和修复渲染阻止资源还可以确保您继续让您的网站访问者满意，并确保它在黄金时段始终处于最佳状态。