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