了解我们针对改进 Cumulative Layout Shift 指标的计划，并向我们提供反馈。
Cumulative Layout Shift (CLS) 指标用于衡量网页的视觉稳定性。该指标称为“累积布局偏移”，因为在网页的整个生命周期内，系统会对每次偏移的得分进行求和。
虽然所有布局偏移都是糟糕的用户体验，但对于打开时间较长的页面，会造成更多的布局偏移。因此，Chrome 速度指标团队着手改进 CLS 指标，使其不再局限于浏览网页所花费的时间。
该指标务必要关注整个网页生命周期内的用户体验，因为我们发现，用户在加载网页后，在滚动或浏览网页时通常会遇到负面体验。但是我们也了解到，这对长期有效的网页（用户通常会打开很长时间的网页）会造成怎样的影响。有几种不同类型的页面往往会保持更长的打开时间，其中最常见的是具有无限滚动功能的社交媒体应用和单页应用。
在对具有高 CLS 得分的长期存在的网页进行内部分析时，我们发现大多数问题是由以下模式导致的：
- 无限滚动条会随着用户滚动而移动内容。
- 输入处理程序用超过 500 毫秒的时间来更新界面以响应用户互动，且无任何种类的占位符或骨架模式。
虽然我们鼓励开发者改善这些用户体验，但我们也在努力改进该指标，并寻求关于可行方法的反馈。
我们如何确定新指标是否更好？
在深入研究指标设计之前，我们希望确保根据各种各样的实际网页和用例评估我们的想法。首先，我们设计了一项小型用户研究。
首先，我们记录了 34 位用户访问不同网站的历程的视频和 Chrome 跟踪记录。在选择用户体验历程时，我们的目标是：
- 各种不同类型的网站，例如新闻和购物网站。
- 各种用户体验历程，例如初始网页加载、滚动、单页应用导航和用户互动。
- 网站上每次布局偏移的次数和强度均不等。
- 除了布局调整之外，网站上几乎没有负面体验。
我们邀请了 41 名同事同时观看两个视频，并对其中的哪对在布局偏移方面的表现进行了评分。根据这些评级，我们建立了理想的网站排名顺序。用户排名的结果证实了我们的怀疑，我们的同事（与大多数用户一样）对加载后的布局变化感到非常沮丧，尤其是在滚动和单页应用导航期间。我们发现，在这些活动中，有些网站的用户体验比其他网站更好。
由于我们将 Chrome 跟踪记录与视频一起记录了，因此获得了每个用户体验历程中每次布局偏移的所有详细信息。我们使用这些数据来计算每个用户体验历程的每个提示的指标值。这样一来，我们就可以了解每个指标变体对用户转化历程进行排名的情况，以及每个变体与理想排名的差异。
我们测试了哪些指标参考提示？
数据选取策略
页面通常会有多次紧密排列的布局偏移，因为随着新内容的逐段增加，元素可能会多次偏移。这促使我们尝试将 shift 分组在一起的技术。为此，我们考虑了以下三种窗口化方法：
- 翻滚窗口
- 滑动窗口
- 会话窗口
在上述每个示例中，网页存在严重级别随时间而变化的布局偏移。每个蓝色条形表示一次布局偏移，长度表示该偏移的得分。这些图片说明了不同窗口策略如何对随时间变化的布局偏移进行分组。
翻滚窗口
最简单的方法是将页面拆分为多个大小相同的区块的窗口。此类窗口称为翻滚窗口。您会发现上面第四个条形实际上应该划分到第二个翻滚窗口中，但由于所有窗口都是固定大小，所以它位于第一个窗口中。如果网页的加载时间或用户互动存在细微差异，相同的布局偏移可能会发生在翻滚窗口边界的不同侧。
滑动窗口
为了让我们看到更多长度相同的分组，一种方法是随着时间的推移不断更新潜在窗口。上图一次显示一个滑动窗口，但我们可以通过查看所有可能的滑动窗口或其中一部分来创建指标。
会话窗口
如果我们想要专注于识别会发生大量布局偏移的网页区域，则可以在偏移时启动每个窗口，并不断扩大窗口，直到在布局偏移之间遇到给定大小的间隙。此方法会将布局偏移组合在一起，并忽略大多数不偏移的用户体验。一个潜在的问题是，如果布局偏移没有间隙，那么基于会话窗口的指标可能会像当前 CLS 指标一样无限增长。因此，我们还尝试设置了最大窗口大小。
窗口大小
该指标可能会根据窗口的实际大小给出截然不同的结果，因此我们尝试了多种不同的窗口大小：
- 将每个班次作为自己的窗口（无窗口）
- 100 毫秒
- 300 毫秒
- 1 秒
- 5 秒
摘要
我们尝试了许多方法来总结不同的窗口。
百分位
我们查看了最大窗口值，以及第 95 百分位、第 75 百分位和中位数。
平均值
我们查看了平均窗口值。
预算
我们想知道是否存在一些用户不会注意到的最低布局偏移分数，并且可以直接在分数中计算超过这一“预算”的布局偏移。因此，对于各种可能的“预算”值，我们查看了预算变动百分比以及总预算变动得分。
其他策略
我们还研究了许多不涉及窗口的策略，例如总布局偏移除以页面停留时间，以及最差的 N 次偏移的平均值。
初步结果
总体而言，我们根据上述想法的排列组合测试了 145 种不同的指标定义。对于每个指标，我们按用户在相应指标上的得分对所有用户体验历程进行排名，然后按它们与理想排名的接近程度对其进行排名。
为了获得基准，我们还按所有网站的当前 CLS 得分对其进行排名。CLS 排名第 32，与其他 13 种策略并列，因此优于上述大多数策略排列。为确保结果有意义，我们还随机添加了三个排序方式。不出所料，随机排序比所测试的每种策略更差。
为了解数据集是否可能过拟合，在分析之后，我们记录了一些新的布局偏移视频和轨迹，对其进行手动排名，发现新数据集与原始数据集的指标排名非常相似。
一些不同的策略在排名中非常出色。
最佳策略
在对策略进行排名时，我们发现三种类型的策略位居榜首。两种广告系列的效果大致相同，因此我们计划继续对这三种工具进行更深入的分析。我们还希望了解开发者的反馈，以了解用户体验之外是否还有其他因素，我们在做出决定时应该考虑这些因素。（请参阅下文，了解如何提供反馈。）
长窗口的高百分位数
下面几个窗口策略非常适合长窗口大小：
- 1 秒滑动窗口
- 会话窗口上限为 5 秒，间隙为 1 秒
- 会话窗口取消上限，间隔 1 秒
无论是第 95 百分位还是最高百分位，所有这些排名都非常不错。
但对于如此大的窗口大小，我们担心使用第 95 个百分位，通常我们只查看 4-6 个窗口，而第 95 个百分位需要大量插值。不清楚插值对指标值有何影响。最大值已经更清楚了，因此我们决定继续检查最大值。
间隔较长的会话窗口的平均值
将所有未设上限的会话窗口的得分（中间间隔为 5 秒）计算得到的平均值效果非常好。此策略具有一些有趣的特征：
- 如果网页在布局偏移之间没有间隙，则最终是一个长会话窗口，其得分与当前 CLS 完全相同。
- 该指标没有直接考虑空闲时间；它仅考虑网页发生的时间变化，而不考虑网页未发生变化的时间点。
短窗口的高百分位数
最长 300 毫秒的滑动窗口排名非常靠前，第 95 百分位。对于较短的窗口大小，插值比较大的窗口大小少，但我们也担心“重复”滑动窗口 - 如果在两个帧上发生一组布局偏移，则有多个 300 毫秒的窗口包含它们。计算最大值要比求第 95 百分位的值简单得多。因此，我们再次决定继续检查
无效策略
尝试查看未进行布局偏移和进行布局偏移时所用时间的“平均”体验的策略的效果非常糟糕。没有任何数据选取策略的中位数或第 75 百分位摘要对网站进行了排名。布局总和也没有随时间发生偏移。
我们评估了一系列不同的“预算”以确保可接受的布局偏移：
- 布局偏移的百分比超出某预算。对于不同的预算，这些都的排名非常差。
- 平均布局偏移超出一定范围。此策略的大多数变体效果都很差，但对于间隔很大的长时间会话，平均超限情况几乎与有长间隔的会话窗口的平均数差不多。我们决定只采用后者，因为它更简单。
后续步骤
大规模分析
我们在 Chrome 中实施了上面列出的常用策略，以便获取更大数量的网站的实际使用情况数据。我们计划使用类似的方法根据网站的指标得分对其进行排名，以进行更大规模的分析：
- 按 CLS 和每个新的候选指标对所有网站进行排名。
- 哪些网站在 CLS 排名上和每个候选网站的排名差异最大？我们在查看这些网站时，是否发现了任何意外之处？
- 新的候选指标之间最大的区别是什么？这些差异对于特定候选人的优缺点是否不同？
- 重复上述分析，但按每次网页加载所用的时间进行分桶。我们是否看到在可接受布局偏移的情况下，长期网页加载的预期改进？对于短期有效的网页，我们是否会看到任何意外结果？
对我们方法的反馈
我们希望获得 Web 开发者对这些方法的反馈。在考虑新方法时，请注意以下几点：
保持不变的方面
我们想澄清，采用新方法并不会改变很多方面：
- 我们的指标思路没有改变单个帧的布局偏移得分的计算方式，只改变我们总结多个帧的方式。这意味着，用于布局偏移的 JavaScript API 将保持不变，开发者工具使用的 Chrome 跟踪记录中的底层事件也将保持不变，因此 WebPageTest 和 Chrome 开发者工具等工具中的布局偏移矩形将继续以相同方式运作。
- 我们会继续努力让开发者能够轻松采用指标，包括将其纳入 web-vitals 库、在 web.dev 上记录指标，以及在 Lighthouse 等我们的开发者工具中报告这些指标。
指标之间的权衡
其中一个热门策略汇总了布局偏移窗口的平均值，其余的则报告最大窗口。对于打开时间很长的网页，平均值可能报告一个更具代表性的值，但一般来说，开发者对单个窗口执行操作会更容易，他们可以记录打开时间、偏移元素等。欢迎提供反馈，告诉我们哪个选项对开发者更重要。
您是否认为滑动窗口或会话窗口更易于理解？差异对你来说重要吗？
如何提供反馈
您可以使用我们的 JavaScript 实现示例或 Core Web Vitals 扩展程序分支，在任何网站上试用新的布局偏移指标。
请通过电子邮件将反馈发送至我们的 web-vitals-feedback Google 网上论坛，并在主题行中添加“[布局偏移指标]”。我们非常期待收到您的反馈意见！