Web 工具中的 Cumulative Layout Shift 不断演变

从今天开始，CLS 变更已发布到 Chrome 的多个 Web 工具界面，包括 Lighthouse、PageSpeed Insights 和 Chrome 用户体验报告。

Addy Osmani

Elizabeth Sweeny

今天，我们想分享一下我们如何在 Chrome 的多个 Web 工具 surface 上改进 Cumulative Layout Shift (CLS) 指标的衡量方式。对于开发者来说，这些更改将更好地反映长期存在的页面（例如具有无限滚动或单页应用的页面）的用户体验。这些 CLS 更新将逐步应用于 Lighthouse、PageSpeed Insights 和 Chrome 用户体验报告等工具。

我们都希望网页上的布局偏移少一些。这便是 CLS 指标在衡量网页的视觉稳定性方面被证明很有用的地方。这有助于鼓励网站更好地设置内容尺寸（例如图片或广告），因为这样可能会使用户的内容出现意外飞跃。

该指标称为“累计”，因为每个偏移的得分都会在页面的整个生命周期内求和。虽然 Web 上的所有布局偏移都会导致用户体验不佳，但单页应用 (SPA) 或无限滚动应用等长期存在的网页自然会随着时间的推移累积更多的 CLS。通过将聚合限制到最糟糕的“窗口期”，现在可以更加一致地测量 CLS，无论会话时长如何。

正如我们在改进 CLS 指标中所宣布的那样，我们正在将 CLS 指标调整为最长会话期（间隔 1 秒，上限为 5 秒），此次更新能够更好地反映长效网页的用户体验。实施此更改后，70% 的源应该不会在第 75 百分位看到任何 CLS 变化，而其余 30% 的源则会有所改善。

针对 CLS 发布窗口调整

我们已经讨论过更新后的 CLS 定义是间隔为 1 秒、最长为 5 秒的最大会话时段。这对工具有何影响？

从今天开始，这项 CLS 变更已发布到 Chrome 的多个 Web 工具界面，包括 Lighthouse、PageSpeed Insights 和 Chrome 用户体验报告。您可以大致了解 CLS 窗口调整发布情况，以及哪些工具仍能够对原始实现进行基准测试。

Chrome 开发者工具也会很快更新，以支持窗口调整。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://web.dev",
  "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://web.dev'
    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://web.dev'
    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%，与让核心网页指标成为 Lighthouse 得分中权重最高的指标的方法一致。

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

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

不过，实验室 CLS 和现场 CLS 之间的主要区别在于，实验室 CLS 的观察期在“完全加载”（根据实验室条件确定）结束，而在现场，观察期的持续时间会延长到网页的整个生命周期，包括加载后活动。也就是说，窗口调整确实可以大大减少这种差异。

自行在现场进行测量

如果您希望衡量最新的 CLS 实现，还可以使用以下 PerformanceObserver 代码段通过 RUM 记录现场数据的情况。

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

其他更新

除了 Cumulative Layout Shift 的更新之外，我们还对 Web 工具进行了以下与指标相关的更新：

• 我们将更新至 Largest Contentful Paint 指标的最新定义。CrUX API、PSI、PSI API、Search Console 将于 2021 年 6 月 1 日更新。CrUX BigQuery 将于 2021 年 6 月 8 日更新。
• 在 CrUX 中，First Contentful Paint 三分箱阈值更新为：良好：[0-1.8s]，需要改进：(1.8s-3s)，不佳：[3s-♦]

总结

我们希望此更改能反映大多数网站的平稳过渡，建议您查看网页指标和优化 CLS，了解有关如何衡量和优化布局偏移的提示和技巧。 与往常一样，欢迎随时访问 web-vitals-feedback 网上论坛，获取有关指标的反馈，以及我们专门针对 Lighthouse 工具的反馈论坛，以及针对工具问题的 Chrome 用户体验报告。干杯！

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

主打图片由 Barn Images / @barnimages 发布在 Unsplash 上