核心 Web Vitals 阈值背后的研究和方法
发布时间：2020 年 5 月 21 日
核心网页指标是一组实测指标，用于衡量网络上真实用户体验的重要方面。核心网页指标包含指标以及每个指标的目标阈值，可帮助开发者定性了解其网站的用户体验是“良好”“需要改进”还是“欠佳”。本文将介绍为 Core Web Vitals 指标选择阈值的一般方法，以及为每个具体 Core Web Vitals 指标选择阈值的方式。
知识回顾：Core Web Vitals 指标和阈值
Core Web Vitals 有三个指标：Largest Contentful Paint (LCP)、Interaction to Next Paint (INP) 和 Cumulative Layout Shift (CLS)。每个指标都会衡量用户体验的不同方面：LCP 用于衡量感知的加载速度，并在网页加载时间轴上标记页面主要内容可能已加载的时间点；INP 用于衡量响应能力并量化用户尝试与页面互动时的感受；CLS 用于衡量视觉稳定性，并量化可见网页内容的意外布局偏移。
每个 Core Web Vitals 指标都有相关阈值，这些阈值会将效果分类为“良好”“需要改进”或“欠佳”：
| 良好 | 差 | 百分位 | |
|---|---|---|---|
| 最大内容渲染时间 | ≤ 2500 毫秒 | >4000 毫秒 | 75 |
| Interaction to Next Paint | ≤200 毫秒 | >500 毫秒 | 75 |
| 累积布局偏移 | ≤0.1 | >0.25 | 75 |
此外，为了对网页或网站的整体效果进行分类，我们会使用该网页或网站的所有网页浏览量的第 75 个百分位数值。换句话说，如果某个网站至少有 75% 的网页浏览量达到“良好”阈值，则该网站在该指标方面的表现会被归类为“良好”。反之，如果至少 25% 的网页浏览量达到“较差”阈值，则该网站会被归类为“效果较差”。例如，对于 2 秒的第 75 个百分位 LCP，系统会将其归类为“良好”，而第 75 个百分位的 LCP 为 5 秒则会被归类为“欠佳”。
核心网页指标阈值的标准
在本部分中，我们将介绍评估核心网页指标阈值的标准。后续部分将详细介绍如何应用这些标准来为每个指标选择阈值。在未来几年里，我们预计会改进和补充这些标准和阈值，以进一步提升衡量 Web 上出色用户体验的能力。
优质的用户体验
我们的首要目标是为用户和他们的体验质量进行优化。 因此，我们的目标是确保符合 Core Web Vitals“良好”阈值的网页能够提供优质的用户体验。
为了确定与优质用户体验相关的阈值，我们参考了人体感知和人机交互研究。虽然这项研究有时会使用单个固定阈值进行总结，但我们发现，基础研究通常以值范围的形式表示。例如，关于用户在失去焦点前通常等待多长时间的研究有时会描述为 1 秒，而基础研究实际上是用从几百毫秒到几秒钟的范围来表示。经过汇总和匿名化的 Chrome 指标数据可进一步支持感知阈值因用户和情境而异这一事实，这表明用户在取消网页加载前等待网页显示内容的时间并不只有这么短。相反，这些数据显示了平滑而连续的分布。如需深入了解人类感知阈值和相关 HCI 研究，请参阅 Web Vitals 背后的科学。
如果某个给定指标有相关的用户体验研究，并且文献中对值范围达成了合理共识，我们会将此范围用作输入，以指导我们的阈值选择流程。如果无法进行相关用户体验研究（例如对于 Cumulative Layout Shift 等新指标），我们会对符合某项指标的不同候选阈值的实际网页进行评估，以确定可提供良好用户体验的阈值。
可通过现有 Web 内容实现
此外，为了确保网站所有者能够成功优化其网站以达到“良好”阈值，我们要求这些阈值对于网络上的现有内容是可实现的。例如，虽然零毫秒是理想的 LCP“良好”阈值，可带来即时加载体验，但由于网络和设备处理延迟，在大多数情况下，零毫秒阈值在实践中是无法实现的。因此，零毫秒并不是 Core Web Vitals 的合理 LCP“良好”阈值。
在评估核心网页指标“良好”阈值候选值时，我们会根据 Chrome 用户体验报告 (CrUX) 中的数据，验证这些阈值是否可实现。为了确认某个阈值是可实现的，我们要求至少有 10% 的来源达到“良好”阈值。此外，为确保优化程度较高的网站不会因现场数据的变化而被错误分类，我们还会验证优化程度较高的网站是否始终达到“良好”阈值。
反之，我们通过确定只有少数来源未达到的效果水平来确定“较差”阈值。除非有可用于定义“较差”阈值的研究，否则默认情况下，效果最差的 10-30% 来源会被归类为“较差”。
每个设备是否使用相同或不同的条件
移动设备和桌面设备的使用通常在设备功能和网络可靠性方面具有截然不同的特征。这对“可实现性”标准有很大影响，因此建议我们为每项指标分别考虑阈值。
不过，用户对良好或糟糕体验的预期并不取决于设备，即使可实现性标准取决于设备也是如此。因此，Core Web Vitals 建议的阈值并未按设备进行区分，而是针对这两种设备使用相同的阈值。这还有一个额外的好处，即阈值更易于理解。
此外，设备并不总是能很好地归入某一类别。这应该基于设备外形规格、处理能力还是网络状况？使用相同的阈值还有一个好处，即避免了这种复杂性。
由于移动设备的限制性更强，因此大多数阈值都是根据移动设备的可实现性设置的。它们更可能代表移动设备的阈值，而非针对所有设备类型的真实综合阈值。不过，鉴于移动流量通常是大多数网站的大部分流量，因此这不是一个大问题。
关于评审标准的最后总结
在评估候选人阈值时，我们发现这些标准有时会相互冲突。例如，在确保始终可达到最低要求和始终提供良好用户体验之间，可能会存在矛盾。此外，鉴于人体感知研究通常会提供一个范围的值，而用户行为指标会显示行为的逐渐变化，我们发现指标通常没有单一的“正确”阈值。因此，我们在确定核心网页指标的阈值时，一直采用的是选择最符合条件的阈值的方法，同时也认识到，没有一个完美的阈值，有时可能需要从多个合理的候选阈值中进行选择。我们没有问“什么是理想的阈值？”，而是着重于问“哪个候选阈值最能满足我们的条件？”
百分位选择
如前所述，为了对网页或网站的整体性能进行分类，我们会使用该网页或网站的所有访问的第 75 个百分位值。75 百分位数是根据以下两个标准选择的。首先，百分比应确保网页或网站的大多数访问都达到了目标性能水平。其次，所选百分位数的值不应过多受离群值的影响。
这些目标在某种程度上是相互矛盾的。为了实现第一个目标，通常选择较高的百分位数会更好。不过，百分位数越高，得出结果受到离群值影响的可能性就越大。如果某个网站的部分访问发生在网络连接不稳定的情况下，导致 LCP 样本过大，我们不希望网站分类由这些离群样本决定。例如，如果我们使用高百分位数（例如第 95 百分位数）评估获得了 100 次访问的网站的表现，那么只需 5 个离群值样本，第 95 百分位数值就会受到离群值的影响。
鉴于这些目标之间存在一些矛盾，经过分析，我们认为第 75 个百分位数是一个合理的平衡点。通过使用第 75 个百分位数，我们知道，大多数网站访问（4 次中有 3 次）都达到了目标性能水平或更好的性能水平。此外，第 75 百分位值受离群值影响的可能性较小。回到我们的示例，对于获得 100 次访问的网站，其中 25 次访问需要报告较大的离群值样本，才能使第 75 个百分位的值受到离群值的影响。虽然 100 个样本中有 25 个是离群值的可能性存在，但这种可能性远低于第 95 百分位的情况。
最大内容渲染时间
在设置 LCP 阈值时，我们考虑了以下体验质量和可实现性因素。
体验质量
通常，用户在等待 1 秒后就会开始失去对任务的注意力。在仔细研究相关研究后，我们发现，1 秒大约可以描述一个范围的值，从大约几百毫秒到几秒不等。
关于 1 秒阈值，两个常被引用的来源是 Card 等和 Miller。Card 引用了 Newell 的统一认知理论，定义了 1 秒的“即时响应”阈值。Newell 将即时反应解释为“必须在大约一秒内（即大约从大约 0.3 秒到大约 3 秒）内对某种刺激做出的反应”。这是 Newell 关于“认知实时限制”的讨论，其中指出：“唤起认知考虑的环境与环境的互动按秒顺序发生”，范围约为 0.5 至 2-3 秒。Miller 是另一个常被引用的 1 秒阈值来源，他指出：“如果响应延迟超过 2 秒（可能再延长 1 秒左右），人类可以和将会通过机器通信执行的任务将会严重改变其性质。”
Miller and Card 的研究描述了用户在失去焦点前等待的时间，范围为大约 0.3 到 3 秒，这表明我们的 LCP“良好”阈值应在此范围内。此外，鉴于现有的 First Contentful Paint“良好”阈值为 1 秒，并且 Largest Contentful Paint 通常在 First Contentful Paint 之后发生，我们进一步将候选 LCP 阈值范围从 1 秒缩小到 3 秒。为了选择此范围内最符合我们条件的阈值，我们接下来将研究这些候选阈值的可实现性。
可实现性
利用来自 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 数据来确定大多数来源达到的阈值：
| 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 秒是一个合理的“不佳”阈值。
从互动到下一次绘制
在设置 INP 阈值时，我们考虑了以下体验质量和可实现性因素。
体验质量
研究结果基本一致，认为视觉反馈延迟最多可达 100 毫秒，被用户认为是由相关来源（例如用户输入）引起的。这表明，理想的 Interaction to Next Paint“良好”阈值应接近于此。
Jakob Nielsen 的常被引用的响应时间：3 个重要限制将 0.1 秒定义为让用户感觉系统即时响应的限制。Nielsen 引用了 Miller and Card，他引用了 Michotte 在 1962 年发表的《因果关系》(The Perception of Causality)。在 Michotte 的研究中，实验参与者会看到“屏幕上有两个物体。对象 A 出发并向 B 移动。当音乐与 B 接触时，音乐停止，而 B 则开始并远离 A。”Michotte 会改变 Object A 停止和 Object B 开始移动之间的时间间隔。Michotte 发现，如果延迟时间不超过大约 100 毫秒，参与者会认为对象 A 会导致对象 B 的运动。对于大约 100 毫秒到 200 毫秒的延迟，人们对因果关系的看法会有所不同；对于超过 200 毫秒的延迟，人们不再认为对象 B 的运动是由对象 A 引起的。
同样，Miller 将“对控件激活的响应”的响应阈值定义为“通常由按键、开关或其他控件成员的移动给出的操作指示，表示其已被物理激活。此响应应被视为操作者诱导的力学操作的一部分。时间延迟：不超过 0.1 秒”和更晚，“按下按键和视觉反馈之间的延迟时间不应超过 0.1 到 0.2 秒”。
最近，在朝着完美的虚拟按钮迈进一文中，Kaaresoja 和其他人研究了针对触摸触摸屏上的虚拟按钮与后续视觉反馈指示轻触该按钮时同时出现的各种延迟。当按下按钮和视觉反馈之间的延迟时间不超过 85 毫秒时，参与者报告视觉反馈同时出现，有 75% 的概率按下按钮。此外，对于延迟时间不超过 100 毫秒的按钮按压，参与者报告的按压感知质量始终较高；对于延迟时间介于 100 毫秒到 150 毫秒之间的按钮按压，感知质量有所下降；对于延迟时间为 300 毫秒的按钮按压，感知质量非常低。
有鉴于此，我们得出以下结论：对于 Web Vitals 而言，100 毫秒是“良好”的 Interaction to Next Paint 阈值。此外，鉴于用户报告延迟时间达到 300 毫秒或更高时质量较低，因此理想情况下，延迟时间应不超过 300 毫秒，否则会被视为“较差”。
可实现性
根据来自 CrUX 的数据，我们确定网络上的大多数来源在第 75 个百分位处达到了 200 毫秒 INP“良好”阈值：
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| phone | 12% | 56% | 76% | 88% | 92% |
| 桌面设备 | 83% | 96% | 98% | 99% | 99% |
此外，我们还特别关注了在低端移动设备网站上通过 INP 的可行性，这些移动设备在网站访问次数中占比很高。这进一步证实了 200 毫秒阈值的适用性。
考虑到体验质量研究和可实现性标准支持的 100 毫秒阈值，我们得出结论，200 毫秒是一个合理的良好体验阈值
为了确定 LCP 的“较差”阈值，我们使用 CrUX 数据来确定大多数来源满足的阈值：
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| phone | 88% | 44% | 24% | 12% | 8% |
| 桌面版 | 17% | 4% | 2% | 1% | 1% |
这表明，我们可以将“较差”阈值设为 300 毫秒。
不过，与 LCP 和 CLS 不同，INP 与热门程度呈负相关关系：热门网站往往更复杂，因此 INP 也更有可能较高。当我们查看前 1 万个网站（这些网站占互联网浏览量的绝大多数）时，会发现情况更加复杂：
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| phone | 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 | |
|---|---|---|---|
| phone | 49% | 60% | 69% |
| 桌面设备 | 42% | 59% | 69% |
虽然 CrUX 数据表明 0.05 可能是合理的 CLS“良好”阈值，但我们也认识到，在某些用例中，很难避免破坏性的布局偏移。例如，对于第三方嵌入内容（例如社交媒体嵌入内容），嵌入内容的高度有时在其加载完成之前是未知的，这可能会导致布局偏移大于 0.05。因此，我们得出结论，虽然许多来源都达到了 0.05 的阈值，但稍微宽松一些的 CLS 阈值（0.1）在体验质量和可实现性之间取得了更好的平衡。我们希望，今后，网络生态系统能够找到解决由第三方嵌入内容导致的布局偏移问题的方案，以便在未来的 Core Web Vitals 迭代中使用更严格的 CLS“良好”阈值（0.05 或 0）。
此外，为了确定 CLS 的“较差”阈值，我们使用了 CrUX 数据来确定大多数来源达到的阈值：
| 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 是一个可接受的“较差”阈值。