Web Vitals是Google的一项重大动作，旨在为品质信号提供对立的领导，这对于在Web上提供杰出的用户体验来说很重要。
网站的开发者须要理解本人的网站给用户带来的体验，但不肯定要成为性能优化的专家。Web Vitals旨在简化流程，并帮忙网站开发者聚焦在外围性能指标上，也称为Core Web Vitals。
Core Web Vitals
Core Web Vitals是Web Vitals的一个子集，实用于所有网页，应该被所有开发者去进行测量，也将在所有Google提供的工具中浮现。每一个Core Web Vitals都代表了用户体验独特的一面，能够用现场数据测试，能反映出以用户为外围的要害后果的实在体验。
形成Core Web Vitals的外围指标，将随着工夫的推移而倒退。当下2020年咱们仅仅关注三个方面: 加载、可交互性和视觉稳定性。蕴含以下指标（以及各自的阈值）:
- Largest Contentful Paint (LCP): 掂量加载性能。为了提供一个好的用户体验，LCP应该在2.5秒内。
- First Input Delay (FID): 掂量可交互性。为了提供一个好的用户体验，FID应该在100毫秒内。
- Cumulative Layout Shift (CLS): 掂量视觉稳定性。为了提供一个好的用户体验，CLS应该小于0.1。
对下面每一个指标而言，为了保障笼罩到大部分用户，个别阈值设置在75%的页面加载达标即可，包含手机和pc站点。
JavaScript中测试Core Web Vitals
每一个Core Web Vitals都可用JS提供的Web API来测试。
最简略的形式，就是集成 Web Vitals 的js库，这是Google提供的一个小型能够生产环境应用的统计性能的库，涵盖了根本所有指标。
import {getCLS, getFID, getLCP} from 'web-vitals';function sendToAnalytics(metric) { const body = JSON.stringify(metric); // Use `navigator.sendBeacon()` if available, falling back to `fetch()`. (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', {body, method: 'POST', keepalive: true});}getCLS(sendToAnalytics);getFID(sendToAnalytics);getLCP(sendToAnalytics);如果不须要发送统计，能够间接应用 Web Vitals扩大 ，这个扩大其实就是集成了下面提到的js库，实时的展示每个页面的指标值。
Core Web Vitals试验数据测试工具
个别能够用开发者工具和Lighthouse，这两个都能测试FCP和CLS，但FID无奈测试，能够用TBT代替。
其余Web Vitals
除了外围之外，还有其余类型的Web Vitals，当然这些个别都是外围的补充，为一些特定的场景提供服务。
例如，Time to First Byte (TTFB) 和 First Contentful Paint (FCP) 都是对于加载性能的，两者都有助于诊断LCP (迟缓的服务端响应，或者渲染阻塞的资源)。
同上，Total Blocking Time (TBT) 和 Time to Interactive (TTI) 则是影响FID的实验性指标，他们不属于外围，因为不能测试现场数据，不能反映用户为外围的要害后果。
一直倒退的Web Vitals
Web Vitals 和 Core Web Vitals代表了当今开发人员用来掂量咱们整个Web体验品质的最佳可用信号，但这些信号还不欠缺，将来会有更多改善和晋升的点。
总结
Core Web Vitals是与用户为核心的理念密切相关的指标，个别不会怎么变动，绝对稳固，一旦产生扭转，或者阈值有了调整，影响很大，开发者须要对这种更新有预知或者年度的预测。
而其余的Web Vitals常常是辅助Core Web Vitals的，可能比其更具备实验性。因而，它们的定义和阈值的改变可能会很频繁
对所有Web Vitals来说，上面这个公开文档会实时更新:
http://bit.ly/chrome-speed-me...
参考
https://web.dev/vitals/