了解我们改进 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 实现或 Core Web Vitals 扩展程序的分支，在任何网站上试用新的布局偏移指标。
请通过电子邮件将反馈发送至我们的 web-vitals-feedback Google 网上论坛，并在主题行中注明“[Layout Shift Metrics]”。我们非常期待听到您的意见和建议！