从今天起,我们已在 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 内容中进行介绍