haw Web Vitals | 新一代性能指标
Web Vitals插件概述
Web Vitals，即 Google 给的定义是一个良好网站的基本指标（Essential metrics for a healthy site）。在过去要去衡量一个高质量网站，需要的指标太多，且有些指标计算很复杂，所以，Google 推出 Web Vitals 就是为了简化这个过程，用户仅仅需要关注 Web Vitals 即可。
Web Vitals插件功能
在 Web Vitals 中，Core Web Vitals 是最核心的，它包含以下三个指标：
Largest Contentful Paint，最大内容绘制，用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。
LCP 比 FP、FCP、FMP 更能体现一个页面的性能好坏程度，因为这个指标会持续更新。举个例子：当页面出现骨架屏或者 Loading 动画时 FCP 其实已经被记录下来了，但此时页面内容其实并未呈现
First Input Delay，首次输入延迟，用于记录用户首次与页面交互时响应的延迟，即从用户首次与页面进行交互（即当他们单击链接、按钮、输入框等）到浏览器实际上能够响应该交互之间的时间
FID 在 FCP 和 TTI 之间，这个阶段页面已经部分呈现，但还不具备完全可持续交互的状态，如果其中有长任务发生的话那么势必会造成响应时间变长
3、CLS （Cumulative Layout Shift）：累计布局位移，用于衡量视觉稳定性，谷歌要求页面的CLS最好保持小于0.1。
Cumulative Layout Shift，累积布局偏移，是一个重要的、以用户为中心的衡量视觉稳定性的指标，因为它有助于量化用户体验意外布局位移的频率，低 CLS 有助于确保页面令人愉快。
Web Vitals插件使用方法
1、Google 提供了一个小而美 npm 包：web-vitals，
2、在最近的 create-react-app 脚手架已经包含 web-vitals，主要代码是：
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
// 引入一个 web-vitals 的库
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
3、如果你要测量任何受支持的指标，只需将函数传递到 index.js 中的 reportWebvitals 函数中：
reportWebVitals(console.log);
4、当指标的最终值在页面上完成计算时，将触发此函数。我们就可以通过它将结果记录到控制台或发送到特定端点。
插件下载地址：
