performance - 如果 Page Speed Insights 说一件事而 Search Console 说另一件事，如何找到累积布局转换问题

使用累积布局偏移 (CLS) 现在是 Page Speed Insights (PSI) 和 Google Search Console (GSC) 的标准，我想知道如果 PSI 返回 0 值但字段数据返回高值，应该使用什么方法来识别 CLS .

例如，根据 Search Console，我有一个页面在 PSI 上得分为 0，但在桌面上获得 0.99 CLS（在移动设备上为 0）。

使用开发人员工具，我尝试打开油漆闪烁并打开布局移位区域，但仍然得到 0 移位，而字段数据显示为 0.99。

那么，您如何使用开发人员工具识别导致布局偏移的原因？

标签： performancelighthousepagespeed-insightscore-web-vitals

因此，由于没有人回答这个问题，我会记下我所做的，这可能不是最好的方法，所以请记住这一点！

我打开了开发工具并在网络速度下设置了一个新的配置文件，其中延迟为 1000 毫秒，速度为 50kb/s。（它在“禁用缓存”旁边显示“在线”，单击那里并转到“自定义>“添加...”）。

这有效地让您有时间查看资源加载时页面上发生的情况。

然后我转到“渲染”选项卡并打开“油漆闪烁”、“布局移动区域”和“图层边框”

然后，我只是看着页面加载，人为地放慢了速度。

这样做很明显，我通过 AJAX 加载了一个侧面菜单，但是当它加载时，由于它的边框，它大约 1px 太宽，所以它使整个主要部分向左移动了一点点。

用肉眼不可能注意到，但用上述方法确实很明显。这在自动化测试中并没有发生，因为它（某种程度上）是浏览器中依赖于加载顺序的竞争条件（对脚本使用异步，因为我在旁边进行其他操作）并且 PSI 是一致的。

我希望这对某人有所帮助，直到有人想出一种更好的方法来确定布局转换的根本原因。

更新

正如评论中所指出的，请确保您也在不同的屏幕尺寸下进行测试。