如何优化WordPress网站的关键渲染路径__wordpress教程

关键渲染路径是浏览器首先在屏幕上渲染页面所执行的一系列任务，即下载、处理并将HTML、CSS和JavaScript代码转换为实际像素并将它们绘制在屏幕上。

关键渲染路径优化是最小化浏览器执行序列的每个步骤所花费的时间的过程，优先显示与当前用户操作相关的内容。

此过程的大部分与无需向下滚动浏览器窗口即可看到的页面部分有关。该部分也称为“折叠上方（Above the Fold）”。为了更好的可用性，应该尽快渲染ATF，这可以通过至少减少网络往返次数来实现。渲染ATF所需的资源被认为是关键的，优化Above the Fold意味着将关键资源对首页渲染时间的影响降至最低。

在这篇文章中，我们将介绍关键渲染路径优化序列。

首先，我将概述浏览器呈现页面内容的任务。
接下来，我将剖析我们可以执行的最相关的操作来优化关键渲染路径。
最后，我将列出一些有用（且流行）的WordPress优化插件。

关键渲染路径序列

以下是浏览器为呈现页面而执行的一系列步骤：

首先，浏览器下载并解析HTML标记并构建DOM
然后它下载并处理CSS标记并构建CSS对象模型
它在渲染树中结合了渲染页面所需的DOM和CSSOM节点，渲染树是所有可见节点的树形结构
它计算页面上每个对象的尺寸和位置
最后，它在屏幕上绘制像素

DOM

正如Google的关键渲染路径优化指南中所解释的那样，浏览器按四步顺序构建文档对象模型：

首先，浏览器读取行字节并将它们转换为单个字符。
然后它将尖括号内的字符串转换为标记。
这些标记被转换为节点对象。
节点对象以树状数据结构链接，其中包含HTML内容、属性和节点之间的关系。这个结构就是文档对象模型。

这里需要注意的重要一点是浏览器是逐步构建DOM的。这允许我们通过创建高效的DOM结构来加速页面的渲染。

DOM结构

CSSOM

当解析器遇到一个引用外部CSS样式表的标签link时，它会阻止解析并发出对该资源的请求。收到CSS文件后，浏览器开始构建CSS节点的树形数据结构。

浏览器读取 .css 文件的行字节并将它们转换为单个字符
它将大括号内的字符串转换为标记
这些标记被转换为节点对象
节点对象以树状数据结构链接，其中包含每个节点的CSS属性以及节点之间的关系。这种结构就是CSS对象模型( CSSOM )。

与DOM构建不同，CSSOM构建不是增量的。浏览器不能使用样式表的一部分，因为样式可以在同一个样式表中进行细化和重新声明。出于这个原因，浏览器会阻塞渲染过程，直到它接收并解析所有CSS。这意味着CSS是渲染阻塞的。

CSSOM结构

渲染树

浏览器将DOM和CSSOM组合到渲染树中，最终的树结构包含用于将页面渲染到屏幕的所有节点和属性。

渲染树仅包含渲染页面所需的节点。结果，忽略了不可见的节点。

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

渲染树结构

布局和绘制

在布局阶段，浏览器计算渲染树每个节点的尺寸和位置。浏览器从根开始遍历渲染树，并在此阶段生成一个盒子模型。该信息最终用于将渲染树的每个节点转换为屏幕上的实际像素。

关键渲染路径优化

运行整个过程所需的时间是可变的。这取决于文档大小、请求数量、应用的样式、用户设备等。最相关的Google建议之一是优先考虑可见内容以尽可能快地呈现“首屏”，并提供两个主要规则跟随：

构建HTML以首先加载关键的首屏内容
减少HTML、CSS和JS资源使用的数据量

正如Google的PageSpeed指南中所解释的那样，如果渲染ATF所需的数据量超过了初始拥塞窗口 (14.6kb)，则需要在服务器和浏览器之间进行额外的网络往返。在具有高延迟的移动网络上，这将显着延迟页面加载（阅读有关延迟的更多信息）。浏览器以增量方式构建DOM，允许我们通过构建HTML以首先加载首屏并延迟页面的其余部分来减少渲染ATF所需的时间。

折叠上方的内容因用户设备而异

但是优化并不会随着构建有效的DOM结构而结束。相反，它是一个涉及整个关键渲染路径序列的改进和测量过程。

让我们深入研究。

最小化资源维度

我们可以通过压缩、压缩和缓存HTML、CSS和JavaScript资源来减少浏览器要下载的数据量：

最小化是从源代码中删除不必要的字符（如注释和空格）的过程。这些字符在开发中很有帮助，但它们对于渲染页面没有用。
压缩是Web服务器和客户端减小传输文件大小以提高速度和带宽利用率的能力
缓存：每个浏览器都带有一个HTTP缓存的实现。我们需要做的是确保每个服务器响应都提供正确的HTTP标头，以指示浏览器何时以及应缓存请求的资源多长时间

优化CSS

现在我们知道浏览器必须等到它获取并处理CSS代码才能呈现页面（CSS是render-blocking）。但并不是所有的CSS资源都是渲染阻塞的。

CSS可以限定在特定条件下，我们可以使用媒体类型和媒体查询对其进行优化。如果您在屏幕上查看网页，浏览器将发送打印媒体类型请求，但不会阻止此资源的页面呈现。获取以下link标签：

此标记的引用样式表适用于任何条件，独立于当前媒体类型、屏幕分辨率、设备方向等。这意味着CSS资源始终是渲染阻塞的。

幸运的是，我们可以在特定条件下发送对CSS资源的请求。我们可以将打印样式移动到一个单独的文件中，并使用media属性告诉浏览器指定的样式表只应在打印页面时加载，并且不需要阻塞屏幕上的呈现：

浏览器仍会下载print.css样式表，但不会阻止呈现。此外，浏览器必须为主要的CSS文件下载更少的数据，这将有助于我们加快下载速度。我们可以在link属性上指定任何媒体查询，因此我们可以将CSS拆分为多个文件并有条件地加载它们：

确保您的样式实际上是呈现页面所必需的。您可以将适当的值添加到媒体标签属性并取消阻止呈现（如果不是）。

媒体类型和查询可以帮助我们加快页面渲染，但我们可以做的更多。

最小化CSS：空白和注释只能帮助我们阅读CSS声明。通过从样式表中删除注释和空格，我们可以显着减少CSS文件的字节数。
合并多个CSS文件：这将减少HTTP请求的数量。此操作在移动连接中非常重要，其中性能受到高延迟的影响（阅读更多关于延迟的内容）。
内联关键CSS：某些样式很关键，因为它们需要呈现页面的首屏。最好始终将内联关键样式直接考虑到HTML标记中，以避免额外的HTTP请求。但是避免内联大型CSS文件，因为这可能需要额外的往返来呈现首屏，从而导致PageSpeed警告。

加快布局和渲染过程

浏览器布局文档所花费的时间取决于要布局的DOM元素的数量以及这些布局的复杂性。

如果你有很多DOM元素，浏览器可能需要很长时间来计算它们的位置和尺寸：尽可能避免布局。
更喜欢新的Flexbox模型，因为它比旧的Flexbox和浮动布局更快。
避免使用JavaScript强制同步布局。

计算元素大小和位置需要时间并降低性能。使DOM尽可能简单并避免使用JavaScript来预测布局过程将有助于浏览器加速页面呈现（阅读更多关于布局优化的内容）。

与Layout紧密相连的是Paint过程，这可能是关键渲染路径序列中最耗时的阶段。每当您更改元素或任何非几何属性的布局时，浏览器都会触发绘制事件。在这个阶段使事情尽可能简单可以帮助浏览器加快绘画过程。例如，需要计算的box-shadow属性比纯边框颜色需要更长的时间来绘制。

Chrome DevTools允许识别正在绘制的页面部分

优化页面绘制过程可能并不容易，您应该使用浏览器的开发工具来测量浏览器触发每个绘制事件所需的时间。您可以在Google的渲染性能指南中阅读有关此主题的更多信息。

使JavaScript解除阻塞

当浏览器遇到脚本标签时，它必须停止解析HTML代码。内联脚本在文档中的确切位置执行并阻止DOM构建，直到JS引擎完成运行。换句话说，内联JavaScript会显着延迟页面的初始呈现。但是JavaScript也允许操作CSS属性，因此浏览器必须暂停脚本执行，直到它完成下载和构建CSSOM。这意味着JavaScript是解析器阻塞的。

在外部JS文件的情况下，解析器还必须等到从缓存或远程服务器获取资源，这可能会大大减慢第一页渲染的时间。话虽如此，我们可以做些什么来最小化浏览器加载和执行JavaScript所花费的时间呢？

异步加载JavaScript：script标签的布尔async属性指示浏览器异步执行脚本，如果可能，不阻塞DOM构造。浏览器发送脚本的HTTP请求并继续解析DOM。此外，该脚本不会阻塞CSSOM构建，这意味着它不会阻止关键渲染路径（有关脚本标签属性的更多信息，请参阅MDN 文档）
Defer JavaScript：script标签的布尔defer属性告诉浏览器在解析文档之后、触发事件DOMContentLoaded之前执行脚本。如果src属性不存在，则不得使用此属性，即内联脚本（在Mozilla Hacks上阅读更多信息）
推迟内联 JavaScript：许多脚本不操作DOM或CSSOM，因此没有充分的理由阻塞解析。不幸的是，我们不能为内联脚本使用async和defer属性，所以在文档加载后加载它们的唯一方法是将它们移动到底部。优点是内联脚本不需要额外的HTTP请求。但是，在多个页面中使用内联脚本会导致代码冗余。

总结优化规则

这是很多东西，不是吗？让我们喘口气，写下到目前为止描述的优化操作列表。

最小化、压缩和缓存HTML、CSS和JavaScript资源。
尽量减少使用渲染阻塞资源（特别是CSS）
- 在link标签上使用媒体查询
- 拆分样式表和内联关键CSS
- 合并多个CSS 文件
尽量减少使用解析器阻塞资源 (JavaScript)
- 在脚本标签上使用defer属性
- 在脚本标签上使用async属性
- 内联JavaScript并将script标签移动到文档底部