了解我们改进 Cumulative Layout Shift 指标的计划，并向我们提供反馈。
Cumulative Layout Shift (CLS) 是衡量网页视觉稳定性的指标。该指标称为“累积布局偏移”，因为每一次偏移的得分都会在网页的整个生命周期内进行求和。
虽然所有布局偏移都会导致用户体验不佳，但对于打开时间较长的网页，这些偏移会累积起来。因此，Chrome 速度指标团队决定改进 CLS 指标，使其对网页上花费的时间更为中性。
请务必确保该指标侧重于整个网页生命周期内的用户体验，因为我们发现，用户在网页加载后，在滚动或浏览网页时，往往会获得不良体验。不过，我们听到一些人担心这会对长时间打开的网页（用户通常会长时间打开的网页）产生什么影响。有几种不同类型的网页往往会保持打开状态更长时间；其中最常见的类型是支持无限滚动的社交媒体应用和单页应用。
我们对 CLS 得分较高的长时间活跃网页进行了内部分析，发现大多数问题都是由以下模式导致的：
- 无限滚动条在用户滚动时滚动内容。
- 输入处理程序在响应用户互动时更新界面所用时间超过 500 毫秒，且没有任何占位符或框架模式。
我们鼓励开发者改进这些用户体验，同时也在努力改进该指标，并就可能的方法征求反馈。
我们如何确定新指标是否更好？
在深入研究指标设计之前，我们希望确保在各种真实的网页和应用场景中评估我们的想法。首先，我们设计了一项小型用户研究。
首先，我们录制了 34 位用户在各种网站上的体验历程的视频和 Chrome 轨迹。在选择用户转化历程时，我们着眼于以下几点：
- 各种不同类型的网站，例如新闻和购物网站。
- 各种用户体验历程，例如初始网页加载、滚动、单页面应用导航和用户互动。
- 网站上各个布局偏移的数量和强度各不相同。
- 除了布局偏移之外，网站上没有太多负面体验。
我们让 41 位同事同时观看两个视频，并评分哪个视频在布局偏移方面表现更好。根据这些评分，我们创建了理想的网站排名顺序。用户排名结果证实了我们的怀疑：与大多数用户一样，我们的同事也非常不满加载后的布局偏移，尤其是在滚动和单页应用导航期间。我们发现，某些网站在这些活动期间的用户体验要优于其他网站。
由于我们同时录制了 Chrome 轨迹和视频，因此我们可以获得每个用户历程中各个布局偏移的所有详细信息。我们使用这些数据为每个用户历程中的每个想法计算指标值。这样，我们就可以了解每个指标变体对用户历程的排名情况，以及每个变体与理想排名的差异。
我们测试了哪些指标建议？
窗口策略
网页上通常会出现多个紧密相连的布局偏移，因为随着新内容逐个出现，元素可能会多次偏移。这促使我们尝试了一些用于将班次分组的技术。为此，我们研究了三种数据选取方法：
- 翻滚窗口
- 滑动窗口
- 会话窗口
在每一个示例中，网页的布局偏移都会随时间的推移而严重程度不同。每个蓝色条形代表一次布局偏移，长度表示该偏移的得分。这些图片展示了不同窗口化策略如何对一段时间内的布局变化进行分组。
翻滚窗口
最简单的方法是将页面拆分为大小相同的窗口。这类窗口称为翻滚窗口。您会注意到，上面第四个条形看起来应该归入第二个翻滚窗口，但由于窗口的大小都是固定的，因此它位于第一个窗口中。如果页面上的加载时间或用户互动略有不同，那么相同的布局偏移可能会落在翻滚窗口边界的不同一侧。
滑动窗口
为了查看更多可能的相同长度分组，我们可以不断更新潜在的时间范围。上图一次显示一个滑动窗口，但我们可以查看所有可能的滑动窗口或其中的一部分来创建指标。
会话窗口
如果我们想重点识别页面上出现布局偏移突发的区域，则可以从每次偏移开始创建每个窗口，并不断扩大该窗口，直到在布局偏移之间遇到给定大小的间隔。此方法将布局偏移组合在一起，并忽略了大部分非偏移的用户体验。一个潜在的问题是，如果布局偏移没有间隙，则基于会话窗口的指标可能会像当前的 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 开发者工具等工具中的布局偏移 rect 将继续以相同方式运作。
- 我们将继续努力让开发者可以轻松采用这些指标，包括将其纳入 web-vitals 库、在 web.dev 上记录相关文档，并在 Lighthouse 等开发者工具中报告这些指标。
指标之间的权衡
其中一种主要策略会将布局偏移窗口总结为平均值，其余策略会报告最大窗口值。对于打开时间很长的网页，平均值可能会报告更具代表性的值，但通常来说，开发者可能更容易针对单个窗口执行操作 - 他们可以记录打开时间、发生偏移的元素等。欢迎提供反馈，告诉我们哪个对开发者更重要。
您认为滑动窗口或会话窗口更容易理解吗？这些差异对您来说重要吗？
如何提供反馈
您可以使用我们的 JavaScript 实现示例或核心网页指标扩展程序分支，在任何网站上试用新的布局偏移指标。
请通过电子邮件将反馈发送至我们的 web-vitals-feedback Google 群组，并在主题行中包含“[Layout Shift Metrics]”。我们非常期待收到您的反馈！