概览 #

Web 指标是 Google 开创的一项新计划，旨在为网络质量信号提供统一指导，这些信号对于提供出色的网络用户体验至关重要。

多年来，Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行，而另一些开发者则发现大量的工具和指标令人应接不暇。

网站所有者要想了解他们提供给用户的体验质量，并非需要成为性能专家。 Web 指标计划旨在简化场景，帮助网站专注于最重要的指标，即核心 Web 指标 。

核心 Web 指标 #

核心 Web 指标是适用于所有网页的 Web 指标子集，每位网站所有者都应该测量这些指标，并且这些指标还将显示在所有 Google 工具中。每项核心 Web 指标代表用户体验的一个不同方面，能够进行实际测量，并且反映出以用户为中心的关键结果的真实体验。

核心 Web 指标的构成指标会随着时间的推移而发展 。当前针对 2020 年的指标构成侧重于用户体验的三个方面——加载性能、交互性和视觉稳定性——并包括以下指标（及各指标相应的阈值）：

• Largest Contentful Paint (LCP) ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。
• First Input Delay (FID) ：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
• Cumulative Layout Shift (CLS) ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。

为了确保您能够在大部分用户的访问期间达成建议目标值，对于上述每项指标，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。

如果一个页面满足上述全部三项指标建议目标值的第 75 个百分位数，那么评估核心 Web 指标合规性的工具应评判该页面为通过。

测量和报告核心 Web 指标的工具 #

核心 Web 指标对一切网络体验都至关重要，以下部分详细介绍了支持核心 Web 指标的工具。

核心 Web 指标的实测工具 #

Chrome 用户体验报告为每项核心 Web 指标收集匿名的真实用户测量数据。这些数据既能使网站所有者快速进行性能评估，而无需在页面上进行手动检测分析，也能同时为PageSpeed Insights 网页速度测量工具和搜索控制台的核心 Web 指标报告等工具提供支持。

Chrome 用户体验报告提供的数据带来了一种快速评估网站性能的方法，但这些数据没有提供详细的、对应每页浏览量的遥测数据，而这些通常是对回归进行准确诊断、监控，以及做出迅速反应的必要数据。因此，我们强烈建议网站搭建自己的真实用户监控。

在 JavaScript 中测量核心 Web 指标 #

每项核心 Web 指标都可以通过使用标准网页 API 在 JavaScript 中进行测量。

测量所有核心 Web 指标，最简单的方法是使用web-vitals JavaScript 库，这是一个围绕底层网页 API 的小型的、生产就绪的封装器，通过准确匹配每项指标在上方列出的所有 Google 工具中的报告方式来进行指标测量。

通过使用web-vitals库，测量每项指标就像调用单个函数一样简单（有关完整用法和API详情，请参阅文档）：

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('/****ytics', body)) ||
      fetch('/****ytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

当您将网站配置为使用web-vitals库来测量您的核心 Web 指标数据并将其发送到分析端后，下一步是对数据进行汇总和报告，从而查看您的页面是否在至少 75% 的页面访问中都满足建议阈值。

一些分析工具供应商已经内置了核心 Web 指标支持，但即使是那些没有内置支持的供应商也应该包含基本的自定义指标功能，让您能够使用他们的工具来测量核心 Web 指标。

Web 指标报告就是其中一个例子，它使网站所有者能够使用 Google 分析来测量他们的核心 Web 指标。了解使用其他分析工具测量核心 Web 指标的相关指南，请参阅实测 Web 指标的最佳实践。

您还可以使用Web 指标 Chrome 扩展程序来报告每项核心 Web 指标，且无需编写任何代码。该扩展程序使用web-vitals库来测量每一项指标，并在用户浏览网页时呈现给用户。

此扩展程序有助于您了解自己的网站、竞争对手的网站和整个网络的性能。

此外，倾向于直接通过底层网页 API 来测量这些指标的开发者可以参考这些指标指南，从而了解执行详情：

• 在 JavaScript 中测量 LCP
• 在 JavaScript 中测量 FID
• 在 JavaScript 中测量 CLS

核心 Web 指标的实验室测量工具 #

虽然所有的核心 Web 指标首先都是实测指标，但其中的许多指标也可以在实验室中进行测量。

实验室测量是在开发过程中（功能发布给用户之前）测试功能性能的最佳方式，也是在性能回归发生之前及时捕获的最佳方式。

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

虽然实验室测量对于提供出色的体验至关重要，但它不能替代实际测量。

根据用户设备功能、网络状况、设备上可能正在运行的其他进程以及与页面交互方式的差别，网站性能也可能会有很大差异。事实上，每项核心 Web 指标的得分都会受到用户交互的影响。只有通过实际测量才能准确获取全貌。

提高分数的建议 #

当您测量了核心 Web 指标并确定了需要改进的领域后，下一步就是优化。以下指南提供了如何针对每项核心 Web 指标优化页面的具体建议：

• 优化 LCP
• 优化 FID
• 优化 CLS

其他 Web 指标 #

虽然核心 Web 指标是理解并提供出色用户体验的关键指标，但还有其他的一些重要指标。

其他 Web 指标通常用作核心 Web 指标的代理或补充指标，有助于获取范围更广的体验或帮助诊断特定的问题。

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

同样，总阻塞时间 (TBT)和Time to Interactive 可交互时间 (TTI)等指标是实验室指标，对于捕获和诊断会对 FID 产生影响的潜在交互性问题至关重要。然而，这些指标不是核心 Web 指标的一部分，因为它们无法进行实际测量，也不反映以用户为中心的结果。

不断发展的 Web 指标 #

Web 指标和核心 Web 指标代表了当今开发者用来测量网络体验质量的最佳可用信号，但这些信号并不完美，并且会在未来不断进行改进或补充。

核心 Web 指标与所有网页都息息相关，并且已经显示在相关的 Google 工具中。这些指标的变化将产生广泛的影响，因此，开发者应当认为核心 Web 指标的定义和阈值是稳定的，并且会以可预测的、每年一次的更新节奏提前发布更新通知。

其他 Web 指标通常适用于特定情景或工具，并且可能比核心 Web 指标更具实验性。因此，这些指标的定义和阈值可能会有更频繁的更改。