使用累积布局偏移 (CLS) 现在是 Page Speed Insights (PSI) 和 Google Search Console (GSC) 的标准，我想知道如果 PSI 返回 0 值但字段数据返回高值，应该使用什么方法来识别 CLS .
例如，根据 Search Console，我有一个页面在 PSI 上得分为 0，但在桌面上获得 0.99 CLS（在移动设备上为 0）。
使用开发人员工具，我尝试打开油漆闪烁并打开布局移位区域，但仍然得到 0 移位，而字段数据显示为 0.99。
那么，您如何使用开发人员工具识别导致布局偏移的原因？
因此，由于没有人回答这个问题，我会记下我所做的，这可能不是最好的方法，所以请记住这一点！
我打开了开发工具并在网络速度下设置了一个新的配置文件，其中延迟为 1000 毫秒，速度为 50kb/s。（它在“禁用缓存”旁边显示“在线”，单击那里并转到“自定义>“添加...”）。
这有效地让您有时间查看资源加载时页面上发生的情况。
然后我转到“渲染”选项卡并打开“油漆闪烁”、“布局移动区域”和“图层边框”
然后，我只是看着页面加载，人为地放慢了速度。
这样做很明显，我通过 AJAX 加载了一个侧面菜单，但是当它加载时，由于它的边框，它大约 1px 太宽，所以它使整个主要部分向左移动了一点点。
用肉眼不可能注意到，但用上述方法确实很明显。这在自动化测试中并没有发生，因为它（某种程度上）是浏览器中依赖于加载顺序的竞争条件（对脚本使用异步，因为我在旁边进行其他操作）并且 PSI 是一致的。
我希望这对某人有所帮助，直到有人想出一种更好的方法来确定布局转换的根本原因。
正如评论中所指出的，请确保您也在不同的屏幕尺寸下进行测试。
在开发人员工具中，您可以转到Performance> Record（顶部的点）。然后使用硬刷新（shift + refresh）刷新页面。注意：最好让开发者工具侧边栏尽可能小，以模拟正确的浏览器尺寸。
当开发者工具正在录制时，您可以一直向下滚动并在到达底部时停止录制。
调整开发工具选项卡的大小，将出现一个时间线。这包括“Web Vitals”部分。在“体验”中，您会找到指示布局变化的块。
如果您将鼠标悬停在 Layout Shift 框上，该类将在网页中可见。您甚至可以放大并将鼠标悬停在顶部的时间轴上，以查看该特定时间的布局（以及导致布局偏移的布局差异）。
如果您单击 Layout Shift 框，则会有一个摘要，您可以在其中看到更改，例如“从位置移动 [...]，大小：[...x...]”
在性能部分的所有选项卡之间需要调整大小，但对我来说，这对于找出导致这些变化的类非常有帮助！希望这也适用于你。
