关于 Web Vitals

作者 / Web 性能工程师 Ilya Grigorik

优化用户体验质量是所有网站取得长期成功的关键。通过与数百万网络开发者和网站所有者的持续交流和协作，我们在 Google 开发了许多实用指标和工具，以帮助企业所有者、市场营销人员和开发者发掘改善用户体验的机会。然而，丰富多样的指标和工具也给许多人带来了各种优先级、明晰度和一致性方面的挑战。 

今天，我们为各位介绍一项名为 Web Vitals 的新计划，此计划的发起方为 Google，旨在提供各种质量信号的统一指南，我们相信这些质量信号对提供出色的网络用户体验至关重要。

Web Vitals的地址： https://web.dev/vitals/

Core Web Vitals

评估用户体验质量涉及多个指标，尽管部分用户体验是跟网站和内容相关，但还是有些共通信号，而 Core Web Vitals 体现了最关键的几项指标。此类核心用户体验需求包括页面内容的加载体验、交互性和视觉稳定性，这些方面共同组成 2020 Core Web Vitals 的基础。

* 最大内容绘制评估页面主要内容可能已完成加载时的感知加载速度，并在页面加载时间轴上标记时间点；

* 首次输入延迟评估用户首次尝试与网页交互时的网页响应速度，并量化用户感知体验；

* 累积布局偏移评估可见页面内容的视觉稳定性，并量化内容的意外布局偏移量。

所有上述指标均捕获以用户为中心的重要体验结果，可现场测量，并具有支持性实验室诊断等效指标和工具。例如，虽然最大内容绘制是最重要的负载指标，但其也高度依赖于首次内容绘制 (FCP) 和首字节响应时间 (TTFB)，这些指标对监控和改进均具有非常重要的意义。

* 指标相关详细内容请参考

   https://web.dev/metrics/

评估 Core Web Vitals

我们的目标是创建简单且易于访问和评估的 Core Web Vitals，让所有网站所有者和开发者在 Google 界面及其自己的仪表板和工具中都能轻松使用。

Chrome UX Report 让网站所有者能够快速评估其网站的各项 Web Vitals 性能，获取实际 Chrome 用户的真实体验数据。BigQuery 数据集已经能够展示所有 Core Web Vitals 的可公开访问的数据，同时我们正在开发全新的 REST API，以实现对 URL 和原始级别数据的轻松访问，敬请期待。

* Chrome UX Report

https://developers.google.cn/web/tools/chrome-user-experience-report

我们强烈建议所有网站所有者针对每项 Core Web Vitals 收集自己的真实用户评估分析结果。为此，包括 Google Chrome 在内的多个浏览器已实施并提供对所有当前 Core Web Vitals 规范草案的支持: 最大内容绘制、布局不稳定性和事件时间。此外，今天我们还将推出一个 web-vitals 开源 JavaScript 库，该库提供可立即投产的小型包装器，可与支持自定义指标的任何分析提供程序搭配使用，也可用作准确捕获网站用户各项 Core Web Vitals 的参考。

* web-vitals

https://github.com/GoogleChrome/web-vitals/

// 使用 web-vitals 评估和报告 CLS、FID 及 LCP 的示例。
import {getCLS, getFID, getLCP} from 'web-vitals';
 
 
function reportToAnalytics(data) {
  const body = JSON.stringify(data);
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}
 
 
getCLS((metric) => reportToAnalytics({cls: metric.value}));
getFID((metric) => reportToAnalytics({fid: metric.value}));
getLCP((metric) => reportToAnalytics({lcp: metric.value}));

我们在测试和开发过程中发现，在开发过程中和浏览网页时轻松访问每项 Core Web Vital 的功能非常有用。为帮助当下的开发者发掘优化机会，今天我们还要推出全新 Core Web Vitals 扩展程序的开发者预览版。在浏览网页的过程中，此扩展程序会在 Chrome 浏览器中显示有关每项 Vital 的视觉指示，将来还可以通过此程序来查看汇总的真实用户数据分析 (由 "Chrome UX Report" 提供)，以了解当前网址和来源的每项 Core Vital 状态。  

* 全新 Core Web Vitals 扩展程序

https://github.com/GoogleChrome/web-vitals-extension/

最后，在接下来的几个月里，我们将更新 Lighthouse、Chrome DevTools、PageSpeed Insights、Search Console 的速度报告和其他主流工具，以重点强调并提供统一的可执行指导，进而改进 Core Web Vitals。详细内容请点击屏末阅读原文查看。

不断发展 Core Web Vitals

2020 Core Web Vitals 着重于三个主要衡量指标，暂未捕获完整的 Web 用户体验。我们预计每年对 Core Web Vitals 进行一次更新，并定期更新未来候选指标、动机和实施状态。

展望 2021 年，我们将投资构建针对页面速度及其他关键用户体验特征的指标，以增强理解和评估能力。例如，扩展对所有交互中 (而不仅仅是第一次交互) 输入延迟的评估功能；构建用于评估和量化平滑度的新指标、可实现即时且保护隐私的网络体验的原语和支持指标等等。

请务必关注我们的 web.dev 更新，并订阅我们的邮件列表，以在日后获取有关 Vitals 和 Web 的所有更新。

* web.dev 更新

https://web.dev/blog/

* 订阅我们的邮件列表

https://web.dev/newsletter/