页面加载性能之Web Vitals 前端chrome

前言
Web Vitals是谷歌针对网页加载速度和体验所提出的一套指标，这套指标用于测试网页的加载速度及用户体验等等；谷歌基于这套指标不仅设计了多套测试工具，还针对各种指标提出了相应的优化方法，具有很高的实用价值。
Web Vitals 核心指标
所谓的核心指标就是Web Vitals中希望所有人都能够引起重视的三个指标，当然也是最重要的三个指标，因为对网页加载速度和用户体验感的影响很大。

文章图片

上面的表格就是各项指标的评判标准，其中期望覆盖率指的是至少有相应百分比的用户测试可以达到GOOD标准。
LCP
概念
LCP（Largest Contentful Paint），即最大内容渲染，指的是视窗（viewport）内所有可见元素中尺寸最大的文本块或图像所需的渲染时间；
与之相近的一个指标是FCP（First Contentful Paint），该指标是用于检测第一个文本块或者图像渲染完成的时间，侧重点不同
指标作用
这个指标主要是用来弄清用户所看到的页面主体内容何时被渲染出来，之前也有相应的指标用于相似的目的，但是实际上存在很多的不足：

load和DOMContentLoaded事件只是反应了代码层面的加载时间结点，而非真实用户所关注的屏幕页面渲染效果，因此很不准确；
而FCP指标也只是关注了最初始的渲染效果，和用户关心的页面整体效果也相差甚远；
后面提出用于关注初始渲染状态之后的加载效果的指标——FMP（First Meaningful Paint）和SI（Speed Index），经实践证明效果不太行，经常出错，而且这两个指标计算很复杂也很难去解释；

由于存在上述问题，Web Vitals基于W3C的相关讨论[3]以及谷歌内部的一些研究得出了一个结论：
如何寻找最大的元素？
由于LCP关心的只是文本块及图像，因此寻找的元素结点限定为：

img元素
svg元素中的image元素
带poster属性的video元素
用url()方法加载背景图的元素
包含文本节点或其它内联文本节点的块级元素

限定了元素范围后，接下来就是从这些元素中找出尺寸最大的元素了，那么如何计算这些元素结点的大小？这里的尺寸大小计算遵循以下原则：

尺寸大小实际上以渲染完成后的大小为准
尺寸不包括padding，border和margin，可以理解为content-box的大小

由于图片资源需要异步加载完成后才会进行渲染以及js代码修改DOM结构和属性等因素的存在，因此这个最大渲染元素可能会发生改变，所以最大渲染元素的检测需要首屏渲染完成后才能最终确认；

文章图片

FID
概念
FID（First Input Delay），即第一次输入事件延迟，指的是用户第一次交互事件触发到主线程接收事件然后反应之间的时间；
指标作用
这个指标主要是从交互响应层面来量化用户对页面的第一印象；
因为新用户对一个网页的第一印象好坏对用户忠诚度影响很大，而第一印象除了网页的加载速度，还与第一次交互时的响应速度有着很大的关系；
这里的延迟指的就是用户交互触发的事件到主线程接收事件之间的延迟，也就是用于判断对于第一次交互时主线程的阻塞程度，延迟越低说明主线程比较空闲，也就利于用户对页面的交互响应速度；
至于为何只关注事件之间的延迟时间，而不是延迟时间 + 事件执行耗时 + UI状态更新耗时的方式，官方给出的解释是：
Even though this time is important to the user and does affect the experience, it’s not included in this metric because doing so could incentivize developers to add workarounds that actually make the experience worse—that is, they could wrap their event handler logic in an asynchronous callback (via setTimeout() or requestAnimationFrame()) in order to separate it from the task associated with the event. The result would be an improvement in the metric score but a slower response as perceived by the user
因为开发者可能为了更好的测试分数而去强行拆分任务到其他线程，从而导致更糟的交互体验；
CLS
CLS（Cumulative Layout Shift），即累积布局偏移，指的是首屏页面渲染过程中所有元素结点相对原始位置所发生的位置偏移累积量；
指标作用
该指标主要是为了量化渲染过程中的视觉稳定性（visual stability）；因为渲染过程或者交互过程中发生的非用户期待的视觉改变行为会影响用户的使用满意度，而布局偏移就是其中一种很常见的现象，经常出现在：

img/video等媒体元素未指定尺寸，当资源加载完成后渲染尺寸发生改变，通常表现为突然地闪变，以及影响周围元素的位置变化
插入一些DOM结点，导致用户原本关注的区域突然偏移

如何计算CLS？
可以看出影响CLS计算值有两个因素：

impact fraction：影响因子，这个参数主要是衡量相邻两个绘制帧之间不稳定元素（即位置发生改变的元素）所带来的影响；计算方法为所有不稳定元素在可视区域内的面积总和（扣除重叠的部分）占视窗面积的比值；

文章图片
distance fraction：距离因子，这个参数主要是衡量不稳定元素移动的距离；计算方法为取所有不稳定元素中偏移量（竖直及水平方向）最大的值除以视窗尺寸维度最大的值；根据上例，其距离因子就是0.25；

根据影响因子和距离因子的概念及计算方法，结合上图示例可以得知，当前帧的布局偏移分数为0.75 * 0.25 = 0.1875；而最终的CLS值则是所有绘制帧得到的布局偏移分数之和。
如何提升核心指标？
上述的三个核心指标，官方都给出了详细的提升指导文档：

https://web.dev/optimize-lcp/
https://web.dev/optimize-cls/
https://web.dev/optimize-fid/

Web Vitals 其它指标
其它的一些指标可以作为核心指标的补充，以更加精准地去定位一些性能及体验问题；

TTFB（Time to First Byte）：用户浏览器从开始加载网页内容到接收到第一个字节的网页内容之间的耗时，该指标主要侧重于网页加载体验；
FCP（First Contentful Paint）：从开始加载网页内容到第一个文本块或者图像渲染完成之间的耗时，该指标主要侧重于网页加载体验；
TTI（Time to Interactive）：从开始加载网页内容到开始有足够快的用户交互反应速度时之间的耗时，该指标主要侧重于网页加载体验；一般这个“有足够快的用户交互反应速度”指的就是FCP后长任务（long task，大于50ms的主线程任务）都执行完毕后，实际上就是主线程开始空闲，那自然就对用户交互就有很快的反应速度；可以看下官方文档的TTI计算步骤图[6]：

文章图片

TBT（Total Blocking Time）：FCP到TTI之间阻塞主线程的总耗时，所谓的阻塞就是长任务，而单个长任务的阻塞时间就是任务耗时 - 50ms；该指标主要侧重于网页加载体验，用于量化主线程阻塞的严重程度；

Web Vitals 指标分析
光有有指标还不行，实际使用时还需要一个工具集成上述指标来对目标网页进行分析得到数据才行，值得庆幸的是谷歌官方已经给出了多个相应的测试分析工具，可以快速的上手：

文章图片

上面就是几种常用的Web Vitals指标分析工具，其中比较推荐的是PageSpeed Insights和chrome浏览器内置的Lighthouse，因为这两个工具打开即可使用，而且没有代码侵入性，并且会有相应指标的改进建议；
但是Lighthouse没有FID指标的分析，不过可以使用相近的TBT进行替代；
国内网站测试