了解我们改进累积布局偏移指标的计划，并向我们提供反馈。
累积布局偏移 (CLS) 是衡量网页视觉稳定性的指标。该指标被称为累积布局偏移，因为每个单独偏移的分数在页面的整个生命周期中都会被累加。
虽然所有布局偏移都会带来糟糕的用户体验，但在长时间打开的页面上，它们确实会累积得更多。这就是 Chrome Speed Metrics 团队着手改进 CLS 指标的原因，使其更中立于页面上花费的时间。
重要的是，该指标要关注用户在整个页面生命周期中的体验，因为我们发现用户在加载后、滚动或浏览页面时经常会有负面体验。但我们听到了关于这如何影响长生命周期页面的担忧——用户通常长时间打开的页面。有几种不同类型的页面往往会长时间保持打开状态；最常见的一些是带有无限滚动的社交媒体应用和单页应用。
对 CLS 分数高的长生命周期页面的内部分析发现，大多数问题是由以下模式引起的
- 无限滚动器在用户滚动时偏移内容。
- 输入处理程序花费超过 500 毫秒来更新 UI 以响应用户交互，而没有任何类型的占位符或骨架模式。
虽然我们鼓励开发者改进这些用户体验，但我们也致力于改进指标，并寻求对可能方法的反馈。
我们如何判断新指标是否更好？
在深入研究指标设计之前，我们希望确保我们在各种真实世界的网页和用例中评估我们的想法。首先，我们设计了一个小型用户研究。
首先，我们录制了 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 DevTools 等工具中的布局偏移矩形将继续以相同的方式工作。
- 我们将继续努力使指标易于开发者采用，包括将它们添加到 web-vitals 库中，在 web.dev 上记录它们，并在我们的开发工具（如 Lighthouse）中报告它们。
指标之间的权衡
顶级策略之一将布局偏移窗口汇总为平均值，其余策略报告最大窗口。对于打开时间非常长的页面，平均值可能会报告更具代表性的值，但总的来说，开发者可能更容易对单个窗口采取行动——他们可以记录其发生的时间、偏移的元素等等。我们很想听取关于哪一个对开发者更重要的反馈。
您是否觉得滑动窗口或会话窗口更容易理解？这些差异对您来说重要吗？
如何提供反馈
您可以使用我们的 示例 JavaScript 实现 或我们的 Core Web Vitals 扩展的 fork 版本，在任何网站上试用新的布局偏移指标。
请将反馈通过电子邮件发送到我们的 web-vitals-feedback Google 群组，主题行中包含“[Layout Shift Metrics]”。我们非常期待听到您的想法！