性能之定义核心网络关键指标阈值(翻译)

1,023 阅读14分钟

原文:web.dev/defining-co…

Web核心生命阈值背后的研究与方法

核心Web Vitals是一组字段度量标准,用于度量Web上真实用户体验的重要方面。核心Web关键点包括指标,以及每个指标的目标阈值,这有助于开发人员定性地了解他们的网站体验是“好”、“需要改进”还是“差”。这篇文章将解释通常用于为核心Web关键指标选择阈值的方法,以及如何为每个特定的核心Web关键指标选择阈值。

复习:核心网络关键指标和阈值

到2020年,Web的核心要素是三个指标:最大内容绘制(LCP)、首次输入延迟(FID)和累积布局偏移(CLS)。每个指标衡量用户体验的不同方面:LCP测量感知的加载速度,并在页面加载时间轴上标记页面的主要内容可能已加载的时间点;FID测量响应性并量化用户首次尝试与页面交互时的体验;而CLS度量视觉稳定性,并量化可见页面内容的意外布局偏移量。

每个核心网络关键指标都有相关的阈值,将性能分为“良好”、“需要改进”或“较差”:

此外,为了对页面或站点的总体性能进行分类,我们使用该页面或站点的所有页面视图的第75个百分位值。换句话说,如果站点的页面浏览量至少有75%满足“良好”阈值,则该站点被归类为具有该指标的“良好”性能。相反,如果至少25%的页面浏览量达到“差”阈值,则该站点被归类为性能“差”。因此,例如,2秒的75%LCP被归类为“良好”,而5秒的75%LCP被归类为“差”。

核心网关键指标阈值的标准

在为核心Web关键指标建立阈值时,我们首先确定每个阈值必须满足的标准。下面,我将解释一下我们在谷歌用来评估2020年核心网络生命指标阈值的标准。后续章节将更详细地介绍这些标准是如何应用于2020年为每个指标选择阈值的。在未来的几年里,我们预计将对标准和阈值进行改进和添加,以进一步提高我们在网络上衡量卓越用户体验的能力。

高品质的用户体验

我们的主要目标是优化用户及其体验质量。鉴于此,我们的目标是确保满足核心Web关键点“良好”阈值的页面提供高质量的用户体验。

为了确定与高质量用户体验相关联的阈值,我们将目光投向人类感知和人机交互研究。虽然这项研究有时是用一个固定的阈值来总结的,但我们发现潜在的研究通常是用一系列的值来表示的。例如,对用户在失去注意力之前通常等待的时间的研究有时被描述为1秒,而底层的研究实际上表示为一个范围,从几百毫秒到几秒。感知阈值随用户和上下文的变化这一事实得到了聚合和匿名化的Chrome度量数据的进一步支持,这表明用户在中止页面加载之前等待网页显示内容的时间不是单一的。相反,这些数据显示了平稳和连续的分布。要想更深入地了解人类感知阈值和相关的HCI研究,请参阅Web Vitals背后的科学。

可通过现有web内容实现

此外,为了确保站点所有者能够成功地优化他们的站点以满足“良好”阈值,我们要求这些阈值对于web上的现有内容是可实现的。例如,虽然零毫秒是理想的LCP“良好”阈值,从而产生即时加载体验,但由于网络和设备处理延迟,在大多数情况下,零毫秒阈值实际上无法实现。因此,对于核心Web生命周期来说,0毫秒不是一个合理的LCP“好”阈值。

我们根据“关键用户体验”报告中的“关键点”来验证这些阈值。为了确认一个阈值是可以实现的,我们要求至少有10%的来源当前满足“良好”阈值。此外,为了确保经过良好优化的网站不会因现场数据的变化而被错误分类,我们还验证了优化良好的内容始终符合“良好”阈值。

相反地,我们通过确定目前只有少数人无法达到的绩效水平来确定“差”阈值。除非有与定义“差”阈值相关的研究,否则默认情况下,表现最差的10-30%的起源地被归类为“差”。

关于标准的最后思考

在评估候选阈值时,我们发现这些标准有时会相互冲突。例如,在始终如一地实现一个阈值和确保始终如一的良好用户体验之间可能存在一种紧张关系。此外,考虑到人类感知研究通常会提供一系列的值,而用户行为指标显示行为的逐渐变化,我们发现通常没有一个单独的“正确”阈值来衡量一个指标。因此,我们对2020年核心网络关键点的方法是选择最符合上述标准的阈值,同时认识到没有一个完美的阈值,我们有时可能需要从多个合理的候选阈值中进行选择。而不是问“什么是完美的门槛?”相反,我们关注的是“哪个候选阈值最符合我们的标准?”

百分位选择

如前所述,为了对页面或站点的总体性能进行分类,我们使用对该页面或站点的所有访问量的第75个百分位值。第75个百分位是根据两个标准选择的。首先,百分位应该确保对页面或站点的大多数访问都达到了目标性能水平。其次,所选百分位值不应受到异常值的过度影响。

这些目标有些不一致。为了满足第一个目标,较高的百分位数通常是更好的选择。然而,随着百分位数的增加,结果值受到异常值影响的可能性也会增加。如果一个站点的几次访问碰巧是在不稳定的网络连接上,导致LCP样本过大,我们不希望我们的站点分类由这些异常样本决定。例如,如果我们使用95%这样的高百分位值来评估一个有100次访问的站点的性能,那么就只需要5个异常值样本,第95个百分位值就会受到异常值的影响。

考虑到这些目标有点不一致,经过分析,我们得出结论,第75个百分位达到了合理的平衡。通过使用第75个百分位,我们知道大多数访问该网站(3/4)体验到了目标水平的性能或更好。此外,第75个百分位值不太可能受到异常值的影响。回到我们的例子,对于一个有100次访问的站点,其中25次访问将需要报告受异常值影响的第75个百分位值的大异常值样本。虽然100个样本中有25个可能是异常值,但与第95个百分位情况相比,这种可能性要小得多。

Largest Contentful Paint

体验质量

1秒通常被引用为用户在开始失去对任务的注意力之前等待的时间。通过对相关研究的仔细观察,我们发现1秒是一个近似值,可以描述从几百毫秒到几秒的一系列值。

两个经常引用的1秒阈值来源是Card et alMiller。Card引用Newell统一的认知理论,定义了1秒的“即时反应”阈值。Newell将即时反应解释为“必须在大约一秒钟内(即大约从0.3秒到3秒)对某些刺激做出的反应。”这是在Newell关于“认知的实时限制”的讨论之后进行的,其中提到的是“与环境的互动引起了认知上的考虑,是以秒为单位发生的”,大约在0.5到2-3秒之间。Miller是另一个经常引用的1秒阈值来源,他指出:“如果响应延迟超过2秒,那么人类能够并将通过机器通信执行的任务将严重改变他们的特性,可能还会延长一秒钟左右。”

Miller和Card的研究将用户在失去焦点之前等待的时间描述为一个范围,大约为0.3到3秒,这表明我们的LCP“良好”阈值应该在这个范围内。此外,考虑到现有的第一个内容绘制“良好”阈值为1秒,并且最大内容绘制通常发生在第一个有内容绘制之后,我们进一步限制候选LCP阈值的范围,从1秒到3秒。为了在这个范围内选择最符合我们标准的阈值,我们查看这些候选阈值的可实现性,如下所示。

可实现性

使用来自CrUX的数据,我们可以确定满足候选LCP“良好”阈值的web源的百分比。

%划分为“良好”的关键点来源(针对候选LCP阈值)

虽然只有不到10%的起源符合1秒的阈值,但从1.5秒到3秒的所有其他阈值都满足我们的要求,即至少10%的起源符合“良好”阈值,因此仍然是有效的候选。

此外,为了确保所选阈值在优化良好的站点中始终可达到,我们分析了web上性能最好的站点的LCP性能,以确定这些站点可以始终达到哪些阈值。具体地说,我们的目标是确定一个阈值,该阈值在性能最好的站点的第75个百分位是可以实现的。我们发现,1.5秒和2秒的阈值并不总是可以达到的,而2.5秒是可以持续达到的。

为了确定LCP的“差”阈值,我们使用CrUX数据来确定大多数来源满足的阈值:

%划分为“差”的关键点来源(针对候选LCP阈值)

以4秒为阈值,大约26%的手机用户和21%的桌面电脑用户被归为差用户。这在我们10-30%的目标范围内,因此我们得出结论,4秒是可以接受的“差”阈值。

因此,我们得出结论:2.5秒是一个合理的“好”阈值,而4秒是最大内容绘制的合理“差”阈值。

First Input Delay

体验质量#

这项研究的结论是合理一致的,即视觉反馈的延迟高达100毫秒左右被认为是由相关的源(如用户输入)引起的。这表明,100毫秒的第一次输入延迟“良好”阈值很可能是合适的最小值:如果处理输入的延迟超过100毫秒,其他处理和渲染步骤就没有机会及时完成。

Jakob Nielsen经常引用的响应时间:3个重要限制将0.1秒定义为让用户感觉到系统正在即时响应的限制。尼尔森引用了米勒和卡德,后者引用了米肖特1962年的《因果关系的感知》。在米肖特的研究中,实验参与者被显示“屏幕上有两个物体”。物体A开始向B移动。它在与B接触时停止,而后者则开始并离开A。“Michote改变物体A停止和物体B开始移动之间的时间间隔。Michotte发现,对于大约100毫秒的延迟,参与者的印象是物体A引起物体B的运动。对于大约100毫秒到200毫秒的延迟,因果关系的感知是混合的,对于超过200毫秒的延迟,物体B的运动不再被视为是物体A引起的。

类似地,Miller将“控制激活响应”的响应阈值定义为“通常,通过移动按键、开关或其他控制部件来指示其已被物理激活”。这种反应应该……被认为是操作员引起的机械作用的一部分。延时:不超过0.1秒“及以后”按键与视觉反馈之间的延迟不应超过0.1至0.2秒。

最近,Kaaresoja等人研究了在触摸屏上触摸虚拟按钮和随后的视觉反馈(指示按钮被触摸)之间的同时性感知,并对各种延迟进行了研究。当按下按钮和视觉反馈之间的延迟为85ms或更少时,参与者报告75%的时间内视觉反馈同时出现。此外,对于100ms或更少的延迟,参与者报告了按钮按下的感知质量一直很高,在100ms到150ms的延迟中,感知质量下降,而对于300ms的延迟,感知质量下降到非常低的水平。

鉴于上述情况,我们得出结论,研究指出,100毫秒左右的数值范围是网络生命周期的一个合适的第一次输入延迟阈值。此外,考虑到用户报告的300ms或更长延迟的低质量水平,300ms是一个合理的“差”阈值。

可实现性#

使用CrUX的数据,我们确定网络上的大多数来源在第75个百分位满足100ms FID“良好”阈值:

%对于FID 100ms阈值,被归类为“良好”的关键源

此外,我们观察到,整个网络的顶级网站都能够在第75个百分位达到这一阈值(通常在第95个百分位达到)。

鉴于上述情况,我们得出结论,100ms是FID合理的“良好”阈值。

Cumulative Layout Shift

体验质量#

累积布局移位(CLS)是一种新的度量标准,它测量页面的可见内容移动了多少。考虑到CLS是新的,我们不知道有研究可以直接告知该指标的阈值。因此,为了确定一个与用户期望一致的阈值,我们评估了具有不同布局偏移量的真实页面,以确定在使用页面内容时导致显著中断之前可以接受的最大偏移量。在我们的内部测试中,我们发现从0.15或更高的水平变化一直被认为是破坏性的,而0.1及以下的变化是明显的,但不是过度破坏性的。因此,虽然零布局偏移是理想的,但我们得出的结论是,高达0.1的值是候选的“良好”CLS阈值。

可实现性#

根据CrUX数据,我们可以看到近50%的原产地的CLS为0.05或更低。

%划分为“良好”的关键点来源(针对候选CLS阈值)

虽然CrUX数据表明0.05可能是一个合理的CLS“良好”阈值,但我们认识到,在某些用例中,当前很难避免破坏性的布局转换。例如,对于第三方嵌入内容,如社交媒体嵌入,嵌入内容的高度有时直到加载完成才知道,这可能导致布局偏移大于0.05。因此,我们得出的结论是,虽然许多起源满足0.05阈值,但稍微不那么严格的CLS阈值0.1在经验质量和可实现性之间实现了更好的平衡。我们希望,未来,web生态系统将确定解决方案,以解决第三方嵌入导致的布局变化,这将允许在未来的核心web生命周期迭代中使用更严格的CLS“良好”阈值0.05或0。

此外,为了确定CLS的“差”阈值,我们使用CrUX数据来确定大多数来源满足的阈值:

%划分为“差”的关键点来源(针对候选CLS阈值)

以0.25为标准,大约20%的手机用户和18%的桌面用户被归为“差”。这在我们10-30%的目标范围内,因此我们得出结论,0.25是可以接受的“差”阈值。