Web Vitals ：Google 如何定义性能指标及帮助开发者调优前端性能？-阿里云开发者社区

Web Vitals ：Google 如何定义性能指标及帮助开发者调优前端性能？

2020-11-12 2330

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 来自 Google 的Palances Liao 将在第十五届 D2 前端技术论坛带来《以全球 Web 角度谈前端性能的更新与趋势》主题演讲，与大家分享关于 Core Web Vitals 的最新指标及每个指标的更新。

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

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

Core Web Vitals

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

最大内容绘制评估页面主要内容可能已完成加载时的感知加载速度，并在页面加载时间轴上标记时间点。
首次输入延迟评估用户首次尝试与网页交互时的网页响应速度，并量化用户感知体验。
累积布局偏移评估可见页面内容的视觉稳定性，并量化内容的意外布局偏移量。

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

评估 Core Web Vitals

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

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

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

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