［译］关键渲染路径

什么是关键渲染路径？

它是一系列在首屏渲染中必须发生事件。
例如：获取html > 获取资源 > 解析 > 显示页面

优化这些事件能够带来页面速度的巨大提高。

关键渲染路径能够实现一件很是美妙的事。
它使得你可让一个具备许多资源须要加载的大型页面变得比只需加载少量资源小页面速度更快。
虽然大部分网页能够分红许多块内容，但咱们不可能为了是页面加载更快而简单的删除页面的某些部分。若是你曾经有过“那我该怎么作才能时个人页面变快呢？” 或者 “谷歌是如何让页面在一秒以内加载完成的？”，那么这个概念就是为你准备的！

优化关键渲染路径

为了使概念更清晰，咱们在解释一些关键字：
critical：绝对必须的
render: 展示（这里是指页面对用户可视）
path：一些列事件使得咱们的页面能够展示
initial view：也叫作“above the fold”， 它指的是用户不用滚动就能够看到的那部分页面。

因此换句话说，渲染路径就是指一系列事件使得首屏得以展示。

由于事实上几乎每一个网站在展示过程当中都有一些多余的步骤，这是真正能够优化的地方。

优化关键路径能够减小页面加载时间，这是条捷径！

 

路径

在显示页面以前，浏览器必须先加载页面中调用的全部资源。这里把一个只有一张图片、一个css文件和js文件的页面做为例子。

让咱们看看页面呈现以前须要的步骤...

1.浏览器下载html文件

2.浏览器读取html文件，发现里面包含一张图片、一个css文件和一个js文件

3.浏览器开始下载图片

4.浏览器阻塞渲染，直到css和js文件下载完成

5.浏览器下载css文件并解析，确认没有内嵌的额外资源（经过import）须要记载

6.浏览器在未下载完js文件前，继续组赛渲染

7.浏览器下载完js文件并解析，确保没有额外的资源须要加载

8.最后浏览器渲染出页面

以上只是一个简单页面渲染所须要的步骤，如今想象下你的页面须要的步骤。

你的页面可能有一个社交按钮，多个css文件，多个js文件，许多图片、插件以及音频、视频等。

 

这意味着你的渲染路径将会是一大团乱。

 

不少网站的渲染路径极其糟糕，由于他们的页面调用了太多东西，致使浏览器须要先加载完这些资源，才能显示网页。

这是你的优点。当你的网页比竞争对手更快，你的用户会很开心。（谷歌浏览器喜欢这样的网站）

渲染

某些资源的加载会阻塞页面渲染。最广泛的就是css和js文件。浏览器必须先加载这些东西，才能把网页展示给用户。然咱们来看一个广泛的场景。

Wordpress 博客使用主题。大多数主题有多个css文件（这就是为何有这么一条页面加速方针－－“合并外部css资源”）。全部的css资源能够被合并成一个文件，可是当你添加主题时，实现上须要多个css文件。因此即便显示一个字符都须要浏览器先加载和解析这些文件，这意味须要等待多个对服务器的请求返回。这就是众所周知的阻塞渲染css。

一个访客打开你的页面时将是空白的，直到渲染的关键步骤完成。

可是即便你的css已经加载完成你的博客也不能完成渲染，由于wordpress主题还包括多个js文件。在这些js未被加载完成以前，页面将被阻塞渲染，这就是所谓的渲染阻塞js。

 因此一个典型的wordpress页面渲染须要发出20多个请求去加载css和js。可是等等，你还有社交按钮或者组建，这些都须要加载额外css和js文件。因此，在一边博客呈现给用户以前都须要加载好多资源。

可是不是只有wordpress才这样，我只是用它做为一个例子。首屏渲染须要加载多个资源是至关广泛的。

这些渲染的延迟是可控的，这与关键渲染路径有关。

关键性

 目前为止我描述了一张很是灰暗的景象，可是好消息是你能够在页面加载数以百万的东西，它能够包含12000张图片，200个js，然而页面仍能够在一秒内加载完。

这是如何实现的？

经过理解什么对于首屏渲染是关键的。

优化渲染路径

其实只有三件事咱们须要关注：

• 优化关键资源数量
• 优化关键子节数
• 优化关键路径长度

例子

图片 － 即便一个页面有12000张图片，可能只有一二张在屏幕可视区。这意味着，若是咱们只加载这俩张图片，咱们能够是的首屏加载时间更短。咱们不用展现所有的12000张图片，咱们只须要展现首屏的图片就好了，其他的能够延迟加载。

js文件 － 咱们也能够有12000个js文件，但咱们只须要加载首屏须要的js，其余的js能够延迟加载。

css文件 － 最小化css方法不是在线工具，而是在一开始的时候就不要用太多的css，好比减小20%的css。固然还有其余方式，好比合并外部css文件，这样你能够减小渲染时须要加载的文件数量。你还能够内嵌一些css在页面里。不管你的css是大是小，你的用户在看到页面以前都要先等待这些资源的加载。

下面咱们将会看到一个页面以及咱们如何运用关键路径的知识来使页面显著变快。

 

理解页面速度的衡量 

谷歌所说的页面速度不是指下载一个页面所须要的时间。他们关心的是用户开始看到内容以及可交互能有多快。

谷歌使用页面速度来做为网页排名因素是基于对用户的统计数据。用户使用谷歌搜索到的页面若是打开很慢的话，这将是一种糟糕的体验。

你们会抱怨谷歌说，“为何你发给我一个加载这么这么慢的页面”，这就是所谓的可感知速度。

若是一个用户须要看着一个空白页等待10秒加载，谷歌将不会将这样的页面显示在搜索结果中。

当咱们谈到页面速度时，咱们真正关心的是使用户尽量快的看到咱们的首屏内容。

 

一个优化首屏加载速度的实际例子

 你正在阅读的这个页面将会成为咱们的例子。这个页面在半秒以内能加载完，可是它并无你的网站那么复杂。我将会向你展现这个页面的俩个版本，其中一个页面是有作关键路径优化的。

经过对比这俩个版本，你将会明白优化有多么重要。这里也会说明谷歌是如何衡量页面加载的。这个页面调用了多个js而不是统一的一个，然咱们看看页面都有些什么...

• 多张大图
• css
• 谷歌分析插件
• 谷歌+插件
• Viglinks广告插件

简单说，我用到了一个页面一般须要的一些东西(图片、css、监控、社交)。你可能也在你的页面用到了这些东西。经过优化关键路劲，我实际是将会使把对这些东西的调用合并为一个请求。浏览器渲染这个页面只须要一个html文件。一个12k的小文件，这个页面的加载几乎是瞬间完成。

另外一方面，非优化版本将会发出数十个请求，这在电脑上加载就很慢更别说在手机上了。然而，俩个页面的内容给实际上是如出一辙的。然咱们继续，亮出真货...

 

优化版本

渲染时间：1.3s

注：这个页面须要加载不少文件后，才能展现（图片最右边的蓝色竖线标识页面所需资源加载完成）

从图中咱们能够看到非优化版须要加载多少的文件，总共加载了1.5s，你能够在这里查看非优化的版本，查看html源码以及具体加载状况。这个页面是一个至关简单的静态页，可是它仍然调用了20多个请求，这意味着页面须要等待20个请求加载完成页面才对用户可见。

注意，浏览器首先加载html，而后是css、图片、js，所遇这些必须被记载和解析完，页面才会展现。非优化版本没有关注关键路径，因此基本上全部资源必须被加载下来在页面可以渲染以前。

 

优化版本

渲染时间：0.25s

注：从图中咱们看到，整个页面只须要加载一个文件就能渲染了。

优化版本的首屏渲染只须要加载一个文件。这个页面比非优化版本快5倍，虽然他们的页面内容是如出一辙的。它依然加载相同的资源，使用一样的js，可是不一样的是，页面可视时间只须要250ms。

 

 我如何检查页面

我看着个人页面而后问本身，“这个页面的首屏真正须要加载的是哪些？”。我意识到只有下面这些是首屏须要的：

• logo
• 第一张大图
• css

这就是说，下面这些资源跟首屏没有关系：

• 谷歌+插件
• 其他的图片
• 谷歌分析插件

而后，我看着加载瀑布流图，意识到这些我不须要的东西，实际花了最多的时间去加载。因此若是我可以以某种方式把这些非必须的资源移出关键路径，那么个人页面将会特别快。

我作的优化

• css内嵌 - 我把css从外部文件拿出来直接放在了html里面
• Base 64 编码logo和第一张大图 - 我使用base 64 编码工具把logo图片放到html文件中
• 优化全部文件 - 我压缩了全部图片的大小
• 延迟加载图片 - 使用js延迟加载图片
• 延迟加载全部插件的js代码
• 使用页面测速工具检测个人页面

这是尽我所能从关键路径移出的全部东西，我合并关键路径的全部请求为一个html文件，里面包含了首屏渲染须要的全部东西。

 

CSSOM

 

为了更好地理解关键选项路径，须要对CSSOM的基础理解。CSSOM是CSS 对象模型，它是由你的样式脚步生成的。若是你想调节好关键路径，对CSSOM的理解是必须的。

 

关键点

• 关键路径是首屏渲染须要的一系列事件
• 优化渲染路径是移出或者延迟加载首屏不须要的资源
• 大多数js代码加载能够被延迟到首屏渲染后
• 我经过考虑什么是首屏须要加载的来检测个人页面
• 我使用页面加速优化去移除或者延迟加载非首屏资源

注：个人优化还不是最理想的，由于个人html大小超过了14k这个理想值。

 

原文：https://varvy.com/pagespeed/critical-render-path.html

注：转载请注明出处！