提高 CLS 指标

计划改善 CLS 指标,使其对长期有效的网页更加公平。

Annie Sullivan
Annie Sullivan
宋红波
Hongbo Song

我们(Chrome 速度指标团队)最近概述了我们关于使 CLS 指标对长期打开的网页更公平的选项的初步研究。我们收到了很多非常有帮助的反馈,在完成大规模分析后,我们最终确定了打算对该指标做出的更改:最大会话窗口期(间隙为 1 秒,上限为 5 秒)

继续阅读,了解详细信息!

我们是如何评估各个选项的?

我们查看了开发者社区提供的所有反馈,并已将这些反馈都考虑在内。

我们还在 Chrome 中实现了常用选项,并对数百万个网页的指标进行了大规模分析。我们查看了每个选项进行了改进的网站类型以及各个选项的比较情况,尤其是研究了不同选项给出不同评分的网站。总体而言,我们发现:

  • 全部选项降低了页面停留时间与布局偏移得分之间的关联。
  • 所有选项都不会导致任何网页的得分更差。因此,您无需担心此更改会使您网站的得分变差。

决策点

为何要设置会话窗口?

前面的博文中,我们介绍了一些不同的窗口策略,这些策略用于将布局偏移组合在一起,同时确保得分不会无限增长。我们从开发者那里收到的反馈在绝大多数情况下更青睐会话窗口策略,因为它能以最直观的方式将布局偏移组合在一起。

如需查看会话窗口,请查看以下示例:

会话窗口示例。

在上面的示例中,当用户查看页面时,会随着时间的推移而发生许多布局偏移。均以蓝色条形表示。您会发现,上面的蓝色条具有不同的高度;它们表示每次布局偏移的得分。会话窗口从第一次布局偏移开始,然后继续扩大,直至出现无布局偏移的间隙。当发生下一次布局偏移时,新的会话窗口会启动。由于存在三个间隙,且不会发生布局偏移,因此该示例中有三个会话窗口。与当前的 CLS 定义类似,每个偏移的得分会相加,因此每个窗口的得分都是其各个布局偏移的总和。

根据初始研究,我们选择了会话窗口之间 1 秒的间隔,该时间差在我们的大规模分析中效果良好。因此,上例中显示的“会话间隔”为 1 秒。

为什么会话时长上限?

在初始研究中,我们将摘要策略缩减为两个选项:

  • 针对超大会话窗口(无上限窗口,间隙为 5 秒)的所有会话窗口的平均分数。
  • 所有会话窗口的得分上限(适用于较小的会话窗口,上限为 5 秒,间隔 1 秒)。

完成初步研究后,我们将每个指标都添加到了 Chrome 中,以便对数百万个网址进行大规模分析。在大规模分析中,我们发现许多具有如下布局偏移模式的网址:

小幅布局偏移导致平均值降低的示例

在右下角,您可以看到会话窗口 2 中只有一个细微的布局偏移,因此得分非常低。这意味着平均得分很低。但是,如果开发者修复了这种细微的布局偏移,该怎么办呢?然后,仅针对会话窗口 1 计算得分,这意味着该页面的得分几乎翻了一番。如果开发者改进其布局偏移,结果却发现得分变差了,就会感到非常困惑和沮丧。移除这种细微的布局偏移显然有助于改善用户体验,因此不会使得分变差。

由于平均值存在的这一问题,我们决定进一步缩小时间范围的上限。因此,在上面的示例中,会话窗口 2 将被忽略,系统只会报告会话窗口 1 中布局偏移的总和。

为什么是 5 秒?

我们评估了多种窗口大小,发现以下两点:

  • 对于较短的窗口,网页加载速度较慢且对用户互动的响应速度较慢,可能会将布局偏移分解为多个窗口,从而提高得分。我们希望窗口足够大,以免拖慢速度减慢。
  • 有些页面会持续出现小幅布局变化。例如,体育比分页面会随着每次比分更新而略微移动。这些变化很烦人,但随着时间的推移,它们不会越来越烦人。因此,我们希望确保窗口针对这些类型的布局偏移设置了上限。

考虑到这两点,通过比较许多实际网页上的各种窗口大小,我们得出结论,5 秒窗口是比较理想的窗口大小限制。

这对我网页的 CLS 得分有何影响?

由于此更新为网页的 CLS 设置上限,因此所有网页的得分都不会因这项更改而降低

根据我们的分析,55% 的源站在第 75 百分位处不会出现 CLS 变化。这是因为他们的页面目前没有任何布局偏移,或者所做的偏移已局限于单个会话窗口中。

采用此更改后,其余来源的得分将在第 75 百分位提高。大多数玩家只会看到小幅提升,但大约 3% 的玩家得分会从“需要改进”或“很差”评分提升到“良好”评分。如之前的博文所述,这些网页往往使用无限滚动条或许多缓慢的界面更新。

如何试用?

我们很快就会更新工具,以便使用新的指标定义!在此之前,您可以使用示例 JavaScript 实现Web Vitals 扩展程序分支,在任何网站上试用更新后的 CLS 版本。

感谢花时间阅读上一篇博文并提供反馈的所有人!