Web Vitals

译文中部分指标直接采用首字母缩写的形式，只是为了提高效率，实际书写请填写完整名称。

提升用户体验是一个网站保证长久成功的关键。无论你是老板，销售，还是开发，WV可以帮助你量化你的网站的用户体验以及指出你需要进行改善的地方。

总览

Web Vitals 是 Google 的一项计划，旨在为质量指标提供一个统一指引，这些指标对于网站提供一个出色的用户体验至关重要。
Google在过去的几年中提供了很多用来衡量性能的工具。有一些开发者是这些工具的使用专家，但是对于很多其他人来说跟的上指标以及熟练使用工具是一项巨大的挑战。
网站所有者不必成为性能专家才能了解网站的用户体验。 WV的主要目的是简化操作，并帮助站点专注于最重要的指标，即Core Web Vitals。

核心指标（Core Web Vitals）

CWV是WV的子集，每个网站所有者都应该去测量一下这些指标，它可以在Google的工具中展示出来。每个核心指标都对应用户体验的一部分，它可以在真实环境中测量，反应出真实环境中的用户体验。
这些指标组成了CWV，并且基本上存在于整个生命周期中。这些指标在2020年的时候主要覆盖三个用户体验的方向：加载速度，互动速度和视图稳定，并且包括以下的指标：

• Largest Contentful Paint (LCP): 指代加载性能。为了提供一个好的用户体验, 首屏加载时LCP应该在2.5秒之内。
• First Input Delay (FID): 指代互动友好性。如果想要有一个好的体验，FID应该在100毫秒之内。
• Cumulative Layout Shift (CLS): 指代试图稳定性。CLS应当小于等于0.1。

对于以上的这些指标，为了确保你的网站的绝大部分用户达到这个推荐指标，一个很好的衡量阈值是页面加载的第 75 个百分位数，并且在移动和桌面设备之间进行继续细化（a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.）。
评估 Core Web Vitals 合规性的工具判断页面通过，应当考虑它是否满足上述所有三个指标的 75% 的建议目标。
如果你想深入学习这个建议背后的调查和方法，可以看看Defining the Core Web Vitals metrics thresholds。

测量以及报告Core Web Vitals

Google相信CWV是所有web体验中最核心以及关键的指标。因此它几乎在所有的受欢迎的工具中展示。接下来的一段将会展示哪些工具支持CWV。

测量Core Web Vitals的工具

Chrome User Experience Report 为这三大指标收集匿名的，真实的用户体验数据。这个数据是的网站的所有者可以快速的查看网站性能，而不是使用一些性能工具比如 PageSpeed Insights，Core Web Vitals report手动测量。

如果你想更好的学习怎么样使用这些工具，哪个工具适合你，你可以看看 Getting started with measuring Web Vitals。
Chrome User Experience Report提供的数据指出了一个快速的方式去评估你的网站性能，但是它没有提供这些细节，每个页面的测量数据通常是准确诊断、监控和快速解决性能问题所必须的。因此我们强烈建议网站配置他们自己的真是的用户监控。

使用JS衡量Core Web Vitals

每一个指标都可以用js通过标准的web api测量。最简单的方式是使用web-vitals的依赖库，这是一个围绕底层 Web API 的小型、生产版本的包，它以准确匹配所有指标报告方式的方式衡量每个指标。上面列出的 Google 工具所能提供的它都能提供。
通过web-vitals这个类库测量指标非常简单，如下：

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配置好你的网站并且发送你的指标到分析端后，接下来的步骤是汇总和分析数据，看看你的网站是否保证75%的用户体验达到推荐指标的要求。
市面上的一些分析工具已经提供了对这些指标的支持，即便不支持的工具，也允许你去拓展支持。一个例子就是 Web Vitals Report，这个工具允许网站所有者衡量CWV用Google分析。如果你想具体学习的话可以看看Best practices for measuring Web Vitals in the field.
你可以不写任何代码，而是直接使用Web Vitals的Google拓展插件来收集数据。这个插件使用web-vitals库区测量每个指标并且在浏览器上展示。
在理解你的网站性能以及对比其他网站方面，这个插件很有用。

此外，如果开发者想要通过自定义的方式测量这些指标的话，可以通过以下的阅读指引来获取细节：

• 使用JS计算LCP
• 使用JS计算FID
• 使用JS计算CLS

关于使用受欢迎的分析服务测量这些指标的更多方案可以查看 Best practices for measuring Web Vitals in the field

使用实验室工具计算核心指标

虽然CWV的指标基本都是在真实环境收集的，但实际上这些数据也可以在实验室的环境中采集。
实验室测量（应当也可以理解为模拟测量）是开发环境（未发布前）中测试性能特征的最好方式。同时也是提前发现性能瓶颈的最好方式。
下面的几个工具可以在实验室环境中测量计算CWV：

像Lighthouse是在模拟环境中进行页面加载的，这种环境是没有用户输入的，因此无法测量FID。但是总阻塞时间(TBT)可以替代FID。对于TBT的性能优化同时也会改善FID。
实验室环境下的测量是提供好的用户体验的必须的方式，但它也不能代替真实环境下的数据采集。
受到用户设备性能，网络环境，设备上可能有其他运行的应用的因素和用户如何与页面交互，页面的表现可能会差异非常大。事实上，每个性能指标都会收到用户交互的影响，只有真实环境的测量才可以完整反映出其情况。

改善你的分数的一些建议

当你测量计算得到指标和得到需要改进的方向后，接下来的就是优化。下面的介绍指出了一些推荐的方案去优化你的页面的性能指标：

• Optimize LCP
• Optimize FID
• Optimize CLS

  其他的性能指标

  尽管核心指标是提供好的用户体验所必须衡量的，但其他的一些自定义的指标同样重要。
  这些其他的指标经常作为核心指标的补充，这些补充指标可以帮助捕获用户体验中的很大的一部分数据，并且指出具体的问题。
  比如 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可以帮助开发者衡量网站的用户体验，但是这些指标并不完美，它可能在将来改进或者增加。
Core Web Vitals的指标在所有的Google工具中均有实现。这些指标的改变将会造成巨大的影响，开发者们期望指标是稳定的，但同时也要对指标的更新有所预料和准备。
其他的Web Vitals可能更加依赖上下文或者工具，并且可能更加具有实验室的特效。因此它们的定义和改变可能比较频繁。对于所有的性能指标来说，其变化都会记录在这个文件中CHANGELOG。