web-vitals是谷歌的 Chrome 维护团队于 2020 年开源的工具库，它基于统一的浏览器 Performance API 获取标准化的用户体验指标。
它主要测量6项指标，分别是：
- 首次内容绘制 (First Contentful Paint，FCP)
- 最大内容绘制 (Largest Contentful Paint，LCP)
- 首次输入延迟 (First Input Delay ，FID)
- 交互到绘制延迟（Interaction to Next Paint，INP）
- 累积布局偏移 (Cumulative Layout Shift，CLS)
- 第一字节时间 (Time to First Byte，TTFB)
FCP
First Content Paint（FCP）指标，测量从页面开始加载到屏幕上呈现页面内容的任何部分的时间。
这里的 Content 包括文本、图片、SVG 元素以及非全白的 Canvas 对象。
****FCP 应该尽可能正在 1s 以内。
LCP
Largest Contentful Paint (LCP）衡量可视窗口内可见的最大图像或文本块的渲染时间。
LCP 应在 2.5s 内，且 LCP / Load Time < 0.75
- Good：0-2.5s
- Need Improvement：2.5-4.0s
- Poor：大于 4s
LCP 考虑的元素类型
<img />tag<image />内的<svg />元素<video />元素- 具有通过
url()功能加载的背景图片的元素 - 包含文本节点或其它内联级文本元素子级的块级元素。
FID
**首次输入延迟（First Input Delay，FID）**度量标准有助于衡量用户对网站的交互性和响应性的第一印象。
使用 FCP 可以衡量用户对您的网站加载速度有第一印象。 但是，您的网站可以在屏幕上绘制像素的速度只是故事的一部分。 当用户尝试与这些像素进行交互时，您的网站的响应速度同样重要！
FID 衡量的是从用户第一次与页面进行交互到浏览器实际上能够开始处理交互事件的时间。
通常，FCP 与交互时间（TTI）之间会出现较长的首次 FID，因为页面已呈现了其某些内容，但尚未可靠地进行交互。 FID 常常是因为浏览器的主线程在处理其它操作导致（通常是加载大型 JS 脚本）。
FID 测量接收输入事件与下一次主线程空闲之间的增量。这意味着即使在未注册事件侦听器的情况下，也将测量 FID 。
FID 仅在事件处理中测量“延迟”。 它不测量事件执行时间本身，也不测量事件处理程序运行后浏览器更新 UI 所花费的时间。
将测量事件执行时间和浏览器更新 UI 的时间其作为 FID 的一部分包括在内可能会激励开发人员添加实际上会使体验更糟的变通办法，但更可能导致糟糕的情况，尽管这段时间确实会影响用户体验。
INP
INP(Interaction to Next Paint) 是一种评估响应性能的测试指标。web-vitals 已对其支持。 INP 记录整个页面生命周期中所有交互的延迟。 这些交互的最高值为该页面的 INP。
Math.max(INP0, INP1, ..., INPn)
对于少于 50 次交互的页面，INP 是延迟最差的交互。 对于过多交互的页面。INP 通常是 98% ??? 对于某些网页，用户会存在更多交互（例如文本编辑器） 此时对最差页面进行抽样会产生误导，通过高百分比，可以评估大多数交互是否得到及时响应。
交互（interaction）是在同一逻辑下，用户触发的一组输入事件。
单个交互的延迟作为交互一部分的任何事件的单个最长持续时间组成。 交互的持续时间（duration）是从用户于页面交互的点开始测量，直到在所有关联的时间处理程序都执行后呈现下一帧位置。
CLS
**累计布局偏移（Cumulative Layout Shift， CLS）**是衡量用户视觉稳定性的重要指标。
页面内容的意外移动通常是由于异步加载资源或将 DOM 元素动态添加到现有内容上方的页面而发生的。 通常是由于尺寸未知的图像或视频、呈现比其后备更大或更小的字体或者是动态调整自身大小的第三方广告或小部件。
CLS 会度量页面整个生命周期中发生的每个**意外的布局偏移（unexpected layout shift）的布局移位分数（layout shift scores）**的总和。
每当可见元素从一个渲染帧到下一帧改变其位置时，都会发生布局偏移。
TTFB
TTFB测量前端页面（Document）的HTTP请求发送后，到接收到第一字节数据响应的耗时，通常包括重定向、DNS查询、服务器响应延迟等耗时。
其值为浮点数，单位是毫秒。值越小表示该项指标状况越好，页面HTTP响应的耗时越短，也就是页面的加载更快。
TTFB指标值的大小直接决定着页面初始内容渲染耗时的长短，往往和FCP、LCP指标有明显的相关关系，对用户体验有直接影响，所以web-viatals也将其当做了量化用户体验的指标之一。
除了可以通过web-vitals库的onTTFB()API获取，也可以使用 Chrome 自带的 DevTool Network 网络面板计算得出。
web-vitals具体使用方式
npm install web-vitals
import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals';
onCLS(console.log);
onINP(console.log);
onFCP(console.log); //P 应该尽可能正在 1s 以内。
onFID(console.log); //优秀的站点 FID 的时间应该小于 100ms，或 `FID < Load Time * 75%`
onLCP(console.log); //**LCP 应在 2.5s 内，且** `LCP / Load Time < 0.75`
onTTFB(console.log);
value值是毫秒数
