我试图优化这个页面的整个页面速度，但我无法在移动设备上获得低于0.1的CLS。我真的不知道为什么，因为我使用关键的css、页面缓存和字体预加载，而且我无法在测试中重现这种行为。
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.birkengold.com%2Frezept%2Fselbstgemachte-zahnpasta
在3G Fast上使用模拟Galaxy S5进行测试。https://www.webpagetest.org/result/210112_DiK9_256ca61d8f9383a5b927ef5f55644338/
在任何情况下，我都不会接近CLS中的0.1。
字段数据和来源摘要
现场数据和原产地摘要是真实世界的数据。
这些指标与Page Speed Insights运行的合成测试之间存在关键区别。
例如：CLS是在现实世界中测量的，直到页面卸载，正如在谷歌Chrome上工作的Addy Osmani对CLS的解释中所提到的。
因此，如果页面在某些屏幕大小下表现不佳(Lighthouse/PSI默认情况下只测试一个移动屏幕大小(，或者存在诸如延迟加载之类的问题，在现实世界中表现不佳，并且加载太慢时会导致布局偏移，则页面的CLS可能会很高。
它也可以是某些浏览器，连接速度等。
你如何找到破坏你的网络简历的页面/根本原因
假设你有一个页面在Lighthouse合成测试中表现良好，但在现实世界中的某些屏幕尺寸下表现不佳。你如何识别它？
为此，您需要收集真实用户度量(RUM(数据。
RUM数据是在真实用户使用您的网站时在真实世界中收集的数据，并存储在您的服务器上，用于以后的分析/问题识别。
有一个简单的方法可以自己做到这一点，使用网络简历库。
这允许您收集CLS、FID、LCP、FCP和TTFB数据，这些数据足以识别性能较差的页面。
您可以将收集的数据管道传输到您自己的API或Google Analytics进行分析。
如果你收集并将网络生命体征信息与用户代理字符串(以获取浏览器和操作系统(和浏览器大小信息(以获取有效屏幕大小(相结合，如果问题归结为某个浏览器、某个屏幕大小、某个连接速度(因为你可以从高FCP/LCP数据中看到较慢的连接(等，你可以缩小范围。