关键渲染路径是浏览器首先在屏幕上渲染页面所执行的一系列任务，即下载、处理并将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)，则需要在服务器和浏览器之间进行额外的网络往返。在具有高延迟的移动网络上，这将显着延迟页面加载（阅读更多关于布局优化的内容）。
与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标签移动到文档底部
- 在脚本标签上使用
现在我们知道了关键渲染路径优化的基本概念，我们可以看看一些WordPress流行的优化插件。
优化WordPress中的关键渲染路径
WordPress用户可以利用几个插件，这些插件几乎涵盖了优化过程的各个方面。您可以安装一个功能齐全的插件或一次安装多个插件，每个插件都提供特定的优化功能。
W3 Total Cache
这个插件几乎涵盖了关键渲染路径优化过程的每个阶段。乍一看，插件配置可能会让人不知所措。不过，一旦您更加熟悉关键渲染路径序列，您将能够利用强大的性能工具集。
WordPress插件W3 Total Cache
以下是一些插件功能的列表：
- HTML（文章和页面）、CSS和JavaScript缓存在内存、磁盘或CDN中
- 缓存提要、搜索结果、数据库对象、WordPress对象和片段
- HTML（文章和页面）缩小
- JavaScript和CSS缩小
- 使用
async和defer进行JavaScript优化 - 使用缓存控制、未来过期标头和实体标签的浏览器缓存
- HTTP (gzip)WP Super Cache是另一个流行的网站性能插件。
WordPress插件-WP Super Cache
它具有许多优化功能，但不如以前的W3 Total Cache全面，并且对于新手和中级用户来说可能看起来更实惠。
WordPress Super Cache测试器
基本上，它提供缓存功能和HTTP压缩，但缺乏资源压缩和JavaScript优化
async以及defer属性。然而，超过一百万的活跃安装证明该插件值得一试。
WP Super Cache中的GZIP选项
Autoptimize
拥有超过1,000,000次活动安装，Autooptimize是最受欢迎的免费缩小插件之一。
WordPress插件Autoptimize
它带有一个选项页面，分为几个部分，站点管理员可以在其中分别配置HTML、CSS和JavaScript缩小。
Autoptimize-HTML优化选项
您还可以聚合独立的脚本或样式表并为特定资源设置例外。此外，Autooptimize允许在磁盘或CDN上缓存缩小的资源，并将优化的资产保存为静态文件。要为您的WordPress网站找到最佳设置，您可以这个插件为Above the Fold优化提供了一个全面的工具集。它是专业人士和高级用户在Google PageSpeed测试中获得满分的工具。
WordPress插件Above the Fold Optimization
以下是一些最有趣的功能：
关键的CSS工具：
- 条件CSS加载
- 通过文本编辑器进行关键CSS管理
- Gulp.js关键CSS创建者
- 关键CSS质量测试
CSS负载优化：
- 异步加载CSS
- 从HTML中提取CSS
- 外部样式表缓存
JS加载优化：
- 异步JS加载
localStorage缓存- 延迟加载JavaScript
- 外部脚本缓存
此外，该插件还支持Google的Progressive Web App和Google Web Font优化。下面几个优化插件，您也可以尝试一下：
Swift Performance
Swift Performance是您可能想要查看的另一个插件。这个高级插件可以帮助提高您的性能分数，并且专门开发用于帮助您尝试并实现Google的优化指南中了解有关关键渲染路径的更多信息。
下面文章清单涵盖性能优化的多个方面，对WordPress性能优化有需求的站长可以进一步阅读：
