关于前端:页面加载性能之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/