CLS 问题仅作为现场数据的一部分 - 如何诊断? [英] CLS issue only as a part of field data - how to diagnose it?
问题描述
PageSpeed Insight 的网站是唯一一个我在现场和实验室数据中都遇到 CLS 问题的地方.
任何其他 Lighthouse 实例(通过 WPT、作为 API 或通过 DevTools)仅在现场数据中显示 CLS 问题，而不是在实验室中.
我如何正确诊断哪些元素导致了 CLS?
但是在示例站点上，我得到了 CLS 诊断，但没有显示.
合成(实验室)测试仅加载页面(不与其交互)，而字段数据直到页面卸载.
立即我可以看到一个布局转换是当您打开任一下拉菜单时，滚动条消失(由于添加了 .overlayed 类)并且整个页面都在移动.综合测试不会打开菜单，因此永远不会捕获它，但这实际上不应该对 CLS 有帮助，因为它需要交互才能打开(只是需要修复).
我注意到的另一件事是当您滚动时右下角的图标会导致布局偏移，并且它们会折叠/打开(浮动图标).这很可能是 CLS 的原因，因为它不是通过直接交互.在 CLS 中，滚动不算作用户交互.
我的猜测是合成测试有时会发现这种情况，而其他时候不会.
寻找布局变化
为了找到布局转换，您可以打开开发人员工具，转到渲染面板(您可能需要使用更多工具"打开它)并单击布局转换区域".所以它被选中了.
现在使用该网站，您会在任何变化的地方看到一个蓝色框.
或者您可以使用性能跟踪
另一种方法是在性能选项卡中运行性能跟踪，然后直接使用该站点.完成后，完成跟踪，它会告诉您是否发生了布局偏移以及是什么导致了它.
在现场跟踪他们
为了自己捕捉现场布局变化，您应该使用类似 Google Web Vitals 库 连同点击/鼠标位置跟踪等，并将其传送到您自己的后端或 Google Analytics 进行分析.
这让您可以使用实时真实用户指标 (RUM) 数据更快、更轻松地发现页面问题.
The website of PageSpeed Insight is the only place, where i get CLS issue in both of field and lab data.
Any other Lighthouse instance (by WPT, as API or by DevTools) displays CLS issue only in field data, not in the lab.
How can i diagnose correctly, which elements are causing CLS? Example.
PS: My question has the following cause: analyzing other websites i usually have under devtools → performance red diamonds layout shift, which, if clicked, display in tab Summary some data about this layout shift. Like on the screenshot:
But on the example site i get CLS diagnosted, but not displayed.
The synthetic (lab) tests only load the page (they do not interact with it), whereas field data is until page unload.
Immediately I can see one Layout shift is when you open either of the drop down menus, your scroll bars disappear (due to adding the class .overlayed) and the whole page shifts around. Synthetic tests do not open the menu so will never capture it, however this shouldn't actually contribute to CLS as it requires interaction to open (just something to fix).
The other thing I noticed is the bottom right corner icons cause a layout shift when you scroll and they collapse / open (the floating icons). This is likely to be the cause of CLS as it isn't via direct interaction. Scrolling does not count as user interaction when it comes to CLS.
My guess is that this is the one that gets found by synthetic tests sometimes and not others.
Finding Layout Shifts
In order to find layout shifts you can open developer tools, go to rendering panel (you may need to open it with "more tools") and click "Layout Shift Regions" so it is selected.
Now use the site and you will get a blue box around anything that shifts.
Or you could use performance traces
The other way is to run a performance trace in the performance tab and then just use the site. Once you are done complete the trace and it will tell you if a layout shift occurred and what item caused it.
Tracking them in the field
In order to capture layout shifts in the field yourself you should use something like Google Web Vitals library along with click / mouse position tracking etc and pipe it to your own backend or Google Analytics for analysis.
This lets you find issues with the page a lot more quickly and easily using Real User Metrics (RUM) data in real-time.
这篇关于CLS 问题仅作为现场数据的一部分 - 如何诊断?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
