关键渲染路径：它是什么以及如何优化它

当我们谈论为用户提供超快的网络体验时，我们通常只关注我们作为网站所有者和网络开发人员应该做的事情。

但事实是：

提供快速的 Web 体验还需要浏览器做大量工作。

它接收我们的 HTML、CSS 和 JavaScript 文件，并采取特定步骤将它们转换为屏幕上的像素。

提高性能的秘诀在于了解接收资源和将资源转化为渲染像素的处理过程之间发生的情况。

此过程也称为关键渲染路径 (CRP) 。

在本文中，您将了解有关 CRP 的所有信息，以及如何优化它以加快渲染速度。

• 什么是关键渲染路径？
• 关键渲染路径序列解释
• 如何优化您网站的关键呈现路径
• 3个WordPress插件来优化你的CRP
• CRP 优化清单

让我们开始！

什么是关键渲染路径？

关键呈现路径是指网络浏览器将 HTML、CSS 和 JavaScript 代码转换为用户屏幕上的可视化表示所采取的一系列步骤。

它涉及一系列过程，例如构建文档对象模型（DOM），生成CSS对象模型（CSSOM），并将两者结合起来创建渲染树。 然后渲染树用于计算布局并在用户屏幕上绘制像素。

另一方面，关键渲染路径优化是指减少 Web 浏览器执行序列的每个步骤所花费的时间，同时优先考虑与用户当前操作相关的内容。

为确保您的优化工作一针见血，您需要深入了解序列的每个步骤。 所以接下来的几段是必不可少的，我们强烈建议在采取行动之前先阅读它们。

关键渲染路径序列解释

以下是浏览器在呈现页面时执行的步骤的快速概述：

1. 浏览器下载并解析 HTML 标记并创建 DOM。
2. 接下来，它下载并处理 CSS 标记并构建 CSS 对象模型 (CSSOM)。
3. 然后，它结合来自 DOM 和 CSSOM 的必要节点来创建渲染树，这是渲染页面所需的所有可见节点的树结构。
4. 它通过布局过程计算页面上每个元素的尺寸和位置。
5. 最后，浏览器在屏幕上绘制像素。

现在让我们专注于每一步。

DOM

文档对象模型 (DOM) 是浏览器对 HTML 文档的内部表示。

加载网页时，浏览器会解析 HTML 并创建一个树状节点结构来表示文档中的元素。 每个节点对应一个 HTML 元素，并具有描述其属性、内容和在树中位置的属性。

重要提示：浏览器逐渐构建 DOM，使我们能够通过构建高效的结构并避免过大的 DOM 大小来优化页面的呈现。

CSSOM

DOM 包含页面的所有内容，而 CSSOM 包含有关如何设置 DOM 样式的所有信息。

DOM 和 CSSOM 的另一个区别是：

DOM 构建是渐进的，而 CSSOM 则不是。

加载网站时，浏览器必须处理 CSS 以应用样式。 与可以一点一点处理的 HTML 不同，CSS 需要一次处理所有内容。 这是因为某些样式可能会在 CSS 文件中被其他样式覆盖，因此浏览器需要等到它读取了整个 CSS 文件后再决定应用哪些样式。

这样做是为了避免显示稍后将被覆盖的样式和浪费资源。

简单的说：

浏览器会阻塞渲染过程，直到它接收并解析所有 CSS。

这就是为什么 CSS 被认为是渲染阻塞资源的原因。

渲染树

渲染树是浏览器用来创建网页视觉表示的 DOM 和 CSSOM 的组合。

浏览器使用渲染树计算节点尺寸和位置作为绘画过程的输入。

重要提示：渲染树中仅捕获可见内容。 通常，头部部分不包含可见信息，因此被排除在外。 此外，如果元素具有display: none属性，则该元素及其后代都不会包含在渲染树中。

布局

渲染树构建完成后，接下来就是布局了。 布局通过定义每个元素的尺寸、位置和相互关系来确定页面上每个元素的放置和方向。

但事情是这样的：

布局性能受 DOM 的影响。

换句话说：

DOM 节点数越多，布局过程越长。

画

最后阶段是在创建渲染树和布局之后将像素绘制到屏幕上。

最初，整个屏幕在加载过程中被绘制。 随后，仅重绘屏幕受影响的部分，因为浏览器被设计为仅重绘必要的区域。

请记住，绘制阶段的持续时间取决于在渲染树上实施的更新的性质。

现在让我们看看您可以应用哪些优化来帮助浏览器并加快某些进程。

如何优化您网站的关键渲染路径

浏览器运行整个过程所需的时间可能会有所不同。 有很多运动部件会影响关键路径长度：

• 文档尺寸
• 请求数
• 用户设备
• 应用样式

然而，在 CRP 优化方面，有三种技术被认为是首选：

1. 通过推迟非关键资源或完全消除它们来最大限度地减少关键资源的数量
2. 优化所需的请求数以及每个请求的文件大小
3. 优先下载关键资产，从而缩短关键路径长度

让我们更深入地了解如何实施每个推荐的优化策略：

优化渲染阻塞的 CSS 和 JS 资源

你已经知道，当浏览器遇到阻塞渲染的 CSS 和 JS 资源时，它必须先下载、解析和执行它们，然后再做任何其他事情，包括渲染。

在优化 CSS 方面，您可以实施以下技术：

• 关键 CSS。 它识别呈现网页可见部分所需的最小 CSS 规则集，并将它们作为内联 CSS 提供给浏览器，而不是加载完整的样式表。 通过只为首屏内容加载必要的 CSS，浏览器可以更快地呈现页面并改善用户体验。 这是因为浏览器不必在呈现页面之前等待整个样式表加载完毕。
  
• 合并 CSS 文件。 CSS 连接是将多个 CSS 文件组合成一个文件的过程。 这种技术通过减少加载网页所需的 HTTP 请求数来提高性能，因为浏览器只需要下载和解析单个 CSS 文件而不是多个文件。

就您的 JavaScript 文件而言，您可以执行以下操作：

• 延迟 JS 加载。 延迟 JS 加载是一种通过延迟加载 JavaScript 文件直到加载和解析 HTML 文档之后来加速您的站点的技术。 您可以在引用 JS 文件的脚本标签上使用defer属性。 需要注意的是，defer 属性应该只用于不需要在加载时立即执行的 JS 文件（例如，只在特定页面上使用的文件），因为如果有多个延迟脚本，执行顺序可能无法预测被使用。
  
• 异步加载 JS。 某些 JS 文件可能需要使用 async 属性，该属性允许文件与 HTML 文档的解析异步加载和执行。

您可以对 CSS 和 JavaScript 应用一些优化：

• 缩小。 缩小涉及从 CSS 和 JavaScript 文件中删除不必要的字符，例如空格、注释和换行符。 此过程可以显着减小文件的大小，而不影响其功能或外观。
  
• 删除未使用的 CSS 和 JS。 未使用的 CSS 和 JS 指的是特定页面上未使用但仍在加载的特定规则。 删除文件的这些部分将直接影响浏览器构建渲染树的速度。

在自动驾驶仪上优化您的渲染阻塞资源。 安装 NitroPack →

减小文件的大小

为了减少浏览器需要下载的数据量，我们可以采用 HTML、CSS 和 JavaScript 资源的缩小、压缩和缓存等技术。

您已经知道缩小意味着什么，所以让我们关注其他两个：

• 压缩。 压缩是一种应用算法以使用比原始文件更少的位数来重写文件的二进制代码的技术。 因此，您的文件的大小要小得多，从而减少了页面加载时间和带宽使用。
  
• 缓存。 缓存利用每个浏览器中实现的 HTTP 缓存。 为确保有效缓存，我们必须确保每个服务器响应都提供正确的 HTTP 标头，指示浏览器应在何时缓存请求的资源以及缓存多长时间。

依靠最先进的缓存机制。 立即获取 NitroPack →

优先下载关键资产

通常，浏览器非常擅长确定最重要资源的优先级并首先获取它们。 但是，在某些情况下，您可以通过手动确定最关键资源的优先级来帮助他们更快地加载您的网站。

您可以使用资源提示来告诉浏览器如何处理特定的资源或网页。

以下是三个主要的：

• 链接 rel=预取。 Prefetch 是一种低优先级的资源提示，它允许浏览器获取稍后可能需要的资源并将它们存储在浏览器的缓存中。

• 链接 rel=预连接。 preconnect 指令帮助浏览器在向服务器发送初始请求之前建立早期连接。

• 链接 rel=预加载。 预加载用于强制浏览器在浏览器发现资源之前下载资源，因为它对页面至关重要。

重要提示：预取和预连接是资源提示，它们会在浏览器认为合适的情况下执行。 预加载指令是浏览器强制执行的命令。 详细了解如何实施资源提示。

现在您知道如何处理关键渲染路径优化，让我们看看一些可以自动执行该过程的 WordPress 插件。

3个WordPress插件来优化关键渲染路径

所有上述优化都可以手动完成。 但是，其中一些需要技术知识以确保您不会在此过程中破坏您的网站。

对于所有 WordPress 用户来说幸运的是，有一些插件可以帮助优化 CRP。 在我们看来，让我们来看看前 3 名候选人：

NitroPack - 多合一解决方案

NitroPack 是领先的多合一网站速度优化解决方案，结合了超过 35 种网络性能功能。 在优化关键渲染路径时，NitroPack 会自动处理优化，例如：

• 关键 CSS
• CSS 和 JS 缩小
• CSS 和 JS 压缩
• 缓存
• 延迟 JS 加载
• 删除未使用的 CSS 和 JS

但优化功能并不止于此。 您还将获得完整的性能工具包：

• 内置CDN
• 完整的图像优化堆栈
• 字体优化
• 电子商务购物车缓存
• 24/7 支持

自动加速您的网站。 立即获取 NitroPack →

WP Super Cache - 仅缓存插件

WP Super Cache 是一个缓存插件，主要提供缓存功能和 HTTP 压缩，但在资源压缩和使用异步和延迟属性优化 JavaScript 方面存在不足。

最显着的特点包括：

• 为所有访问者启用缓存
• 禁用登录访问者的缓存
• 压缩页面以便更快地为访问者提供服务
• 缓存重建

快速性能

Swift Performance 是另一个插件，您可能会发现它对您追求优化的 CRP 很有用。 它的一些功能包括：

• 缩小 CSS 和 JavaScript 文件
• 关键 CSS
• 缓存
• 图片优化

优化关键渲染路径 [清单]

我们在本文中涵盖了很多基础知识，因此这里有一个方便的清单，列出了我们提到的所有优化：

• 生成关键 CSS
• 合并 CSS 文件
• 延迟 JavaScript 加载
• 异步加载 JavaScript
• 缩小 CSS 和 JavaScript
• 压缩 CSS 和 JavaScript
• 删除未使用的 CSS 和 JavaScript
• 应用缩小
• 应用压缩
• 使用缓存
• 实现链接 rel=preload
• 实现链接 rel=prefetch
• 实现链接 rel=preconnect

下载 CRP 优化清单 →

最后但同样重要的是——不要忘记在每次优化前后进行测试！