累积布局偏移分析

与 Lighthouse、WebPageTest 和 Chrome DevTools 相比，累积布局偏移分析
累积布局偏移分析	灯塔	网页测试	Chrome 开发者工具
输出：它会生成一个 GIF 动画，显示视口中哪些元素发生了移动，并返回 CLS 分数。页面如果垂直方向移动频繁，就很难判断哪些元素发生了位移。	输出：该报告将CLS与首次内容绘制、速度指数、总阻塞时间和最大内容绘制并列列出。默认输出为HTML报告，也可通过指定标志启用JSON输出。	输出：胶片显示加载的关键帧，瀑布图则带有与胶片同步的红线。文档将 CLS 定义为页面加载过程中视口内布局偏移量的度量。	输出： “性能”面板中的“布局偏移”跟踪以紫色菱形显示偏移，并按簇分组。将鼠标悬停在元素上即可在视口中高亮显示该元素，“摘要”选项卡会显示偏移时间、分数、受影响的元素以及可能的原因。
测试条件：桌面视口固定为 1920 x 1080。移动端使用 Lighthouse Nexus 5X 配置，CPU 和网络均受到限制，以模拟良好的 3G 网络。	测试条件：它可在本地 Chrome 浏览器、开发者工具、命令行、Node 模块或 PageSpeed Insights 中运行。命令行需要 Node 22 或更高版本。	测试条件：测试在全球各地使用真实浏览器，并在可自定义的网络条件下进行。Chrome 浏览器提供的信息最为全面。
CLS定义： 1.2.0 版本采用最大会话窗口指标。测试期间会进行限流。	CLS定义： Lighthouse 等实验室工具仅在页面加载期间捕获偏移，因此其值可能低于真实用户体验到的值。	CLS定义：实验室的限制同样适用。得分是冲击分数和距离分数的乘积，目标值为0.1或更低。	CLS定义：在“摘要”选项卡中，每个班次都有自己的分数。CLS 将班次分组为最多 5 秒的会话窗口，窗口之间的间隔小于 1 秒。
开放性和自动化：命令行版本可通过 npm 安装（layout-shift-gif）。它接受 URL、设备和输出选项，以及一个可选的 cookie 文件，并支持自签名 HTTPS 证书。该页面会询问是否愿意接受 Ko-fi 捐赠（自愿）。	开放性和自动化： Lighthouse 采用 Apache 2.0 许可证。它既可以通过 Lighthouse CI 在持续集成环境中运行，也可以作为 Node 模块运行。	开放性和自动化：该代码库包含一个 Polyform Shield 1.0.0 的主分支和一个 Apache 2.0 的 Apache 分支。它提供了运行自定义实例和 REST API 的相关文档。大多数实验需要 WebPageTest Pro。

与 Lighthouse、WebPageTest 和 Chrome DevTools 相比，累积布局偏移分析

累积布局偏移分析

灯塔

网页测试

Chrome 开发者工具

输出： 它会生成一个 GIF 动画，显示视口中哪些元素发生了移动，并返回 CLS 分数。页面如果垂直方向移动频繁，就很难判断哪些元素发生了位移。

输出： 该报告将CLS与首次内容绘制、速度指数、总阻塞时间和最大内容绘制并列列出。默认输出为HTML报告，也可通过指定标志启用JSON输出。

输出： 胶片显示加载的关键帧，瀑布图则带有与胶片同步的红线。文档将 CLS 定义为页面加载过程中视口内布局偏移量的度量。

输出： “性能”面板中的“布局偏移”跟踪以紫色菱形显示偏移，并按簇分组。将鼠标悬停在元素上即可在视口中高亮显示该元素，“摘要”选项卡会显示偏移时间、分数、受影响的元素以及可能的原因。

测试条件： 桌面视口固定为 1920 x 1080。移动端使用 Lighthouse Nexus 5X 配置，CPU 和网络均受到限制，以模拟良好的 3G 网络。

测试条件： 它可在本地 Chrome 浏览器、开发者工具、命令行、Node 模块或 PageSpeed Insights 中运行。命令行需要 Node 22 或更高版本。

测试条件： 测试在全球各地使用真实浏览器，并在可自定义的网络条件下进行。Chrome 浏览器提供的信息最为全面。