Web Vitals
通过内容集保持井井有条根据您的偏好保存内容并进行分类。

Philip Walton

发布时间：2020 年 5 月 4 日

优化用户体验质量是任何网站在 Web 上获得长期成功的关键。无论您是企业主、营销人员还是开发者，Web Vitals 都可以帮助您量化网站的体验并发现改进机会。

概览

Web Vitals 是 Google 推出的一项计划，旨在为对于在 Web 上提供出色用户体验至关重要的质量信号提供统一的指导。

多年来，Google 提供了许多工具来衡量和报告性能。一些开发者是使用这些工具的专家，而另一些开发者则发现工具和指标种类繁多，难以跟上。

网站所有者不必成为性能专家也能了解他们为用户提供的体验质量。Web Vitals 计划旨在简化现状，并帮助网站专注于最重要的指标，即 Core Web Vitals（核心 Web 指标）。

Core Web Vitals（核心 Web 指标）

Core Web Vitals（核心 Web 指标）是 Web Vitals 的子集，适用于所有网页，应由所有网站所有者衡量，并将显示在所有 Google 工具中。每个核心 Web 指标都代表用户体验的一个独特方面，可以在实际应用中进行衡量，并反映了关键以用户为中心的结果的真实体验。

构成 Core Web Vitals（核心 Web 指标）的指标会随着时间演变。当前的一组指标侧重于用户体验的三个方面 - 加载、互动性和视觉稳定性 - 包括以下指标（及其各自的阈值）：

Largest Contentful Paint threshold recommendations

Interaction to Next Paint threshold recommendations

Cumulative Layout Shift threshold recommendations

最大内容渲染时间 (LCP)：衡量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5 秒内发生。
与下次绘制的互动 (INP)：衡量互动性。为了提供良好的用户体验，页面的 INP 应为 200 毫秒或更短。
累积布局偏移 (CLS)：衡量视觉稳定性。为了提供良好的用户体验，页面应保持 CLS 为 0.1 或更低。

为了确保您为大多数用户达到了这些指标的建议目标，一个好的衡量阈值是页面加载的 第 75 百分位数，按移动设备和桌面设备进行细分。

评估 Core Web Vitals（核心 Web 指标）合规性的工具应考虑页面是否通过，如果该页面在所有三个核心 Web 指标中均达到第 75 百分位的建议目标。

生命周期

Core Web Vitals（核心 Web 指标）跟踪的指标会经历一个生命周期，该生命周期包含三个阶段：实验性、待定和稳定。

The three lifecycle phases of Core Web Vitals metrics, visualized as a series of three chevrons. From left to right, the phases are Experimental, Pending, and Stable. — 核心 Web 指标生命周期的各个阶段。

每个阶段都旨在向开发者表明他们应如何看待每个指标

实验性指标 是预期的 Core Web Vitals（核心 Web 指标），可能会根据测试和社区反馈进行重大更改。
待定指标 是未来的 Core Web Vitals（核心 Web 指标），已通过测试和反馈阶段，并具有明确的成为稳定指标的时间表。
稳定指标 是 Chrome 认为对于出色用户体验至关重要的当前 Core Web Vitals（核心 Web 指标）集。

Core Web Vitals（核心 Web 指标）处于以下生命周期阶段

LCP：稳定
CLS：稳定
INP：稳定

实验性

当最初开发一个指标并将其引入生态系统时，它被视为实验性指标。

实验性阶段的目的是评估指标的适用性，首先是探索要解决的问题，并可能迭代以前的指标未能解决的问题。例如，与下次绘制的互动 (INP) 最初是作为实验性指标开发的，旨在比首次输入延迟 (FID) 更全面地解决 Web 上存在的运行时性能问题。

Core Web Vitals（核心 Web 指标）生命周期的实验性阶段还旨在通过识别错误甚至探索对其初始定义的更改，来为指标的开发提供灵活性。这也是社区反馈最重要的阶段。

待定

当 Chrome 团队确定实验性指标已收到足够的反馈并证明其有效性时，它将成为待定指标。例如，INP 在 2023 年从实验性状态提升为待定状态，目的是最终停用 FID。

待定指标在此阶段至少保留六个月，以便生态系统有时间适应。社区反馈仍然是此阶段的重要方面，因为越来越多的开发者开始使用该指标。

稳定

当 Core Web Vitals（核心 Web 指标）候选指标最终确定后，它将成为稳定指标。这时，该指标可以成为 Core Web Vitals（核心 Web 指标）。

稳定指标受到积极支持，并且可能会进行错误修复和定义更改。稳定的核心 Web 指标每年更改次数不会超过一次。对核心 Web 指标的任何更改都将在指标的官方文档以及指标的更改日志中明确传达。核心 Web 指标也包含在任何评估中。

衡量和报告 Core Web Vitals（核心 Web 指标）的工具

Google 认为 Core Web Vitals（核心 Web 指标）对于所有 Web 体验都至关重要。因此，它致力于在其所有常用工具中显示这些指标。以下部分详细介绍了哪些工具支持 Core Web Vitals（核心 Web 指标）。

衡量 Core Web Vitals（核心 Web 指标）的实际应用工具

Chrome 用户体验报告收集每个 Core Web Vital（核心 Web 指标）的匿名化真实用户衡量数据。此数据使网站所有者能够快速评估其性能，而无需在其页面上手动配置分析，并为 Chrome 开发者工具、PageSpeed Insights 和 Search Console 的 Core Web Vitals（核心 Web 指标）报告等工具提供支持。

	LCP	INP	CLS
Chrome 用户体验报告
Chrome 开发者工具
PageSpeed Insights
Search Console（Core Web Vitals（核心 Web 指标）报告）

Chrome 用户体验报告提供的数据提供了一种快速评估网站性能的方法，但它不提供详细的、按页面浏览量划分的遥测数据，而这些数据通常对于准确诊断、监控和快速响应回归至关重要。因此，我们强烈建议网站设置自己的真实用户监控。

在 JavaScript 中衡量 Core Web Vitals（核心 Web 指标）

每个 Core Web Vital（核心 Web 指标）都可以在 JavaScript 中使用标准 Web API 进行衡量。

衡量所有 Core Web Vitals（核心 Web 指标）的最简单方法是使用 web-vitals JavaScript 库，这是一个小型的、可用于生产环境的包装器，围绕底层 Web API 构建，以准确匹配所有先前列出的 Google 工具报告这些指标的方式来衡量每个指标。

使用 web-vitals 库，只需调用一个函数即可衡量每个指标。请参阅文档以获取完整的用法和 API 详细信息。

import {onCLS, onINP, onLCP} 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});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

在您配置网站以使用 web-vitals 库来衡量 Core Web Vitals（核心 Web 指标）数据并将其发送到分析端点后，下一步是聚合和报告该数据，以查看您的页面是否在至少 75% 的页面访问中达到建议的阈值。

虽然一些分析提供商内置了对 Core Web Vitals（核心 Web 指标）指标的支持，但即使是那些没有内置支持的提供商也应包含基本自定义指标功能，使您可以在其工具中衡量 Core Web Vitals（核心 Web 指标）。

喜欢直接使用底层 Web API 衡量这些指标的开发者可以改用这些指标指南来获取实施细节

有关使用常用分析服务或您自己的内部分析工具衡量这些指标的其他指导，请参阅在实际应用中衡量 Web Vitals 的最佳实践。

衡量 Core Web Vitals（核心 Web 指标）的实验室工具

虽然所有 Core Web Vitals（核心 Web 指标）首先是实际应用指标，但其中许多指标也可以在实验室中衡量。

实验室衡量是在开发期间（在功能发布给用户之前）测试功能性能的最佳方法。它也是在性能回归发生之前捕获性能回归的最佳方法。

以下工具可用于在实验室环境中衡量 Core Web Vitals（核心 Web 指标）

	LCP	INP	CLS
Chrome 开发者工具
Lighthouse		（改用 TBT）

虽然实验室衡量是提供出色体验的重要组成部分，但它不能替代实际应用衡量。

网站的性能可能会因用户的设备功能、他们的网络条件、设备上可能正在运行的其他进程以及他们与页面的互动方式而发生很大变化。实际上，每个 Core Web Vitals（核心 Web 指标）的分数都可能受到用户互动的影响。只有实际应用衡量才能准确捕捉完整情况。

改进得分的建议

以下指南针对如何针对每个 Core Web Vital（核心 Web 指标）优化页面提供了具体建议

有很多方法可以改进 Core Web Vitals（核心 Web 指标），并且每种方法在每种情况下都具有不同的影响级别、相关性和易用性。有关 Chrome 团队的首要建议的简短列表，请参阅改进 Core Web Vitals（核心 Web 指标）的最有效方法。

其他 Web Vitals

虽然 Core Web Vitals（核心 Web 指标）是理解和提供出色用户体验的关键指标，但还有其他支持性指标。

这些其他指标可以用作三个 Core Web Vitals（核心 Web 指标）的代理或补充指标，以帮助捕获更大部分的体验或帮助诊断特定问题。

例如，指标 Time to First Byte (TTFB)（首字节时间）和 First Contentful Paint (FCP)（首次内容渲染时间）都是加载体验的重要方面，并且都有助于诊断 LCP 问题（服务器响应时间过慢或渲染阻塞资源，分别对应）。

同样，像 Total Blocking Time (TBT)（总阻塞时间）这样的实验室指标对于捕获和诊断可能影响 INP 的潜在互动性问题至关重要。但是，它不是 Core Web Vitals（核心 Web 指标）集的一部分，因为它们不可在实际应用中衡量，也不反映以用户为中心的结果。

Web Vitals 的更改

Web Vitals 和 Core Web Vitals（核心 Web 指标）代表了开发者今天拥有的衡量 Web 上体验质量的最佳可用信号，但这些信号并非完美，应预期未来会进行改进或添加。

Core Web Vitals（核心 Web 指标）与所有网页相关，并在相关的 Google 工具中突出显示。对这些指标的更改将产生广泛的影响；因此，开发者应预期 Core Web Vitals（核心 Web 指标）的定义和阈值是稳定的，并且更新将提前通知并具有可预测的年度节奏。

其他 Web Vitals 通常特定于上下文或工具，并且可能比 Core Web Vitals（核心 Web 指标）更具实验性。因此，它们的定义和阈值可能会更频繁地更改。

对于所有 Web Vitals，更改都将在本公开更改日志中明确记录。