提高 CLS 指标

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

Annie Sullivan
Annie Sullivan
Hongbo Song
Hongbo Song

我们(Chrome 速度指标团队)最近概述了对 使 CLS 指标对长时间打开的网页更公平的选项 时间。我们收到了大量 在完成大规模分析之后,我们确定 我们计划对指标进行的更改:1 秒的会话时长上限 最长间隔时间为 5 秒

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

我们是如何评估这些方案的?

我们审核了从开发者社区收到的所有反馈, 。

我们还实施了页首 选项 并对数百万个网页上的指标进行了大规模分析。周三 查看了每个选项有哪些改进的网站类型,以及各个选项的对比情况, 尤其要关注那些根据不同标准获得了不同评分的网站, 选项。总体而言,我们发现:

  • 所有选项都降低了页面停留时间和 布局偏移分数。
  • 以下所有选项均未导致任何网页得分降低。因此, 您需要担心这一变更会加重您网站的得分。

决策点

为什么选择会话窗口?

之前的博文中,我们介绍了 一些不同的数据选取功能 策略 将布局偏移归为一组,同时确保得分不会增加 是无界限的。在从开发者那里收到的反馈中,绝大多数看重 会话窗口策略,因为它将大部分的布局偏移归为一组, 。

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

<ph type="x-smartling-placeholder">
会话窗口示例。

在上面的示例中,当用户查看 页面。每个选项都用蓝色条形表示。您会发现,上方的蓝条 不同高度代表着以下指标的得分: 每次布局偏移会话窗口从第一次布局偏移开始 然后不断扩大,直到出现间隙且没有布局偏移的情况。当下一个 发生布局偏移,那么系统会启动一个新的会话窗口。由于使用 没有布局偏移,那么示例中有三个会话窗口。类似于 当前 CLS 的定义,系统会将每次班次的得分相加, 窗口的得分是各次布局偏移的总和。

根据最初的 研究结果,我们选择了 两个会话窗口之间相隔 1 秒,在我们的 大规模分析。因此,“会话间隙”为 1 。

为什么是最长会话窗口?

缩小了摘要的范围 策略具体到 在我们的初步研究中,我们介绍了两个选项:

  • 超大会话所有会话窗口的平均得分 窗口(窗口之间间隔 5 秒的不设置上限的窗口)。
  • 所有会话窗口的最高得分(适用于较小的会话窗口) (上限为 5 秒,两者之间间隔 1 秒)。

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

一个小幅的布局偏移拉下平均值的示例

在右下角,您可以看到只有一个细微的布局偏移 会话窗口 2,因此获得了一个非常低的分数。也就是说,平均得分 非常低但是,如果开发者修复了这种微小的布局偏移,该怎么办呢?然后, 系统只在会话窗口 1 内计算得分,也就是说,网页的得分 几乎双倍。这会让开发者感到困惑和沮丧 来改进布局偏移,结果却发现得分变差了。且 显然,消除这种小的布局偏移对用户来说 因此不应该会导致分数变差。

由于平均值存在这一问题,我们决定继续使用 更小、有上限和最大窗口。因此,在上面的示例中,会话窗口 2 将被忽略,只有会话窗口 1 中的布局偏移总和 进行举报。

为什么是 5 秒?

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

  • 如果窗口较短,网页加载速度会比较缓慢,对用户互动的响应速度也会比较慢 可以将布局偏移拆分为多个窗口并提高得分。周三 我希望保持足够大的车窗,以免导致行驶缓慢路段!
  • 有些网页会不断发生小幅布局偏移。对于 例如,“体育赛事比分”页面会随着每次得分更新而略有变化。这些 转变很烦人,但它们不会随着时间的流逝而变得更烦人。我们 希望确保窗口在此类布局偏移时达到上限。

基于这两个因素,比较许多设备上的各种窗口大小, 因此我们得出结论,5 秒对 窗口大小。

这对网页的 CLS 得分会有什么影响?

由于此更新对网页的 CLS 设置了上限,因此任何网页的得分都不会低于 更改。

根据我们的分析,55% 的源的 CLS 根本不会发生变化 第 75 百分位的值。这是因为他们的页面目前没有 或者他们所做的一些偏移已经局限于 单个会话窗口。

对于其余来源,在第 75 个百分位的得分会有所提高, 变更。大多数用户仅会有轻微的提升,但约 3% 的用户会看到 他们的得分因“需要改进”而提高或“糟糕”评分为 获得“良好”评分。此类页面往往使用无限滚动条, 如前文所述 帖子

如何试用?

我们即将更新相关工具,以便使用新的指标定义!在此之前, 您可在任意网站上试用经过更新的 CLS 版本,示例 JavaScript 实现 也就是“网页指标的分支” 扩展程序

感谢所有抽出宝贵时间阅读上一篇帖子的每一个人, 反馈!