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

从今天起,我们已在 Chrome 的多个 Web 工具平台(包括 Lighthouse、PageSpeed Insights 和 Chrome 用户体验报告)中推出了 CLS 变更。

Addy Osmani
Addy Osmani
Elizabeth Sweeny
Elizabeth Sweeny

今天,我们要和大家分享一下 Google Analytics 的 Cumulative Layout Shift (CLS) 指标。 对于开发者来说,这些更改将更好地反映 长期存在的网页 (例如支持无限滚动的应用或单页应用)。 这些 CLS 更新将面向 Lighthouse、 PageSpeed Insights 和 Chrome 用户体验报告。

我们都希望网络上的布局偏移能够减少。 事实证明,CLS 指标在衡量网页的视觉稳定性方面非常实用。 这有助于建议网站更好地为内容设置尺寸 例如图片或广告 可能导致用户看到内容激增

该指标的名称为“累计” 因为每次偏移的得分都是在网页的整个有效期内的总和。 虽然网络上的所有布局偏移都会造成糟糕的用户体验, 单页应用 (SPA) 或无限滚动应用等长期网页会随着时间的推移自然累积更多 CLS。 将聚合限制在最差的“窗口”内次数, 现在,无论会话时长如何,您都可以更一致地衡量 CLS。

正如我们在改进 CLS 指标中所宣布的那样,我们会将 CLS 指标调整为 间隔 1 秒的最长会话窗口,上限为 5 秒; 此更新可更好地反映长期网页的用户体验。 实施这项更改后 70% 的来源的 CLS 在第 75 百分位不会出现任何变化, 其余 30% 的来源会有所改进。

发布对 CLS 的数据窗口调整

更新后的 CLS 定义是间隔 1 秒的最长会话窗口, 最长为 5 秒这对工具意味着什么?

从今天开始, 对 CLS 的这项更改已在 Chrome 的多个 Web 工具平台上实施,包括 Lighthouse、PageSpeed Insights 和 Chrome 用户体验报告。 下图显示了 CLS 窗口调整发布摘要, 以及哪些工具仍可与原始实现进行基准化分析。

工具 CLS 窗口调整“实时” “旧”CLS 可用性
Lighthouse 开发者工具面板 Canary 版,2021 年 6 月 2 日 不适用
<ph type="x-smartling-placeholder"></ph> Lighthouse CLI v8,发布时间:2021 年 6 月 1 日 在 Lighthouse v8 中以 totalCumulativeLayoutShift 形式提供
Lighthouse CI v0.7.3,2021 年 6 月 3 日 不适用
<ph type="x-smartling-placeholder"></ph> PageSpeed Insights (PSI) 2021 年 6 月 1 日 不适用
<ph type="x-smartling-placeholder"></ph> PSI API 2021 年 6 月 1 日 lighthouseResult中以 totalCumulativeLayoutShift 的形式提供。字段“loadingExperience”数据中不可用
<ph type="x-smartling-placeholder"></ph> Chrome 用户体验报告 (CrUX) - BigQuery 202105 数据集,发布时间:2021 年 6 月 8 日 experimental.uncapped_cumulative_layout_shift 形式提供,有效期至 202111 年
<ph type="x-smartling-placeholder"></ph> Chrome 用户体验报告 (CrUX) - API 2021 年 6 月 1 日 2021 年 6 月 1 日之后,可通过以下链接获取: experimental_uncapped_cumulative_layout_shift 2021 年 12 月 14 日

Chrome 开发者工具很快也会更新,以支持窗口调整。CLS 更新也已在 Search Console 中更新,并将于 2021 年 6 月 1 日起体现。

对于大多数开发者来说, 此更改预计会无缝进行,无需执行任何操作即可利用修复的数据。

“旧”CLS

请注意,“旧”CLS 衡量的是页面在整个生命周期内的布局偏移。一些开发者可能希望除了窗口调整之外,同时监控 CLS 的旧定义, 有个好消息要告诉您:我们现在发现了“旧 CLS”和 CrUX。

在 Lighthouse v8 中 它以 JSON 格式提供 audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift

您会看到它显示为 experimental_uncapped_cumulative_layout_shift 如 CrUX API 中, 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 进行优化,因此 CLS 在性能得分中的权重较低。

在获得开发者合作一段时间后 Lighthouse 得分将 CLS 的权重从 5% 增加到了 15%, 这与使用核心网页指标 是 Lighthouse 得分中权重最高的指标。

您可以在 评分计算器

Lighthouse 评分计算器

Lighthouse 8.0 的 CLS 实现包括窗口化和子框架对 CLS 的贡献。对于 8.0 之前的版本,Lighthouse 中的 CLS 不包含子框架CLS,但现在包含。只是为了确认,由 CrUX 测量的字段 CLS 也会以类似方式处理数据选取和子帧。

不过,实验室 CLS 和现场 CLS 之间的主要区别在于,实验室 CLS 的观察期在“完全加载”时结束。根据实验室条件确定,而在现场时,观察窗口会延伸到整个网页生命周期,包括加载后活动。尽管如此,窗口调整确实可以显著减少这种差异。

亲自测量

如果您想衡量最新 CLS 实现, 您也可以使用以下 PerformanceObserver 代码段通过 RUM 为字段数据记录此信息。

或者直接使用 Web Vitals JavaScript 库 也已根据这项更改进行了更新

其他更新

除了对 Cumulative Layout Shift 的更新之外, 我们还对网络工具进行了以下与指标相关的更新:

  • 我们正在更新为 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 小组 了解有关指标的反馈,以及了解我们工具专用的反馈论坛, LighthouseChrome 用户体验报告 以解决工具问题。干杯!

在此感谢 Johannes Henkel、Rick Viscomi、Vivek Sekhar、Rachel Andrew、Miliica Mihajlija、Jeff Jose 和 Paul Ireland 的反馈。

主打图片由 Barn Images / @barnimages 在 Unsplash 内容中进行介绍