Web Vitals

Philip Walton

“网页指标”是 Google 的一项计划，旨在针对网页质量信号提供统一指南，这些信号对于提供出色的网页用户体验至关重要。它的目标是简化各种可用的性能测量工具，并帮助网站所有者专注于最重要的指标，即核心网页指标。

核心网页指标

核心网页指标是适用于所有网页的部分网页指标，应由所有网站所有者进行衡量，并且会在所有 Google 工具中显示。每个核心网页指标都代表用户体验的一个不同方面，在实际应用中是可衡量的，并且反映了以用户为中心的关键结果的真实体验。

构成 Core Web Vitals 的指标会随着时间的推移而演变。当前这组策略侧重于用户体验的三个方面：加载、互动和视觉稳定性。它包括以下指标：

Largest Contentful Paint 阈值建议 First Input Delay 阈值建议 有关 Cumulative Layout Shift 阈值的建议

对于上述每个指标，为了确保您达到针对大多数用户的推荐目标，最好衡量一下网页加载的第 75 个百分位（按移动设备和桌面设备细分）。

如果网页在这三个指标的第 75 个百分位处达到建议的目标，用于评估 Core Web Vitals 合规性的工具应认为该网页符合规定。

生命周期

Core Web Vitals 轨道上的指标经历了一个由三个阶段组成的生命周期：实验性、待处理和稳定版。

Core Web Vitals 指标的三个生命周期阶段，以一系列的三个 V 形直观呈现。从左到右，这三个阶段分别是实验性阶段、待处理阶段和稳定版。
核心网页指标生命周期的各个阶段。

每个阶段旨在向开发者表明应如何看待各项指标：

  • 实验性指标是前瞻性的核心网页指标，目前可能仍在进行重大更改，具体取决于测试和社区反馈。
  • 待处理指标是指已通过测试和反馈阶段且明确确定了稳定日期的未来核心网页指标。
  • 稳定的指标是目前 Chrome 认为对提供出色用户体验至关重要的一组核心网页指标。

核心网页指标处于以下生命周期阶段：

如需详细了解 INP 的开发，请参阅 Advancing Interaction to Next Paint。

实验性功能

指标最初开发并进入生态系统时，会被视为实验性指标。

实验阶段的目的是评估指标的适合度，首先探索要解决的问题，然后可能对之前可能无法解决的指标进行迭代。例如，INP 最初只是作为一项实验性指标开发的，旨在比首次输入延迟 (FID) 更全面地解决 Web 的运行时性能问题。

Core Web Vitals 生命周期的实验阶段还旨在通过发现错误甚至探索对初始定义的更改来灵活地开发指标。同时，社区反馈也是最重要的阶段。

等待中

当 Chrome 团队确定某个实验性指标已收到足够的反馈并证明其有效性后，该指标就会成为待处理指标。待处理指标在此阶段保留至少六个月，给生态系统留出适应时间。随着越来越多的开发者开始使用该指标，社区反馈仍然是这一阶段的一个重要方面。

稳定

当 Core Web Vitals 候选指标最终确定后，便会成为稳定的指标。这时，该指标就可以成为 Core Web Vitals 指标。

稳定指标受到积极支持，可能会进行 bug 修复和定义更改。稳定版 Core Web Vitals 指标每年的变化不超过一次。对核心 Web 指标所做的任何更改都将在指标的官方文档以及指标的更新日志中明确传达。核心 Web Vitals 也会纳入所有评估中。

要点：稳定的指标不一定是永久性的。某个稳定的指标可以弃用，并替换为另一个可更有效地解决问题方面的指标。

衡量和报告核心网页指标

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

衡量 Core Web Vitals 的实际工具

Chrome 用户体验报告会针对每个 Core Web Vitals，收集经过匿名化处理的真实用户衡量数据。借助这些数据，网站所有者无需手动为网页设置分析功能即可快速评估网站性能，还可为 PageSpeed Insights 和 Search Console 的“核心网页指标”报告等工具提供支持。

  LCP FID CLS
Chrome 用户体验报告
PageSpeed Insights
Search Console（“核心网页指标”报告）

Chrome 用户体验报告提供的数据可让您快速评估网站性能，但它未提供详细、每页浏览的遥测数据，而这通常是准确诊断、监控和快速应对性能下降问题所必需的。因此，我们强烈建议网站自行设置实时用户监控功能。

使用 JavaScript 衡量核心网页指标

每个核心网页指标都可以使用标准 Web API 在 JavaScript 中进行衡量。

若要衡量所有核心网页指标，最简单的方法是使用 web-vitals JavaScript 库，这是一种可直接用于生产环境的小型 API 封装容器，用于衡量每项指标，方式与 Google 工具报告这些指标的方式完全一致。

借助 web-vitals 库，测量每个指标就像调用单个函数一样简单（如需查看完整的用法和 API 详情，请参阅相关文档）：

import {onCLS, onFID, 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);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

将网站配置为使用 web-vitals 库衡量核心网页指标数据并将其发送到分析端点后，下一步是汇总这些数据并生成报告，查看您的网页是否至少有 75% 的网页访问达到建议的阈值。

虽然有些分析服务提供商已经内置对 Core Web Vitals 指标的支持，但即使那些分析服务提供商不应该包含基本的自定义指标功能，您也应该能够在他们的工具中衡量核心网页指标。

例如网页指标报告，网站所有者可以使用 Google Analytics（分析）衡量其核心网页指标。如需了解如何使用其他分析工具衡量 Core Web Vitals，请参阅衡量实际网页指标的最佳实践。

您还可以使用 Web Vitals Chrome 扩展程序报告每个核心网页指标，而无需编写任何代码。此扩展程序使用 web-vitals 库来衡量上述各项指标，并在用户浏览网页时向其显示这些指标。

此扩展程序有助于您了解自己的网站、竞争对手的网站以及整个网络的效果。

  LCP FID CLS
网页指标
Web Vitals 扩展程序

如果开发者更喜欢使用底层 Web API 直接衡量这些指标，可以改为使用这些指标指南来了解实现详情：

如需详细了解如何使用热门分析服务或您自己的内部分析工具来衡量这些指标，请参阅衡量实际使用网页指标的最佳实践。

用于衡量核心网页指标的实验室工具

虽然所有核心网页指标最重要的都是实测指标，但其中许多指标也可在实验室中衡量。

实验室测量是在开发过程中测试功能性能的最佳方式。它也是在性能下降问题发生之前就发现的最佳方法。

以下工具可用于在实验室环境中衡量核心网页指标：

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

Lighthouse 等工具在没有用户的情况下在模拟环境中加载页面，因此无法衡量 FID，因为它们没有用户输入。不过，总阻塞时间 (TBT) 指标可通过实验室衡量，是 FID 的绝佳代理。在实验室中优化 TBT 的性能优化应该会改善现场 FID。如需获取更多指导，请参阅关于提高得分的建议。

虽然实验室测量是提供出色体验的重要组成部分，但它不能替代现场测量。根据用户的设备功能、网络条件、设备上运行的其他进程以及用户与网页互动的方式，网站的性能可能会有很大变化。事实上，每个 Core Web Vitals 指标的得分都会受到用户互动的影响。只有现场测量才能准确捕获完整信息。

提高分数的建议

以下指南提供了有关如何针对每个核心网页指标优化网页的具体建议：

其他网页指标

虽然核心网页指标是了解并提供出色用户体验的关键指标，但也有一些重要指标。

这些其他网页指标通常用作 Core Web Vitals 的代理或补充指标，有助于捕获更广泛的体验或诊断特定问题。

例如，首字节时间 (TTFB) 和首次内容绘制 (FCP) 都是加载体验的重要方面，并且都有助于诊断 LCP 问题（服务器响应时间过长或阻塞渲染的资源）。

同样，Total Blocking Time (TBT) 等指标也是重要的实验室指标，用于捕获和诊断可能影响 FID 和 INP 的潜在互动问题。不过，它不在核心网页指标设置范围内，因为它不可现场衡量，也不反映以用户为中心的结果。

网页指标发生变化

“网页指标”和“核心网页指标”是开发者目前可用于衡量网络体验质量的最佳信号，但这些信号还不够完美，未来将有改进或增加的功能。

核心网页指标与所有网页相关，并在相关 Google 工具中展示。由于这些指标的变化具有广泛的影响，因此开发者应该预料到 Core Web Vitals 的定义和阈值稳定，并且会提前发出通知和可预测的更新时间表。

其他网页指标通常因上下文或工具而异，并且比核心网页指标更具实验性。因此，它们的定义和阈值可能会随着频率的变化而变化。

对于所有网页指标，相应更改都会记录在此公开更新日志中。