问题描述
PageSpeed Insight 的网站是唯一一个我在现场和实验室数据中都遇到 CLS 问题的地方。
任何其他 Lighthouse 实例（通过 WPT、作为 API 或通过 DevTools）仅在现场数据中显示 CLS 问题，而不是在实验室中。
我如何正确诊断哪些元素导致了 CLS？ Example。
PS：我的问题有以下原因：分析我通常在 devtools → performance 下的其他网站红色菱形布局偏移，如果点击，会在选项卡中显示摘要有关此布局的一些数据转移。就像截图一样：
解决方法
合成（实验室）测试仅加载页面（不与其交互），而字段数据直到页面卸载。
我立即可以看到一个布局转换是当您打开任一下拉菜单时，滚动条消失（由于添加了 .overlayed 类）并且整个页面都在移动。综合测试不会打开菜单，因此永远不会捕获它，但这实际上不应该对 CLS 有帮助，因为它需要交互才能打开（只是需要修复）。
我注意到的另一件事是当您滚动时右下角的图标会导致布局偏移，并且它们会折叠/打开（浮动图标）。这很可能是 CLS 的原因，因为它不是通过直接交互。在 CLS 中，滚动不算作用户交互。
我的猜测是合成测试有时会发现这种情况，而其他时候不会。
寻找布局变化
为了找到布局偏移，您可以打开开发人员工具，转到渲染面板（您可能需要使用“更多工具”打开它）并单击“布局偏移区域”以将其选中。
现在使用该网站，您会在任何变化的地方看到一个蓝色框。
或者您可以使用性能跟踪
另一种方法是在性能选项卡中运行性能跟踪，然后直接使用该站点。完成后，完成跟踪，它会告诉您是否发生了布局偏移以及是什么项目导致的。
在现场跟踪他们
为了自己捕捉现场的布局变化，您应该使用 Google Web Vitals library 之类的东西以及点击/鼠标位置跟踪等，并将其通过管道传输到您自己的后端或 Google Analytics 进行分析。
这让您可以使用实时真实用户指标 (RUM) 数据更快、更轻松地发现页面问题。