WordPress速度高级优化，优化重要的渲染路径，提升网站打开速度

关键呈现路径过程是浏览器首先在屏幕上呈现页面的任务序列，即，下载，处理和转换HTML，CSS和JavaScript代码为实际像素，并将其绘制在屏幕上。

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

这个过程中的大部分都与页面的可见部分有关，而不需要向下滚动浏览器窗口。这部分也被称为“折叠之上”。为了更好的可用性，ATF应该尽可能的被渲染，这样做可以减少网络往返次数。渲染ATF所需的资源被认为是关键的，并且优化“折叠之上”意味着最小化关键资源对首次渲染页面的时间的影响。

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

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

关键的渲染路径序列

以下是浏览器执行的一系列步骤：

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

DOM

在Google的“ 关键呈现路径优化”指南中也进行了解释，浏览器按照四个步骤构建文档对象模型：

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

这里需要注意的是浏览器增量地构建DOM。这使我们有机会通过创建高效的DOM结构来加速页面的呈现。

CSSOM

解析器遇到link引用外部CSS样式表的标记时，会阻止解析并发出对此资源的请求。一旦收到CSS文件，浏览器就开始建立一个CSS节点的树型数据结构。

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

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

渲染树

浏览器将DOM和CSSOM合并到Render Tree中，Render Tree是包含所有节点和属性的最终树结构，这些节点和属性用于将页面呈现在屏幕上。

渲染树只包含渲染页面所需的节点。结果，不可见节点被省略。

浏览器使用“渲染树”来计算节点的尺寸和位置，最终作为绘制过程的输入。

布局和绘画

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

关键的渲染路径优化

运行整个过程所需的时间可以变化。这取决于许多因素，如文档大小，请求数量，应用的样式，用户设备等。
谷歌的一个最相关的建议是优先考虑可见内容，以尽可能快地渲染“折叠之上”，提供了两条主要规则：

• 构建HTML以首先加载关键的，高于折叠的内容
• 减少HTML，CSS和JS资源使用的数据量

在Google的PageSpeed指南中也有解释，如果呈现ATF所需的数据量超过了初始拥塞窗口（14.6kb），则需要在服务器和浏览器之间进行额外的网络往返。在具有高延迟的移动网络上，这将显着延迟页面加载（阅读更多延迟）。
浏览器增量地构建DOM，这使我们有机会通过构建HTML来减少呈现ATF所需的时间，从而首先加载上面的折叠并推迟页面的其余部分。

但是，优化并没有结束于构建有效的DOM结构。相反，这是一个涉及整个关键渲染路径序列的改进和度量过程。
让我们深潜吧。

最小化资源维度

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

• 缩小是从源代码中删除不必要的字符，如评论和空白的过程。这些字符在开发中非常有用，但是为了呈现页面，它们对于浏览器来说是无用的。
• 压缩是Web服务器和客户端减小传输文件的大小以提高速度和带宽利用率的能力
• 缓存：每个浏览器都带有一个HTTP缓存的实现。我们需要做的是确保每个服务器响应提供正确的HTTP头来指示浏览器何时以及多长时间缓存所请求的资源

优化CSS

现在我们知道，浏览器必须等到获取并处理CSS代码才能呈现页面（CSS呈现阻止）。但并不是所有的CSS资源都是渲染阻塞的。
CSS可以限定为特定的条件，我们可以使用媒体类型和媒体查询来优化它。如果您正在屏幕上查看网页，则浏览器将发送打印介质类型的请求，但不会阻止此资源页面的呈现。
拿下面的link标签：

<link rel="stylesheet" href="style.css" />

这个标签的引用样式表适用于任何条件下，与当前媒体类型，屏幕分辨率，设备方向等无关。这意味着CSS资源始终是呈现屏蔽的。
幸运的是，我们可以在特定条件下发送CSS资源的请求。我们可以将打印样式移动到一个单独的文件中，并使用该media属性告诉浏览器在打印页面时应该只加载指定的样式表，并且不需要屏蔽在屏幕上的渲染：

<link rel="stylesheet" href="print.css" media="print" />

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

<link rel="stylesheet" href="style.css" media="screen" />
<link rel="stylesheet" href="portrait.css" media="orientation:portrait" />
<link rel="stylesheet" href="widescreen.css" media="(min-width: 42rem)" />

确保您的样式实际上是呈现页面所需的。如果不是，则可以向媒体标记属性添加适当的值，并取消屏蔽呈现。

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

• 缩小CSS：空白和注释只能帮助我们阅读CSS声明。通过从样式表中删除注释和空白，我们可以显着减少CSS文件的字节数
• 合并多个CSS文件：这将减少HTTP请求的数量。对于性能受高延迟影响的移动连接，此操作尤其重要（有关延迟的详细信息，请参阅此部分）。
• 内联关键CSS：从某种意义上说，某些样式是至关重要的，因为它们需要呈现页面的上方折叠。您应该始终将内联重要样式直接考虑到HTML标记中，以避免额外的HTTP请求。但避免内联大型CSS文件，因为这可能需要额外的往返才能呈现上面的折叠，这将导致PageSpeed警告。

加快布局和绘制过程

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

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

计算元素的大小和位置需要时间并降低性能。尽可能简化DOM，并避免使用JavaScript来预测布局过程，这将有助于浏览器加快页面渲染的速度（详细了解布局优化）。

严格连接到布局的是“绘制”过程，这可能是“临界渲染路径”序列中最耗时的阶段，因为无论何时您更改元素的布局或任何非几何属性，浏览器都会触发一个绘制事件。在这个阶段尽可能简单的事情可以帮助浏览器加快绘画过程。例如，box-shadow需要某种计算的属性花费比固体边框颜色更长的时间。

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

使JavaScript解冻

当浏览器遇到脚本标记时，必须停止解析HTML代码。内联脚本在文档中的确切位置执行，并阻止DOM构造，直到JS引擎完成运行。换句话说，内联JavaScript可以显着延迟页面的初始渲染。但是JavaScript也允许操作CSS属性，因此浏览器必须暂停脚本执行，直到它完成下载并构建CSSOM为止。这意味着JavaScript是解析器阻塞。
在外部JS文件的情况下，解析器还必须等待，直到从缓存或远程服务器获取资源，这可能会大大减慢首次呈现页面的时间。
这就是说，我们可以做些什么来尽量减少浏览器加载和执行JavaScript的时间？

• 异步加载JavaScript：标记的布尔async属性script指示浏览器异步执行脚本（如果可能的话），而不阻止DOM构造。浏览器发送脚本的HTTP请求，并继续解析DOM。而且，脚本不会阻止CSSOM构造，这意味着它不会阻塞关键呈现路径（有关脚本标记属性的更多信息，请参阅MDN文档）
• 推迟JavaScript：标签的布尔defer属性script告诉浏览器在解析文档之后，但在触发DOMContentLoaded事件之前执行脚本。如果src属性不存在，则不能使用该属性，即内联脚本（更多地阅读Mozilla Hacks）
• 推迟内联JavaScript：许多脚本不操作DOM或CSSOM，所以没有理由阻止解析。不幸的是，我们不能使用async和defer用于内嵌脚本属性，因此该文件已经装在它们移动至底部后，只有这样，才能加载它们。优点是内联脚本不需要额外的HTTP请求。但是，内联几个页面中使用的脚本会导致代码冗余。

包装优化规则

这是很多东西，不是吗？让我们喘口气，并写下迄今为止描述的优化行动的清单。

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

现在我们知道了关键渲染路径优化的基本概念，我们可以看看一些WordPress流行优化插件。

在WordPress中优化关键呈现路径

WordPress用户可以利用几乎涵盖优化过程的各个方面的插件。您可以安装全功能插件，也可以一次安装多个插件，每个都提供特定的优化功能。

如果您的网站由Kinsta托管，则不需要缓存插件，因为Kinsta不需要WordPress缓存插件。

W3总缓存

这个插件几乎涵盖了关键渲染路径优化过程的每个阶段。乍看之下，插件配置可能会让人难以置信，但是一旦您对“关键渲染路径”序列更熟悉，您将能够利用强大的性能工具集。

这是一些插件功能列表：

• HTML（帖子和页面），CSS和JavaScript缓存在内存，磁盘或CDN上
• 供稿，搜索结果，数据库对象，WordPress对象和片段的缓存
• HTML（帖子和页面）缩小
• JavaScript和CSS缩小
• 使用async和优化JavaScriptdefer
• 使用缓存控制的浏览器缓存，未来的过期头和实体标签
• HTTP（gzip）压缩
• WordPress的仪表板上的Google PageSpeed结果

这些只是很多W3TC功能中的一小部分。你可以阅读更多关于WordPress.org 插件的页面。

WP超级缓存

WP超级缓存是另一个流行的网站性能插件。

它具有许多优化功能，但不如以前的W3 Total Cache全面，而且对新手和中级用户来说可能更为实惠。

基本上，它提供了缓存功能和HTTP压缩，但缺乏资源的缩小和使用JavaScript优化async和defer属性。但是，超过一百万的主动安装证明这个插件是值得一试的。

Autoptimize

通过超过400,000个主动安装，Autoptimize是最流行的免费插件之一。

它带有一个选项页面，分为几个部分，网站管理员可以分别配置HTML，CSS和JavaScript缩小。

您还可以聚合独立的脚本或样式表，并为特定资源设置例外。此外，Autoptimize允许在磁盘或CDN上缓存缩小的资源，并将优化的资产保存为静态文件。

以上折叠优化

这个插件为折叠优化提供了一个全面的工具集。这是专业人士和高级用户在Google PageSpeed测试中得分为100/100的工具。

以下是一些最有趣的功能：

关键的CSS工具：

• 有条件的CSS加载
• 关键的CSS管理通过文本编辑器
• Gulp.js关键CSS的创造者
• 关键的CSS质量测试

CSS加载优化：

• 异步加载CSS
• 从HTML中提取CSS
• 外部样式表缓存

JS负载优化：

• 异步JS加载
• localStorage 高速缓存
• 延迟加载JavaScript
• 外部脚本缓存

此外，该插件还为Google的Progressive Web App和Google Web Font优化提供支持。其他优化插件，你可能想尝试：

• 缩小HTML标记
• WP Super Minify
• 快速速度降低
• JCH优化

迅速的表现

Swift Performance是另一个你可能想要查看的插件。这是一个高级插件，可以帮助提高您的成绩，并且是专门为帮助您尝试实现100/100 Google PageSpeed Insights  分数而开发的。

它的一些主要功能包括：

• 您不仅可以缩小和组合CSS和JavaScript文件，还可以为您的页面创建关键的CSS。
• 智能缓存，以及AJAX和动态请求。
• 内置无损图像压缩。
• CDN支持。

您将在如何消除渲染拦截JavaScript和CSS的 WordPress优化插件中找到更深入的视图

关键渲染路径优化是一个改进和度量的过程，需要对浏览器执行的每个任务都有清晰的了解，以便将代码转换为像素，从而在屏幕上呈现页面。您可以在Google的优化指南中了解有关“关键呈现路径”的更多信息。