努力将 CLS 在移动设备上降低到 0.1 秒以下。无法在测试中重现
Struggling to get CLS down under 0.1s on mobile. Can't reproduce it on tests
我尝试优化此页面的整个 Pagespeed，但我无法在移动设备上将 CLS 设置为 0.1 以下。我真的不知道为什么当我使用关键 css、页面缓存和字体预加载时我无法在测试中重现这些行为。
在 3G Fast 上使用模拟的 Galaxy S5 进行测试。
https://www.webpagetest.org/result/210112_DiK9_256ca61d8f9383a5b927ef5f55644338/
在任何情况下，我都接近 CLS 中的 0.1。
现场数据和来源摘要
现场数据和来源摘要是真实世界的数据。
这些指标与 Page Speed Insights 运行的综合测试之间存在关键差异。
例如：CLS 在现实世界中被测量到 页面卸载，正如在 Google Chrome 上工作的 explanation on CLS from Addy Osmani 中提到的].
因此，如果页面在某些屏幕尺寸下表现不佳（因为 Lighthouse/PSI 默认仅测试一种移动屏幕尺寸）或者延迟加载等情况在真实世界并在加载速度太慢时导致布局偏移。
也可能是某些浏览器、连接速度等等
如何找到破坏 Web Vitals 的页面/根本原因？
假设您有一个页面在 Lighthouse 综合测试中表现良好，但在某些屏幕尺寸下在现实世界中表现不佳。你如何识别它？
为此，您需要收集真实用户指标 (RUM) 数据。
RUM 数据是在真实用户使用您的网站时在现实世界中收集的数据，并存储在您的服务器上以供日后分析/问题识别。
有一种简单的方法可以自己完成，使用 Web Vitals Library。
这允许您收集 CLS, FID, LCP, FCP and TTFB 数据，这些数据足以识别性能不佳的页面。
您可以将收集到的数据通过管道传输到 your own API, or to Google Analytics 进行分析。
如果您收集 web vitals 信息并将其与用户代理字符串（以获取浏览器和 OS）以及浏览器大小信息（以获取有效屏幕大小）结合起来，则可以缩小范围问题取决于特定的浏览器、特定的屏幕尺寸、特定的连接速度（您可以从高 FCP / LCP 数字中看到连接速度较慢）等
我尝试优化此页面的整个 Pagespeed，但我无法在移动设备上将 CLS 设置为 0.1 以下。我真的不知道为什么当我使用关键 css、页面缓存和字体预加载时我无法在测试中重现这些行为。
在 3G Fast 上使用模拟的 Galaxy S5 进行测试。 https://www.webpagetest.org/result/210112_DiK9_256ca61d8f9383a5b927ef5f55644338/
在任何情况下，我都接近 CLS 中的 0.1。
现场数据和来源摘要
现场数据和来源摘要是真实世界的数据。
这些指标与 Page Speed Insights 运行的综合测试之间存在关键差异。
例如：CLS 在现实世界中被测量到 页面卸载，正如在 Google Chrome 上工作的 explanation on CLS from Addy Osmani 中提到的].
因此，如果页面在某些屏幕尺寸下表现不佳（因为 Lighthouse/PSI 默认仅测试一种移动屏幕尺寸）或者延迟加载等情况在真实世界并在加载速度太慢时导致布局偏移。
也可能是某些浏览器、连接速度等等
如何找到破坏 Web Vitals 的页面/根本原因？
假设您有一个页面在 Lighthouse 综合测试中表现良好，但在某些屏幕尺寸下在现实世界中表现不佳。你如何识别它？
为此，您需要收集真实用户指标 (RUM) 数据。
RUM 数据是在真实用户使用您的网站时在现实世界中收集的数据，并存储在您的服务器上以供日后分析/问题识别。
有一种简单的方法可以自己完成，使用 Web Vitals Library。
这允许您收集 CLS, FID, LCP, FCP and TTFB 数据，这些数据足以识别性能不佳的页面。
您可以将收集到的数据通过管道传输到 your own API, or to Google Analytics 进行分析。
如果您收集 web vitals 信息并将其与用户代理字符串（以获取浏览器和 OS）以及浏览器大小信息（以获取有效屏幕大小）结合起来，则可以缩小范围问题取决于特定的浏览器、特定的屏幕尺寸、特定的连接速度（您可以从高 FCP / LCP 数字中看到连接速度较慢）等