Core Web Vitals 阈值设定的调查依据与方法论

作者:林语者 分类:工程代码

Core Web Vitals 阈值设定的调查依据与方法论

发布日期:2020年5月21日,最后更新日期:2025年5月7日

Core Web Vitals 是一组用于衡量真实用户网页体验关键方面的指标。它包含各项指标及其目标阈值,使开发者能够定性评估网站体验属于“良好”、“需要改进”还是“较差”。本文将详细介绍 Core Web Vitals 各指标阈值的选取方法及其背后的考量依据。

Core Web Vitals 指标与阈值回顾

Core Web Vitals 包含三个核心指标:最大内容绘制(LCP)、下次绘制交互(INP)和累积布局偏移(CLS)。每个指标分别衡量用户体验的不同方面:

  • LCP 衡量感知加载速度,标记页面主要内容可能已完成加载的时间点
  • INP 衡量响应性,量化用户与页面交互时的体验感受
  • CLS 衡量视觉稳定性,量化可见页面内容发生意外布局变化的程度

每个 Core Web Vitals 指标都设有对应的阈值,用于将性能分类为“良好”、“需要改进”或“较差”。

指标 良好 较差 百分位
Largest Contentful Paint ≤ 2,500 毫秒 > 4,000 毫秒 75
Interaction to Next Paint ≤ 200 毫秒 > 500 毫秒 75
Cumulative Layout Shift ≤ 0.1 > 0.25 75

在评估页面或网站整体性能时,我们采用第75百分位值作为分类标准。这意味着,如果某个网站75%以上的页面访问达到“良好”阈值,该指标的性能就被归类为“良好”。相反,如果超过25%的页面访问达到“较差”阈值,该网站的性能就被归类为“较差”。例如,LCP第75百分位值为2秒的网站属于“良好”,而5秒的则属于“较差”。

Core Web Vitals 阈值的设定标准

本节将阐述评估 Core Web Vitals 指标阈值的基本标准。后续章节将详细说明这些标准如何应用于各指标阈值的具体选择过程。随着我们进一步提升衡量优质网页用户体验的能力,这些标准和阈值也将持续优化和补充。

高质量的用户体验

Google 的首要目标是优化用户及其体验质量,因此我们致力于确保达到 Core Web Vitals“良好”阈值的页面能够提供高质量的用户体验。

为了确定与高质量用户体验相关的阈值,Google 参考了人类感知和人机交互(HCI)研究。虽然这些研究有时会简化为单一固定阈值,但其基础研究通常表现为一个数值范围。例如,关于用户在失去专注前愿意等待时间的研究,虽然常被表述为1秒,但基础研究实际上显示其范围在数百毫秒到数秒之间。

用户感知阈值因用户和上下文而异的事实,得到了 Chrome 汇总匿名指标数据的进一步支持。这些数据表明,用户在放弃页面加载前等待内容显示的时间并非固定不变,而是呈现平滑连续分布。关于人类感知阈值及相关 HCI 研究的更多细节,请参阅Web Vitals 的科学

对于有相关用户体验研究可用且文献值范围达成合理共识的指标,我们使用该范围作为阈值选择过程的输入指导。对于累积布局偏移等新型指标,在缺乏相关用户体验研究的情况下,我们通过评估满足不同候选阈值的实际页面,来确定能够带来优质用户体验的阈值。

现有网页内容的可达成性

为确保网站所有者能够通过优化使其网站达到“良好”标准,这些标准必须能够在现有网页内容上实现。例如,0毫秒虽然是LCP“良好”阈值的理想值,能够实现即时加载体验,但由于网络和设备处理延迟的限制,0毫秒阈值在大多数情况下实际上无法达成。因此,0毫秒不适合作为 Core Web Vitals LCP 的“良好”阈值。

在评估 Web Vitals“良好”阈值的候选值时,我们基于 Chrome 用户体验报告(CrUX)数据,确保该阈值具有可达成性。为了确认阈值可达,我们要求至少有10%的源站能够满足“良好”阈值。同时,我们还确保经过适当优化的内容能够始终满足“良好”阈值,避免因现场数据波动而导致正确优化的网站被错误分类。

相反,我们通过识别仅有少数源站未能达到的性能水平来设定“较差”阈值。除非有与“低质量”阈值定义相关的研究可用,默认情况下,表现最差的10-30%的源站被归类为“低质量”。

设备类型:统一阈值还是分别设定?

通常情况下,移动设备和桌面设备在设备性能和网络可靠性方面具有显著不同的特征,这对“可达成性”标准产生重大影响,因此我们曾考虑为它们分别设定阈值。

然而,尽管不同设备的达成标准可能不同,但用户对体验质量的期望并不因设备而异。因此,Web Vitals 的推荐阈值并未按设备区分,而是对所有设备使用相同的阈值,这也带来了提高阈值清晰度的额外好处。

此外,设备并不总能清晰地归入某一类别——分类应基于外形尺寸、处理能力还是网络条件?统一阈值还能避免复杂性问题带来的次要好处。

鉴于移动设备的严格限制,大多数阈值主要基于移动设备上的可达成性设定。这些阈值更应被视为针对移动设备优化的标准,而非适用于所有设备类型的精确阈值。不过,由于大多数网站的流量主要来自移动端,这并不构成重大问题。

关于标准的最终思考

在评估候选阈值后,我们发现这些标准有时会相互冲突。例如,在始终达到阈值与始终提供优质用户体验之间可能存在权衡。此外,由于人类感知研究通常提供数值范围,并且用户行为指标显示行为是逐步变化的,因此很少存在单一的“正确”阈值。

正因如此,在选择 Web Vitals 阈值时,我们认识到不存在完美的阈值,有时必须在多个合理候选值中进行选择。我们的关注点从“什么是最佳阈值?”转变为“哪个候选阈值最符合标准?”

需要强调的是,这些是适用于整个网络的广泛标准。许多网站通过超越“良好”阈值的优化能够获得额外收益,因此需要探索与具体业务指标的相关性。

百分位选择

如前所述,在评估页面或网站的整体性能时,我们使用所有访问的第75百分位值进行分类。第75百分位值的选择基于两个关键标准:

  1. 所选百分位应确保在页面或网站的大部分访问中达到目标性能水平
  2. 所选百分位值不应过度受异常值影响

这两个目标在某种程度上存在矛盾。要实现第一个目标,通常需要选择较高的百分位,但百分位越高,结果值受异常值影响的可能性也越大。我们希望避免因少数异常样本决定网站分类的情况。例如,使用第95百分位评估拥有100次访问的网站性能时,仅需5个异常样本就足以影响第95百分位值。

由于这些目标存在一定矛盾,通过分析我们确定第75百分位提供了合理的平衡点。以第75百分位为基准,确保网站在四分之三的访问中达到目标性能水平。同时,第75百分位值往往较不容易受异常值影响。回到之前的例子,对于拥有100次访问的网站,需要有25次访问报告较大的异常样本才会影响第75百分位值。虽然100个样本中出现25个异常值的情况可能发生,但概率远低于第95百分位的情形。

Largest Contentful Paint (LCP)

LCP 阈值基于以下体验质量和可达成性考量设定:

体验质量

研究普遍认为用户能够保持专注而不分心的等待时间约为1秒。深入分析相关研究后,我们发现1秒实际上是数百毫秒到数秒范围内数值的近似表示。

两个常被引用的1秒基准来源是 Card 等人和 Miller。Card 引用 Newell 的统一认知理论,将1秒定义为“即时响应”阈值。Newell 将即时响应描述为“必须在大约1秒内(约0.3到3秒)对某种刺激做出的响应”,这符合 Newell 关于“认知的实时约束”的讨论,即“引发认知考量的环境交互发生在数秒级别”,大致范围为0.5-2-3秒。常被引用1秒阈值的 Miller 指出:“当响应延迟超过2秒时,人类在机器通信中执行任务的性质会发生显著变化,并可能进一步延长。”

Miller 和 Card 的研究表明,用户在失去专注前的等待时间范围约为0.3-3秒,这表明LCP的“良好”标准应处于此范围内。同时考虑到现有首次内容绘制(FCP)的“良好”阈值为1秒,且最大内容绘制通常发生在FCP之后,我们进一步将LCP候选阈值范围限制在1-3秒之间。为了在该范围内选择最符合标准的阈值,接下来我们检验这些候选阈值的可达成性。

可达成性

使用 CrUX 数据,我们可以确定满足 LCP 候选“良好”阈值的网页源站比例:

阈值 手机 桌面设备
1 秒 3.5% 6.9%
1.5 秒 13% 19%
2 秒 27% 36%
2.5 秒 42% 51%
3 秒 55% 64%

虽然满足1秒阈值的源站不足10%,但1.5-3秒的其他阈值均满足至少10%源站达到“良好”阈值的要求,因此仍然是有效候选。

我们还通过分析表现优异网站的LCP性能,来确定优化良好的网站能够始终达到的阈值标准。具体来说,我们的目标是确定在顶级性能网站的第75百分位上始终可实现的基准。我们发现,虽然1.5秒和2秒的阈值无法始终达成,但2.5秒的阈值具有持续可达成性。

为确定LCP的“较差”阈值,我们使用CrUX数据来识别大多数源站能够满足的阈值:

阈值 手机 桌面设备
3 秒 45% 36%
3.5 秒 35% 26%
4 秒 26% 19%
4.5 秒 20% 14%
5 秒 15% 10%

在4秒阈值下,约26%的移动源站和约21%的桌面源站被归类为低质量。这处于10-30%的目标范围内,因此我们得出结论,4秒是可接受的“较差”阈值。

综上,Largest Contentful Paint 的“良好”标准确定为2.5秒,“较差”标准为4秒。

Interaction to Next Paint (INP)

INP 阈值的设定综合考虑了以下质量和可达成性因素:

体验质量

研究几乎一致得出结论:当视觉反馈延迟在100毫秒左右时,用户会将其感知为由用户输入等相关来源引起。这表明 Interaction to Next Paint 的“良好”标准应接近此值。

Jakob Nielsen 在常被引用的《响应时间:三个重要限制》中,将0.1秒定义为系统让用户感觉即时响应的上限。Nielsen 引用了 Miller 和 Card,而他们又引用了 Michotte 1962年的著作《因果感知》。Michotte 的研究向受试者展示“屏幕上的两个物体”:物体A开始移动并向B移动,在接触B的瞬间停止,B开始移动并远离A。Michotte 改变了A停止与B开始移动之间的时间间隔。他发现延迟在约100毫秒以内时,受试者会形成A引发B运动的印象;延迟在100-200毫秒时,因果感知出现混合;超过200毫秒的延迟,B的运动不再被感知为由A引起。

类似地,Miller 将“对控件激活的响应”定义为“通常通过按键、开关或其他控制部件的移动来指示物理激活的操作命令”。此响应需要被操作者感知为机器动作的一部分。时间延迟:0.1秒或更短”,且“从按键到视觉反馈显示的延迟应在0.1-0.2秒以内”。

近年来,Kaaresoja 等人在《Towards the Temporally Perfect Virtual Button》中研究了触摸屏虚拟按钮点击与随后显示点击视觉反馈之间的各种延迟对同时性感知的影响。当按钮按下与视觉反馈间的延迟在85毫秒以下时,参与者以75%的概率报告视觉反馈与按钮按下同时发生。此外,大多数参与者报告在100毫秒延迟下始终具有较高的按钮按下同步感,100-150毫秒延迟下感知下降,300毫秒延迟下达到非常低的水平。

基于以上研究,我们得出结论:Web Vitals 的 Interaction to Next Paint 的“良好”阈值应为100毫秒。同时,由于用户报告300毫秒及以上延迟的质量水平较低,理想情况下这应成为“较差”阈值。

可达成性

使用 CrUX 数据,我们发现大多数网页源站能够满足第75百分位200毫秒的INP“良好”阈值:

阈值 手机 桌面设备
100 毫秒 12% 83%
200 毫秒 56% 96%
300 毫秒 76% 98%
400 毫秒 88% 99%
500 毫秒 92% 99%

我们还特别关注了在低端移动设备上(这些设备占网站访问量的很大比例)实现INP阈值的能力,这进一步证实了200毫秒阈值的适当性。

考虑到体验质量研究的100毫秒阈值和可达成性标准,我们得出结论:200毫秒是“良好”体验阈值的合理选择。

为确定INP的“较差”阈值,我们使用CrUX数据来识别大多数源站能够满足的阈值:

阈值 手机 桌面设备
100 毫秒 88% 17%
200 毫秒 44% 4%
300 毫秒 24% 2%
400 毫秒 12% 1%
500 毫秒 8% 1%

这意味着可以将“较差”阈值设定为300毫秒。

然而,与LCP和CLS不同,INP 与网站流行度呈负相关。热门网站通常更复杂,倾向于具有更高的INP值。观察占据大部分互联网浏览量的前10,000个网站,我们发现情况更为复杂:

阈值 手机 桌面设备
100 毫秒 97% 48%
200 毫秒 77% 17%
300 毫秒 55% 8%
400 毫秒 37% 4%
500 毫秒 24% 2%

在移动设备上,如果“较差”阈值设为300毫秒,大多数热门网站将被归类为“较差”,这会拉伸可达成性标准。而500毫秒恰好适合10-30%的网站范围。

虽然200毫秒的“良好”阈值对这些网站来说是严格标准,但仍有23%的移动网站满足此标准,达到了10%的最低合格率标准。

因此,我们得出结论:对于大多数网站,200毫秒是合理的“良好”阈值,而超过500毫秒则属于“较差”阈值。

Cumulative Layout Shift (CLS)

CLS 阈值的设定基于以下体验质量和可达成性考量:

体验质量

累积布局偏移(CLS)是衡量页面可见内容移动程度的新指标。由于CLS是新型指标,目前尚未发现直接指示该指标阈值的研究。

因此,为了确定符合用户期望的阈值,我们评估了具有不同布局偏移量的实际页面,以确定在导致严重使用中断前被认为可接受的最大偏移量。内部测试发现,0.15以上的偏移水平总是被视为破坏性,而0.1以下的偏移虽然明显,但不会被过度视为破坏性。因此,虽然零布局偏移是理想状态,但我们得出结论:数值在0.1以内是“良好”CLS阈值的候选值。

可达成性

CrUX 数据显示,近50%的源站CLS值在0.05以下:

阈值 手机 桌面设备
0.05 49% 42%
0.1 60% 59%
0.15 69% 69%

虽然 CrUX 数据表明0.05是合理的CLS“良好”阈值,但我们认识到某些使用场景确实难以避免布局不稳定。例如,对于第三方嵌入内容(如社交媒体嵌入),在加载完成前嵌入内容的高度可能未知,这可能导致布局偏移超过0.05。因此,我们得出结论:将CLS阈值放宽至0.1,可以在体验质量与可达成性之间取得更好平衡。我们希望未来能够找到解决由第三方嵌入引起布局偏移的方案,这将使我们在 Core Web Vitals 的未来版本中能够将CLS的“良好”阈值提高至0.05或0。

为确定CLS的“较差”阈值,我们使用CrUX数据来识别大多数源站能够满足的阈值:

阈值 手机 桌面设备
0.15 31% 31%
0.2 25% 23%
0.25 20% 18%
0.3 18% 16%

当阈值为0.25时,约20%的移动源站和18%的桌面源站被归类为“较差”。这处于10-30%的目标范围内,因此我们得出结论:0.25是可接受的“较差”阈值。

标签: 性能优化

评论

发表评论

正在加载评论...