页面加载性能之Web Vitals

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/