Core Web Vitals 阈值背后的研究和方法
发布时间：2020 年 5 月 21 日
Core Web Vitals 是一组现场指标，用于衡量网络上真实世界用户体验的重要方面。Core Web Vitals 包括指标以及每个指标的目标阈值，这些阈值可帮助开发者定性地了解其网站的体验是“良好”、“需要改进”还是“不良”。本文将解释用于大致选择 Core Web Vitals 指标阈值的方法，以及如何选择每个特定 Core Web Vitals 指标的阈值。
回顾：Core Web Vitals 指标和阈值
Core Web Vitals 是三个指标：最大内容ful 渲染 (LCP)、与下次渲染的互动 (INP) 和累积布局偏移 (CLS)。每个指标衡量用户体验的不同方面：LCP 衡量感知加载速度，并标记页面加载时间轴中页面主要内容可能已加载的时间点；INP 衡量响应速度，并量化用户尝试与页面互动时的感受；CLS 衡量视觉稳定性，并量化可见页面内容的意外布局偏移量。
每个 Core Web Vitals 指标都有相关的阈值，这些阈值将性能分为“良好”、“需要改进”或“不良”
| 良好 | 不良 | 百分位数 | |
|---|---|---|---|
| 最大内容ful 渲染 | ≤2500 毫秒 | >4000 毫秒 | 75 |
| 与下次渲染的互动 | ≤200 毫秒 | >500 毫秒 | 75 |
| 累积布局偏移 | ≤0.1 | >0.25 | 75 |
此外，为了对页面或网站的整体性能进行分类，我们使用该页面或网站所有网页浏览量的第 75 个百分位数。换句话说，如果至少 75% 的网站网页浏览量达到“良好”阈值，则该网站被归类为在该指标方面具有“良好”性能。相反，如果至少 25% 的网页浏览量达到“不良”阈值，则该网站被归类为具有“不良”性能。因此，例如，第 75 个百分位数的 LCP 为 2 秒被归类为“良好”，而第 75 个百分位数的 LCP 为 5 秒被归类为“不良”。
Core Web Vitals 指标阈值的标准
在本节中，我们将了解评估 Core Web Vitals 指标阈值的标准。后续章节将更详细地介绍如何应用这些标准来选择每个指标的阈值。在未来几年，我们预计将改进和补充标准和阈值，以进一步提高我们衡量网络上出色用户体验的能力。
高质量的用户体验
我们的首要目标是优化用户及其体验质量。鉴于此，我们的目标是确保满足 Core Web Vitals “良好”阈值的页面提供高质量的用户体验。
为了确定与高质量用户体验相关的阈值，我们着眼于人类感知和 HCI 研究。虽然这项研究有时使用单个固定阈值进行概括，但我们发现，基础研究通常表示为一系列值。例如，关于用户在失去注意力之前通常等待的时间量的研究有时被描述为 1 秒，而基础研究实际上表示为范围，从数百毫秒到几秒。用户和上下文感知阈值不同的事实进一步得到了汇总和匿名化的 Chrome 指标数据的支持，该数据表明，用户在网页显示内容之前中止页面加载的时间量并非单一。相反，此数据表明平滑且连续的分布。有关人类感知阈值和相关 HCI 研究的更深入了解，请参阅Web Vitals 背后的科学。
如果在给定指标方面有相关的用户体验研究，并且文献中对值的范围有合理的共识，我们会将此范围用作指导阈值选择过程的输入。如果相关用户体验研究不可用（例如，对于像累积布局偏移这样的新指标），我们会评估满足指标不同候选阈值的真实世界页面，以确定产生良好用户体验的阈值。
现有 Web 内容可以实现
此外，为了确保网站所有者可以成功优化其网站以满足“良好”阈值，我们要求这些阈值对于网络上的现有内容是可实现的。例如，虽然零毫秒是理想的 LCP “良好”阈值，从而产生即时加载体验，但在大多数情况下，由于网络和设备处理延迟，零毫秒阈值实际上是无法实现的。因此，零毫秒不是 Core Web Vitals 的合理 LCP “良好”阈值。
在评估候选 Core Web Vitals “良好”阈值时，我们会根据Chrome 用户体验报告 (CrUX) 中的数据验证这些阈值是否可实现。为了确认阈值是可实现的，我们要求至少 10% 的来源满足“良好”阈值。此外，为了确保优化良好的网站不会因现场数据的可变性而被错误分类，我们还会验证优化良好的内容是否始终满足“良好”阈值。
相反，我们通过识别只有少数来源未达到的性能水平来建立“不良”阈值。除非有与定义“不良”阈值相关的研究，否则默认情况下，性能最差的 10-30% 的来源被归类为“不良”。
是否对每个设备采用相同或不同的标准
移动设备和桌面设备的使用在设备功能和网络可靠性方面通常具有非常不同的特征。这严重影响了“可实现性”标准，因此建议我们应考虑为每个设备设置单独的阈值。
但是，用户对良好或不良体验的期望并不取决于设备，即使可实现性标准是这样。出于这个原因，Core Web Vitals 建议的阈值不按设备划分，并且桌面设备和移动设备使用相同的阈值。这也具有使阈值更易于理解的额外好处。
此外，设备并不总是能很好地归入一个类别。这应该基于设备外形尺寸、处理能力还是网络条件？使用相同的阈值具有避免这种复杂性的附带好处。
移动设备的更多限制性质意味着大多数阈值因此是基于移动设备的可实现性来设置的。它们更可能代表移动设备阈值，而不是跨所有设备类型的真正联合阈值。但是，鉴于移动设备通常是大多数网站的大部分流量，因此这不太令人担忧。
关于标准的最终想法
在评估候选阈值时，我们发现这些标准有时彼此冲突。例如，阈值始终可实现与确保始终良好的用户体验之间可能存在张力。此外，鉴于人类感知研究通常提供一系列值，并且用户行为指标显示行为的逐渐变化，我们发现对于指标而言通常没有单一的“正确”阈值。因此，我们针对 Core Web Vitals 的方法是选择最符合标准的阈值，同时认识到没有完美的阈值，并且我们有时可能需要从多个合理的候选阈值中进行选择。我们没有问“什么是完美的阈值？”，而是专注于问“哪个候选阈值最能实现我们的标准？”
百分位数的选择
如前所述，为了对页面或网站的整体性能进行分类，我们使用该页面或网站所有访问量的第 75 个百分位数。选择第 75 个百分位数是基于两个标准。首先，百分位数应确保大多数访问页面或网站的访问量都体验到目标性能水平。其次，所选百分位数的值不应受到异常值的不利影响。
这些目标在某种程度上是相互矛盾的。为了满足第一个目标，通常选择较高的百分位数是更好的选择。但是，对于较高的百分位数，结果值受到异常值影响的可能性也会增加。如果对网站的少数访问恰好发生在不稳定的网络连接上，这会导致过大的 LCP 样本，我们不希望我们的网站分类由这些异常值样本决定。例如，如果我们使用较高的百分位数（例如第 95 个百分位数）评估具有 100 次访问的网站的性能，则只需 5 个异常值样本就会影响第 95 个百分位数的值。
鉴于这些目标有点相互矛盾，经过分析，我们得出结论，第 75 个百分位数达到了合理的平衡。通过使用第 75 个百分位数，我们知道大多数访问网站的访问量（四分之三）都体验到了目标性能水平或更好。此外，第 75 个百分位数的值不太可能受到异常值的影响。回到我们的示例，对于一个访问量为 100 次的网站，需要 25 个访问量报告大的异常值样本，第 75 个百分位数的值才会受到异常值的影响。虽然 100 个样本中有 25 个是异常值是可能的，但它远低于第 95 个百分位数的情况。
最大内容ful 渲染
LCP 阈值是根据以下体验质量和可实现性考虑因素设置的。
体验质量
1 秒通常被认为是用户在开始对任务失去注意力之前等待的时间量。在更仔细地检查相关研究后，我们发现 1 秒是描述一系列值的近似值，从大约几百毫秒到几秒不等。
1 秒阈值的两个常用来源是 Card 等人和 Miller。Card 定义了 1 秒的“立即响应”阈值，并引用了 Newell 的 Unified Theories of Cognition。Newell 将立即响应解释为“必须在大约一秒钟内（即，大约从 ~0.3 秒到 ~3 秒）对某些刺激做出的响应。”这遵循了 Newell 关于“认知的实时约束”的讨论，其中指出“与环境的互动会引发认知考虑，发生的时间顺序为秒级”，范围从大约 0.5 秒到 2-3 秒。Miller 是 1 秒阈值的另一个常用来源，他指出“如果响应延迟超过两秒，人类可以并且将要执行的机器通信任务将严重改变其特性，并且可能会再延长一秒左右。”
Miller 和 Card 的研究将用户在失去注意力之前等待的时间量描述为一个范围，从大约 0.3 秒到 3 秒，这表明我们的 LCP “良好”阈值应在此范围内。此外，鉴于现有的首次内容ful 渲染“良好”阈值为 1 秒，并且最大内容ful 渲染通常发生在首次内容ful 渲染之后，我们进一步限制了候选 LCP 阈值的范围，从 1 秒到 3 秒。为了选择此范围内最符合我们标准的阈值，接下来我们将了解这些候选阈值的可实现性。
可实现性
使用 CrUX 中的数据，我们可以确定网络上满足我们的候选 LCP “良好”阈值的来源百分比。
| 1 秒 | 1.5 秒 | 2 秒 | 2.5 秒 | 3 秒 | |
|---|---|---|---|---|---|
| 手机 | 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 数据来确定大多数来源满足的阈值
| 3 秒 | 3.5 秒 | 4 秒 | 4.5 秒 | 5 秒 | |
|---|---|---|---|---|---|
| 手机 | 45% | 35% | 26% | 20% | 15% |
| 桌面设备 | 36% | 26% | 19% | 14% | 10% |
对于 4 秒阈值，大约 26% 的手机来源和 21% 的桌面设备来源将被归类为不良。这属于我们 10-30% 的目标范围，因此我们得出结论，4 秒是可接受的“不良”阈值。
因此，我们得出结论，2.5 秒是合理的“良好”阈值，而 4 秒是最大内容ful 渲染的合理“不良”阈值。
与下次渲染的互动
INP 阈值是根据以下体验质量和可实现性考虑因素设置的。
体验质量
研究相当一致地得出结论，视觉反馈延迟最多约 100 毫秒会被认为是相关来源（例如用户输入）导致的。这表明理想的与下次渲染的互动“良好”阈值应接近此值。
Jakob Nielsen 常被引用的响应时间：3 个重要限制将 0.1 秒定义为让用户感觉系统立即做出反应的限制。Nielsen 引用了 Miller 和 Card，后者引用了 Michotte 1962 年的 The Perception of Causality。在 Michotte 的研究中，实验参与者被展示了“屏幕上的两个物体。物体 A 启动并朝物体 B 移动。当它与 B 接触时停止，而后者随后启动并远离 A 移动。”Michotte 改变了物体 A 停止和物体 B 开始移动之间的时间间隔。Michotte 发现，对于延迟最多约 100 毫秒，参与者会感觉到物体 A 导致了物体 B 的运动。对于大约 100 毫秒到 200 毫秒的延迟，因果关系感知是混合的，而对于超过 200 毫秒的延迟，物体 B 的运动不再被视为是由物体 A 引起的。
同样，Miller 将“对控件激活的响应”的响应阈值定义为“通常由键、开关或其他控件成员的移动给出的操作指示，该指示表明它已被物理激活。此响应应……被感知为操作员引起的机械动作的一部分。时间延迟：不超过 0.1 秒”，稍后又指出“按下键和视觉反馈之间的延迟不应超过 0.1 到 0.2 秒”。
最近，在 Towards the Temporally Perfect Virtual Button 中，Kaaresoja 等人调查了触摸屏上的虚拟按钮与后续视觉反馈指示按钮被触摸之间的同时性感知，以了解各种延迟。当按钮按下和视觉反馈之间的延迟为 85 毫秒或更短时，参与者报告视觉反馈与按钮按下同时出现的时间为 75%。此外，对于 100 毫秒或更短的延迟，参与者报告按钮按下的感知质量始终很高，感知质量在 100 毫秒到 150 毫秒的延迟时下降，并在 300 毫秒的延迟时达到非常低的水平。
鉴于此，我们得出结论，研究表明 100 毫秒是 Web Vitals 的与下次渲染的互动“良好”阈值。此外，鉴于用户报告延迟 300 毫秒或更长时间的质量水平较低，理想情况下这应该是“不良”阈值。
可实现性
使用 CrUX 中的数据，我们确定网络上的大多数来源在第 75 个百分位数满足 200 毫秒 INP “良好”阈值
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| 手机 | 12% | 56% | 76% | 88% | 92% |
| 桌面设备 | 83% | 96% | 98% | 99% | 99% |
我们还格外关注低端移动设备通过 INP 的可实现性，因为低端移动设备占网站访问量的大部分。这进一步证实了 200 毫秒阈值的适用性。
考虑到对体验质量的研究支持的 100 毫秒阈值和可实现性标准，我们得出结论，200 毫秒是良好体验的合理阈值
为了确定 LCP 的“不良”阈值，我们使用 CrUX 数据来确定大多数来源满足的阈值
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| 手机 | 88% | 44% | 24% | 12% | 8% |
| 桌面设备 | 17% | 4% | 2% | 1% | 1% |
这表明我们可以将“不良”阈值设置为 300 毫秒。
但是，与 LCP 和 CLS 不同，INP 与受欢迎程度呈负相关——网站越受欢迎，通常越复杂，从而导致更高 INP 的可能性更高。当我们查看排名前 10,000 的网站（构成互联网浏览量的绝大部分）时，我们看到的情况更加复杂
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| 手机 | 97% | 77% | 55% | 37% | 24% |
| 桌面设备 | 48% | 17% | 8% | 4% | 2% |
在移动设备上，300 毫秒的“不良”阈值会将大多数热门网站归类为“不良”，从而扩大了我们的可实现性标准，而 500 毫秒更符合 10-30% 的网站范围。还应注意的是，200 毫秒的“良好”阈值对于这些网站来说也更严格，但 23% 的网站仍然在移动设备上通过了此阈值，这仍然通过了我们 10% 的最低通过率标准。
因此，我们得出结论，200 毫秒对于大多数网站来说是合理的“良好”阈值，而大于 500 毫秒是合理的“不良”阈值。
累积布局偏移
CLS 阈值是根据以下体验质量和可实现性考虑因素设置的。
体验质量
累积布局偏移 (CLS) 是一项新指标，用于衡量页面的可见内容偏移的程度。鉴于 CLS 是新的，我们不知道有任何研究可以直接为该指标的阈值提供信息。因此，为了确定与用户期望对齐的阈值，我们评估了具有不同布局偏移量的真实世界页面，以确定在导致在使用页面内容时造成重大中断之前，被认为可接受的最大偏移量。在我们的内部测试中，我们发现偏移量从 0.15 及更高始终被认为具有破坏性，而偏移量为 0.1 及更低则引人注意，但不会过度破坏。因此，虽然零布局偏移是理想的，但我们得出结论，高达 0.1 的值是候选“良好”CLS 阈值。
可实现性
根据 CrUX 数据，我们可以看到，近 50% 的来源的 CLS 为 0.05 或更低。
| 0.05 | 0.1 | 0.15 | |
|---|---|---|---|
| 手机 | 49% | 60% | 69% |
| 桌面设备 | 42% | 59% | 69% |
虽然 CrUX 数据表明 0.05 可能是合理的 CLS “良好”阈值，但我们认识到在某些用例中很难避免破坏性布局偏移。例如，对于第三方嵌入内容（例如社交媒体嵌入），嵌入内容的高度有时在完成加载后才知道，这可能会导致布局偏移量大于 0.05。因此，我们得出结论，虽然许多来源满足 0.05 阈值，但稍微宽松的 0.1 CLS 阈值在体验质量和可实现性之间取得了更好的平衡。我们希望，展望未来，Web 生态系统将找到解决第三方嵌入导致的布局偏移的解决方案，这将允许在未来版本的 Core Web Vitals 中使用更严格的 0.05 或 0 CLS “良好”阈值。
此外，为了确定 CLS 的“不良”阈值，我们使用了 CrUX 数据来确定大多数来源满足的阈值
| 0.15 | 0.2 | 0.25 | 0.3 | |
|---|---|---|---|---|
| 手机 | 31% | 25% | 20% | 18% |
| 桌面设备 | 31% | 23% | 18% | 16% |
对于 0.25 阈值，大约 20% 的手机来源和 18% 的桌面设备来源将被归类为“不良”。这属于我们 10-30% 的目标范围，因此我们得出结论，0.25 是可接受的“不良”阈值。