提高 CLS 指标

计划改进 CLS 指标,使其对长时间打开的网页更为公平。

Annie Sullivan
Annie Sullivan
Hongbo Song
Hongbo Song

发布时间:2021 年 4 月 7 日

我们(Chrome 速度指标团队)最近概述了我们在如何让 CLS 指标更公平地对待长时间打开的网页方面的初步研究。我们收到了许多非常有用的反馈,在完成大规模分析后,我们最终确定了对该指标进行的更改:会话时长上限为 5 秒,间隔时间为 1 秒

请继续阅读,了解详情!

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

我们已审核从开发者社区收到的所有反馈,并将其纳入考量。

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

  • 所有选项都降低了网页浏览时长与布局偏移得分之间的相关性。
  • 所有选项都不会导致任何网页的得分降低。因此,您无需担心这项更改会降低您网站的得分。

决策点

为什么要设置会话时段?

先前的博文中,我们介绍了几种不同的数据选取策略,用于将布局偏移组合在一起,同时确保得分不会无限增长。我们从开发者那里收到的反馈绝大多数都支持会话时间范围策略,因为该策略最直观地将布局偏移分组在一起。

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

会话窗口示例。

在上例中,随着用户浏览网页,会出现许多布局偏移。每个数据点都由一条蓝色条状图表表示。您会发现上方的蓝条高度不同;这些条代表每一次布局偏移的得分。会话窗口从第一次布局偏移开始,并会持续扩展,直到出现没有布局偏移的时间间隔。当发生下一次布局偏移时,系统会启动新的会话窗口。由于有三个没有布局偏移的间隔,因此该示例中有三个会话时段。与 CLS 的当前定义类似,系统会将每次偏移的分数相加,因此每个窗口的分数是其各个布局偏移的分数之和。

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

为什么要设置会话时长上限?

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

  • 对于非常大的会话窗口(不受上限的会话窗口,其间隔为 5 秒),所有会话窗口的平均得分。
  • 所有会话窗口的最大得分,适用于较短的会话窗口(上限为 5 秒,间隔为 1 秒)。

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