核心网页指标阈值背后的研究和方法
核心网页指标是一组实测指标，用于衡量网页实际用户体验的重要方面。Core Web Vitals 包含指标以及每个指标的目标阈值，可帮助开发者从定性角度了解其网站体验是“良好”“需要改进”还是“较差”。这篇博文将介绍一般用于为 Core Web Vitals 指标选择阈值的方法，以及如何为每个特定 Core Web Vitals 指标选择阈值。
知识回顾：Core Web Vitals 指标和阈值
2020 年，核心网页指标有三个指标：Largest Contentful Paint (LCP)、First Input Delay (FID) 和 Cumulative Layout Shift (CLS)。每个指标衡量用户体验的不同方面：LCP 衡量感知到的加载速度，并在网页加载时间轴中标记页面主要内容可能已加载的时间点；FID 用于衡量响应速度，并量化用户尝试首次与网页互动时的感受；而 CLS 则用于衡量视觉稳定性，并量化可见网页内容的意外布局偏移的数量。
每个 Core Web Vitals 指标都有关联的阈值，这些阈值将性能分为“良好”“需要改进”或“欠佳”：
| 不错 | 差 | 百分位 | |
|---|---|---|---|
| 最大内容渲染时间 | 不超过 2500 毫秒 | >4000 毫秒 | 75 |
| First Input Delay | ≤ 100 毫秒 | >300 毫秒 | 75 |
| 累积布局偏移 | ≤0.1 | >0.25 | 75 |
此外，为了对网页或网站的整体性能进行分类，我们会使用该网页或网站的所有网页浏览量的第 75 百分位值。换言之，如果某个网站至少有 75% 的网页浏览量符合“良好”阈值，则对于该指标，该网站就会被归类为具有“良好”效果。相反，如果至少有 25% 的网页浏览量满足“较差”阈值，则该网站就会被归类为“效果不佳”。例如，第 75 个百分位 2 秒的 LCP 将归类为“良好”，而第 75 个百分位的 LCP 为 5 秒则归类为“欠佳”。
Core Web Vitals 指标阈值的条件
在为 Core Web Vitals 指标创建阈值时，我们首先确定了每个阈值必须满足的条件。下面我将解释 Google 用于评估 2020 年 Core Web Vitals 指标阈值的标准。后续部分将详细介绍在 2020 年如何运用这些条件选择每个指标的阈值。未来几年，我们预计会改进并补充相关标准和阈值，以进一步提高我们衡量出色网络用户体验的能力。
出色的用户体验
我们的主要目标是为用户及其体验质量进行优化。 因此，我们的目标是确保达到 Core Web Vitals“良好”阈值的网页提供优质的用户体验。
为了确定与优质用户体验相关的阈值，我们会研究人类感知和 HCI 研究。虽然这项研究有时会使用单个固定阈值进行总结，但我们发现基础研究通常表示为一系列值。例如，关于用户在失去焦点之前通常会等待的时间的研究有时被描述为 1 秒，而底层研究实际上表示为一个范围，从几百毫秒到几秒。经过汇总和匿名化处理的 Chrome 指标数据进一步支持了用户感知的认知阈值会因用户和上下文而异，这一事实表明，在中止网页加载之前，用户不会等待网页显示内容。相反，这些数据显示出平滑且连续的分布。如需更深入地了解人类感知阈值和相关的 HCI 研究，请参阅 Web Vitals 背后的科学研究。
如果可以对给定指标进行相关用户体验研究，并且对文献中的值范围达成合理共识，我们会使用此范围作为输入来指导阈值选择流程。如果没有相关用户体验研究（例如，对于 Cumulative Layout Shift 等新指标），我们会改为评估满足某个指标的不同候选阈值的实际网页，以确定可带来良好用户体验的阈值。
可通过现有 Web 内容实现
此外，为了确保网站所有者能够成功优化其网站，达到“良好”阈值，我们要求网络上的现有内容必须达到这些阈值。例如，虽然零毫秒是可以带来即时加载体验的理想 LCP“良好”阈值，但由于网络和设备处理延迟，在大多数情况下，零毫秒的阈值实际上无法实现。因此，对于 Core Web Vitals，零毫秒并不是一个合理的 LCP“良好”阈值。
在评估核心网页指标候选“良好”阈值时，我们会根据 Chrome 用户体验报告 (CrUX) 中的数据验证是否可实现这些阈值。为了确认阈值可实现，我们要求目前至少有 10% 的来源达到“良好”阈值。此外，为了确保精心优化的网站不会由于现场数据的变化而分类错误，我们还会验证优化内容是否始终满足“良好”阈值。
相反，我们会通过确定只有少数源目前未达到的性能水平，来确立“差”阈值。除非有与定义“欠佳”阈值相关的研究数据，否则默认情况下，效果最差的 10-30% 源会被归类为“欠佳”。
关于条件的总结
在评估候选阈值时，我们发现条件有时互相冲突。例如，始终能够实现阈值与始终确保良好的用户体验之间可能存在紧张关系。此外，鉴于人类感知研究通常会提供一系列值，并且用户行为指标会显示逐渐变化的行为，因此我们发现指标通常没有单个“正确”阈值。因此，我们制定 2020 年核心网页指标的策略是选择最符合上述标准的阈值，同时要认识到并不存在完美的阈值，我们有时可能需要从多个合理的候选阈值中进行选择。我们不会问“完美的阈值是什么？”，而是专注于询问“哪个候选阈值最符合我们的标准？”
百分位数选择
如前所述，为了对网页或网站的整体性能进行分类，我们会使用该网页或网站的所有访问的第 75 百分位值。第 75 百分位是根据两个条件选择的。首先，百分位数应确保对网页或网站的大多数访问都达到了目标性能水平。其次，所选百分位处的值不应受到离群值的过度影响。
这两个目标有些不一致。为了满足第一个目标，通常较高的百分位数通常是更好的选择。但是，百分位数越高，生成的值受离群值影响的可能性也会增加。如果对网站的几次访问恰好使用的是不稳定的网络连接，从而导致 LCP 样本过大，我们不希望由这些离群样本决定网站分类。例如，如果我们使用高百分位（如第 95 百分位）评估一个有 100 次访问的网站的性能，那么第 95 个百分位值只需要 5 个离群样本即可受到这些离群值的影响。
鉴于这些目标有点矛盾，经过分析，我们得出第 75 百分位的合理平衡。通过使用第 75 个百分位，我们知道网站的大多数访问（3/4）都达到了目标性能水平或更高。此外，第 75 百分位值不太可能受离群值影响。回到我们的示例，对于访问量为 100 次的网站，其中 25 次访问需要报告第 75 个百分位处的较大离群样本，才能受离群值影响。虽然 100 个样本中有 25 个可能出现离群值，但与第 95 百分位的情况相比，这种可能性要低得多。
最大内容渲染时间
体验质量
1 秒通常指用户在开始无法专注于某项任务之前需等待的时间。在进一步检查相关研究后，我们发现 1 秒是描述一系列值的近似值，范围从几百毫秒到几秒不等。
关于 1 秒阈值的两个常见引用来源是 Card etal 和 Miller。Card 引用了 Newell 的认知统一理论，定义了 1 秒的“立即响应”阈值。Newell 将立即响应解释为“必须在大约一秒（即大约从大约 0.3 秒到大约 3 秒）内对某些刺激作出的响应”。继此，Newell 在关于“认知的实时限制”的讨论中指出，“与环境的互动会引起认知，大约几秒钟的时间，范围约为 0.5 到 2-3 秒。Miller 是另一个经常提到的关于 1 秒阈值的问题来源，他指出：“如果响应延迟超过 2 秒，人类可以并且将通过机器通信执行的任务将严重改变其性质，有些任务可能会延长 1 秒左右。”
Miller 和 Card 的研究描述了用户在失去焦点之前将等待的时间，范围大约为 0.3 到 3 秒，表明我们的 LCP“良好”阈值应在此范围内。此外，由于现有的 First Contentful Paint 的“良好”阈值为 1 秒，并且 Largest Contentful Paint 通常发生在 First Contentful Paint 之后，因此我们会进一步限制候选 LCP 阈值的范围，从 1 秒到 3 秒。为了在此范围内选择最符合我们标准的阈值，我们会在下面查看这些候选阈值的实现性。
可实现性
使用 CrUX 中的数据，我们可以确定 Web 上符合候选 LCP“良好”阈值的源所占的百分比。
归类为“良好”的 CrUX 来源所占的百分比（针对候选 LCP 阈值）
| 1 秒 | 1.5 秒 | 2 秒 | 2.5 秒 | 3 秒 | |
|---|---|---|---|---|---|
| phone | 3.5% | 13% | 27% | 42% | 55% |
| 桌面设备 | 6.9% | 19% | 36% | 51% | 64% |
虽然只有不到 10% 的源满足 1 秒阈值，但从 1.5 秒到 3 秒的所有其他源满足我们的要求，即至少有 10% 的源满足“良好”阈值，因此仍然是有效的候选内容。
此外，为了确保经过精心优化的网站始终能够达到所选的阈值，我们会分析网络中表现最佳的网站的 LCP 性能，以确定这些网站始终可以达到哪些阈值。具体而言，我们的目标是为表现出色的网站确定可在第 75 百分位始终达到的阈值。我们发现，并不总是可以达到 1.5 秒和 2 秒阈值，而始终可以实现 2.5 秒。
为了确定 LCP 的“不佳”阈值，我们使用 CrUX 数据来确定大多数源达到的阈值：
归类为“欠佳”的 CrUX 来源所占的百分比（针对候选 LCP 阈值）
| 3 秒 | 3.5 秒 | 4 秒 | 4.5 秒 | 5 秒 | |
|---|---|---|---|---|---|
| phone | 45% | 35% | 26% | 20% | 15% |
| 桌面设备 | 36% | 26% | 19% | 14% | 10% |
对于 4 秒的阈值，大约 26% 的电话来源和 21% 的桌面设备来源会被归类为“不佳”。这属于我们的目标范围 (10-30%)，因此我们得出结论，4 秒是可接受的“较差”阈值。
因此，我们得出结论，2.5 秒是一个合理的“良好”阈值，而 4 秒是一个合理的“欠佳”阈值，适用于 Largest Contentful Paint。
First Input Delay
体验质量
研究得出的结论是，长达 100 毫秒的视觉反馈延迟可被认为是由相关来源（例如用户输入）导致的。这表明，100 毫秒 First Input Delay 的“良好”阈值作为一个最低标准，可能是合适的：如果处理输入的延迟时间超过 100 毫秒，其他处理和渲染步骤没有机会及时完成。
Jakob Nielsen 经常提到的响应时间：3 个重要限制将 0.1 秒定义为让用户感觉系统瞬时响应的限制。Nielsen 引用了 Miller 和 Card，他们引用了 Michotte 在 1962 年发表的 The Perception of Causality（因果感知）。在 Michotte 的研究中，实验参与者“在屏幕上看到两个物体。对象 A 离开并向 B 移动。它在与 B 接触时停止，而后者开始并与 B 接触。”Michotte 更改了对象 A 停止与对象 B 开始移动之间的时间间隔。Michotte 发现，对于长达约 100 毫秒的延迟，参与者会感觉到对象 A 导致对象 B 的运动。对于从大约 100 毫秒到 200 毫秒的延迟，对因果关系的感知会混淆；对于超过 200 毫秒的延迟，对象 B 的运动不再被视为由对象 A 引起。
同样，Mler 将“对控件激活的响应”定义为“响应阈值”，通常通过移动按键、开关或其他控制部件来指示其已进行物理激活。应...将这种响应视为操作者诱导的机械操作的一部分。时间延迟：不超过 0.1 秒”，之后“按下按键与视觉反馈之间的延迟时间不应超过 0.1 到 0.2 秒”。
最近，在 Towards the Temporally Perfect Virtual Button 一书中，Kaaresoja 等人研究了针对各种延迟情况，从触摸触摸屏上的虚拟按钮到后续的视觉反馈中，存在同时性感知。当按下按钮与视觉反馈之间的延迟时间为 85 毫秒或更短时，参与者表示，在按下按钮的 75% 的情况下，视觉反馈同时出现了。此外，对于 100 毫秒或更短的延迟时间，参与者报告称的按钮按下动作感知到始终较高的质量，并且感知质量在 100 毫秒到 150 毫秒的延迟期间下降，而达到极低的延迟级别为 300 毫秒。
基于上述情况，我们得出结论：该研究指出，一个值范围约为 100 毫秒，是网页指标的适当 First Input Delay 阈值。此外，鉴于用户报告说延迟达到 300 毫秒或更长时间，质量水平较低，而 300 毫秒就属于合理的“欠佳”阈值。
可实现性
根据 CrUX 中的数据，我们确定网络上的大多数源站在第 75 个百分位处满足 100 毫秒的 FID“良好”阈值：
在 FID 100 毫秒阈值下归类为“良好”的 CrUX 来源所占的百分比
| 100 毫秒 | |
|---|---|
| phone | 78% |
| 桌面设备 | >99% |
此外，我们还观察到，网络中的顶级网站能够在第 75 百分位始终达到此阈值（并且经常在第 95 百分位达到此阈值）。
基于上述情况，我们得出结论，100 毫秒是一个合理的 FID “良好”阈值。
累积布局偏移
体验质量
Cumulative Layout Shift (CLS) 是一项新指标，用于衡量页面的可见内容偏移的程度。鉴于 CLS 是一项新功能，我们不知道能够直接确定该指标阈值的研究。因此，为了确定符合用户预期的阈值，我们评估了具有不同布局偏移的实际网页，以确定在浏览网页内容时造成严重中断之前，用户认为可接受的最大偏移量。在我们的内部测试中，我们发现，从 0.15 及以上范围内的变化程度始终被认为具有干扰性，而 0.1 及以下的变动幅度则很明显，但不会过度干扰。因此，虽然零布局偏移是理想情况，但我们推断值为不高于 0.1 的候选 CLS 阈值是“良好”的 CLS 阈值。
可实现性
根据 CrUX 数据，我们可以看到近 50% 的来源的 CLS 不超过 0.05。
归类为“良好”的 CrUX 来源所占的百分比（针对候选 CLS 阈值）
| 0.05 | 0.1 | 0.15 | |
|---|---|---|---|
| phone | 49% | 60% | 69% |
| 桌面设备 | 42% | 59% | 69% |
虽然 CrUX 数据表明，0.05 可能是一个合理的 CLS“良好”阈值，但我们知道，有一些用例目前难以避免干扰性的布局偏移。例如，对于社交媒体嵌入之类的第三方嵌入式内容，嵌入内容的高度有时在完成加载之前不知道，这可能会导致布局偏移大于 0.05。因此，我们得出结论：虽然许多源站都达到了 0.05 的阈值，但不太严格的 CLS 阈值 0.1 可以更好地在体验质量和可实现性之间取得平衡。未来，我们希望 Web 生态系统能够找到解决方案来应对由第三方嵌入导致的布局偏移，从而允许在未来的 Core Web Vitals 迭代中使用更严格的 CLS“良好”阈值 (0.05 或 0)。
此外，为了确定 CLS 的“低”阈值，我们使用 CrUX 数据来确定大多数来源满足的阈值：
归类为“欠佳”的 CrUX 来源所占的百分比（针对候选 CLS 阈值）
| 0.15 | 0.2 | 0.25 | 0.3 | |
|---|---|---|---|---|
| phone | 31% | 25% | 20% | 18% |
| 桌面设备 | 31% | 23% | 18% | 16% |
以 0.25 的阈值而言，大约 20% 的手机来源和 18% 的桌面设备来源会被归类为“欠佳”。这个比例在我们的目标范围 (10-30%) 内，因此我们认为 0.25 是可接受的“较差”阈值。