从今天起，我们已在 Chrome 的多个 Web 工具平台（包括 Lighthouse、PageSpeed Insights 和 Chrome 用户体验报告）中推出了 CLS 变更。
今天，我们要和大家分享一下 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 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 小组 了解有关指标的反馈，以及了解我们工具专用的反馈论坛， Lighthouse 和 Chrome 用户体验报告 以解决工具问题。干杯！
在此感谢 Johannes Henkel、Rick Viscomi、Vivek Sekhar、Rachel Andrew、Miliica Mihajlija、Jeff Jose 和 Paul Ireland 的反馈。
主打图片由 Barn Images / @barnimages 在 Unsplash 内容中进行介绍