Core Web Vitals101

什么是Web Vitals？

近几年来，好的用户体验已经是衡量一个网站是否是一个好网站的重要指标，优化用户体验的质量是任何网站长期成功的关键。无论您是Boss、BA，PO还是DEV，Web vital都可以帮助您量化站点的体验，并确定改进的机会。

Web vitals 是一个由谷歌发起的，为网站的质量提供统一的指导(guideline)，这对于在Web上提供良好的用户体验至关重要。

Google提供了一系列的metrics来measure一个网站的性能，例如FCP， TTFP，TTI等等，同时也提供了一系列的工具来获取这些metrics的report。https://developers.google.com/web/tools/chrome-user-experience-report

Web vital倡议旨在简化景观，并帮助网站关注最重要的指标，即 Core Web vital。

什么是Core web vitals？

Core web vital是web vital的子集，适用于所有的网页，应该由所有的网站所有者衡量，并将出现在所有的谷歌工具。每一个Core web vital都代表了用户体验的不同方面，在领域中是可测量的，并反映了以用户为中心的关键结果的真实体验。

组成Core web vitals的metrics是会随着时间的改变而改变的。但在2020年主要focus在用户体验的下面三个方面， loading, interactivity, and visual stability，他们分别用下面三个metric来度量

image.png

• Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
• Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

为什么要考虑Core web vitals？

1. 更好的用户体验
2. traffic，引流

LCP， FID， CLS是什么？

LCP： https://web.dev/lcp/

最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

LCP之前的相关属性：诸如load（加载）或DOMContentLoaded（DOM 内容加载完毕）这样的旧有指标并不是很好，因为这些指标不一定与用户在屏幕上看到的内容相对应。而像First Contentful Paint 首次内容绘制 (FCP)这类以用户为中心的较新性能指标只会捕获加载体验最开始的部分。如果某个页面显示的是一段启动画面或加载指示，那么这些时刻与用户的关联性并不大。
我们以往推荐过一些性能指标，例如First Meaningful Paint 首次有效绘制 (FMP)和Speed Index 速度指数 (SI) （两个指标都包含在灯塔工具中），这些指标有助于捕获到更多初始绘制后的加载体验，但这些指标十分复杂、难以解释，而且常常出错，也就意味着这些指标仍然无法识别出页面主要内容加载完毕的时间点。

哪些元素在考量范围内？

• 元素
• 内嵌在元素内的元素
• 元素（使用封面图像）
• 通过url()函数（而非使用CSS 渐变）加载的带有背景图像的元素
• 包含文本节点或其他行内级文本元素子元素的块级元素。

何时报告最大内容绘制？

例子：

image.png

FID：https://web.dev/fid/

FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间

一般来说，发生输入延迟（又称输入延时）是因为浏览器的主线程正忙着执行其他工作，所以还不能响应用户。可能导致这种情况发生的一种常见原因是浏览器正忙于解析和执行由您的应用程序加载的大型 JavaScript 文件。在此过程中，浏览器不能运行任何事件侦听器，因为正在加载的 JavaScript 可能会让浏览器去执行其他工作。

image.png

image.png

一些问题：

1. 为什么只考虑首次输入？
2. 哪些算是首次输入？
3. 如果用户始终没有与您的网站进行交互怎么办？
4. 为什么只考虑输入延迟？

CLS：https://web.dev/cls/

CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数
每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移
一连串的布局偏移，也叫会话窗口是指一个或多个快速连续发生的单次布局偏移，每次偏移相隔的时间少于 1 秒，且整个窗口的最大持续时长为 5 秒（https://web.dev/evolving-cls/#why-a-session-window）
最大的一连串是指窗口内所有布局偏移累计分数最大的会话窗口

image.png

页面内容的意外移动通常是由于异步加载资源，或者动态添加 DOM 元素到页面现有内容的上方。罪魁祸首可能是未知尺寸的图像或视频、实际渲染后比后备字体更大或更小的字体，或者是动态调整自身大小的第三方广告或小组件。

Note:只有当现有元素的起始位置发生变更时才算作布局偏移。如果将新元素添加到 DOM 或是现有元素更改大小，则不算作布局偏移，前提是元素的变更不会导致其他可见元素的起始位置发生改变。

如何计算布局偏移分数？

浏览器在计算布局偏移分数时，会查看可视区域大小和两个已渲染帧之间的可视区域中不稳定元素的位移。布局偏移分数是该位移的两个度量的乘积：影响分数和距离分数（两者定义如下）。

布局偏移分数 = 影响分数 * 距离分数

影响分数

影响分数测量不稳定元素对两帧之间的可视区域产生的影响，前一帧和当前帧的所有不稳定元素的可见区域集合（占总可视区域的部分）就是当前帧的影响分数

image.png

在上图中，有一个元素在一帧中占据了一半的可视区域。接着，在下一帧中，元素下移了可视区域高度的 25%。红色虚线矩形框表示两帧中元素的可见区域集合，在本示例中，该集合占总可视区域的 75%，因此其影响分数为0.75。

距离分数

布局偏移分数计算公式的另一部分测量不稳定元素相对于可视区域位移的距离。距离分数指的是任何不稳定元素在一帧中位移的最大距离（水平或垂直）除以可视区域的最大尺寸维度（宽度或高度，以较大者为准）。

image.png

在上方的示例中，最大的可视区域尺寸维度是高度，不稳定元素的位移距离为可视区域高度的 25%，因此距离分数为 0.25。

所以，在这个示例中，影响分数是0.75 ，距离分数是0.25 ，所以布局偏移分数是0.75 * 0.25 = 0.1875 。

如何定义 Core Web Vitals metrics的阈值

Core Web Vitals是一组度量Web上真实用户体验的重要方面的字段指标。它包括三个指标，以及每个指标的目标阈值，这有助于开发人员定性地了解他们的站点体验是“好”、“需要改进”还是“差”。

image.png

此外，为了对页面或站点的总体性能进行分类，我们使用该页面或站点的所有页面浏览量的第75百分位数值。换句话说，如果一个网站至少有75%的页面浏览量达到了“好”的阈值，那么这个网站就被归类为具有“好”性能的网站。相反，如果至少有25%的页面浏览量达到“差”的阈值，该网站就被归类为“差”的表现。例如，一个2秒的75百分位LCP被归类为“好”，而一个5秒的75百分位LCP被归类为“差”。

For the detail of how to define the target of thresholds, pls have a look at: https://web.dev/defining-core-web-vitals-thresholds/

Tools to measure and report Core Web Vitals

Google believe Core Web vital是对每一个网站都特别特别的重要，所以Google把Core web vital metrics集成到了很多的流行的自己的工具上

image.png

Pagespeed insights：https://developers.google.com/speed/docs/insights/v5/about

image.png

Lighthouse

image.png

Chrome UX report：https://developers.google.com/web/tools/chrome-user-experience-report

Google Devtools

Web vital Extension

image.png

Javascript API， https://web.dev/ 官方提供了很多的API可以获取Core web vitals不同指标的值