网络工具中不断演变的累积布局偏移

使用集合保持井井有条 根据您的偏好保存内容并进行分类。

从今天开始，CLS 的一项更改已在多个 Chrome 网络工具界面中推出，包括 Lighthouse、PageSpeed Insights 和 Chrome UX Report。

Addy Osmani

Elizabeth Sweeny

发布时间：2021年6月2日

今天，我们想分享我们如何在多个 Chrome 网络工具界面中改进 累积布局偏移 (CLS) 指标的衡量方式。对于开发者而言，这些更改将更好地反映 长生命周期页面（例如那些具有无限滚动或单页应用）的用户体验。这些 CLS 更新将推广到包括 Lighthouse、PageSpeed Insights 和 Chrome UX Report 在内的工具。

我们都希望在网络上看到的布局偏移更少。这就是 CLS 指标在衡量网页视觉稳定性方面被证明有用的地方。它有助于鼓励网站更好地为内容（例如图像或广告）设置尺寸，这些内容可能会导致用户的意外内容跳动。

该指标被命名为“累积”，因为每个单独偏移的分数在页面的整个生命周期中都会被累加。虽然网络上的所有布局偏移都会导致糟糕的用户体验，但像单页应用 (SPA) 或无限滚动应用这样的长生命周期页面自然会在一段时间内累积更多的 CLS。通过将聚合限制在最差的偏移“窗口”中，现在可以更一致地衡量 CLS，而无需考虑会话时长。

正如我们在 CLS 指标演变 中宣布的那样，我们将 CLS 指标调整为 最大会话窗口，间隔 1 秒，上限为 5 秒，此更新更好地反映了长生命周期页面的用户体验。随着此更改的到位，70% 的来源不应期望在第 75 个百分位看到任何 CLS 变化，而剩余 30% 的来源将看到改进。

推出 CLS 的窗口调整

我们已经讨论过更新后的 CLS 定义是最大会话窗口，间隔 1 秒，上限为 5 秒。这对工具意味着什么？

从今天开始，CLS 的这项更改已在多个 Chrome 网络工具界面中推出，包括 Lighthouse、PageSpeed Insights 和 Chrome UX Report。下面您可以看到 CLS 窗口调整推出的摘要，以及哪些工具仍然提供针对原始实现进行基准测试的功能。

Chrome DevTools 也将很快更新以支持窗口调整。CLS 的更新也已应用于 Search Console，并将从 2021 年 6 月 1 日起生效。

对于大多数开发者来说，预计此更改将无缝发生，无需采取任何操作即可利用修复程序中的数据。

“旧” CLS

作为提醒，“旧” CLS 衡量页面整个生命周期内的布局偏移。由于某些开发者可能希望在窗口调整的同时监控 CLS 的旧定义，我们有好消息要分享：我们将在 Lighthouse 和 CrUX 中公开“旧 CLS”。

在 Lighthouse v8 中，它在 JSON 中作为 audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift 提供。

您将在 CrUX API 中找到它作为 experimental_uncapped_cumulative_layout_shift，在 CrUX BigQuery 中找到它作为 experimental.uncapped_cumulative_layout_shift。

6 月 1 日之后，CrUX API 请求将返回“旧 CLS”指标

{
  "origin": "https://webdev.ac.cn",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

6 月 8 日之后，以下 CrUX BigQuery 将比较新旧 CLS

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://webdev.ac.cn'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://webdev.ac.cn'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

您将能够继续依赖此数据最多 6 个月，“旧 CLS”将于 2021 年 12 月 14 日停用。

更新 Lighthouse 中 CLS 的权重

当 CLS 首次在 Lighthouse 中引入时，它是一个全新的闪亮指标。因此，为了确保开发者有时间对其进行测试、基准测试和优化，CLS 在性能评分中的权重较低。

现在，在开发者使用一段时间后，Lighthouse 评分已将 CLS 的权重从 5% 增加到 15%，这与使 Core Web Vitals 成为 Lighthouse 评分中权重最高的指标的方法一致。

您可以在 评分计算器 中找到 Lighthouse v8 中指标的更新权重。

Lighthouse 8.0 的 CLS 实现包括窗口和来自子帧的 CLS 贡献。在 8.0 之前，Lighthouse 中的 CLS 不包括指标计算中的子帧 CLS，但现在包括了。为了确认，CrUX 测量的字段 CLS 也以类似的方式处理窗口和子帧。

尽管如此，实验室 CLS 和字段 CLS 之间的主要区别在于，实验室 CLS 的观察窗口在实验室条件下确定的“完全加载”时结束，而在字段中，观察窗口延伸到整个页面生命周期，包括加载后活动。也就是说，窗口调整确实在很大程度上减轻了这种差异。

在字段中自行测量

如果您希望测量最新的 CLS 实现，您还可以使用 以下 PerformanceObserver 代码片段通过 RUM 为您的字段数据记录此数据。

或者直接依赖 Web Vitals JavaScript 库，该库也已通过此更改进行了更新。

其他更新

除了累积布局偏移的更新之外，以下与指标相关的更新也已应用于我们的 Web 工具

• 我们正在更新到 最大内容绘制 (LCP) 指标的最新定义。CrUX API、PSI、PSI API、Search Console 将于 2021 年 6 月 1 日更新。CrUX BigQuery 将于 2021 年 6 月 8 日更新。
• 在 CrUX 中，首次内容绘制 (FCP) 三分位阈值已更新为：良好：[0-1.8 秒]，需要改进：(1.8 秒-3 秒)，差：[3 秒-∞]

结论

我们预计此更改将反映大多数网站的平稳过渡，并鼓励您查看 Web Vitals 和 优化 CLS，以获取有关如何衡量和优化布局偏移的技巧和窍门。与往常一样，欢迎随时在 web-vitals-feedback 论坛上反馈关于指标的信息，并在 Lighthouse 和 Chrome UX Report 的工具特定反馈论坛上反馈关于工具问题的信息。谢谢！

感谢 Johannes Henkel、Rick Viscomi、Vivek Sekhar、Rachel Andrew、Milica Mihajlija、Jeff Jose 和 Paul Irish 的反馈。

题图由 Barn Images / @barnimages 在 Unsplash 上提供