pagespeed - 努力在移动设备上将 CLS 降低到 0.1 秒以下。无法在测试中重现它

Question

我尝试优化此页面的整个 Pagespeed，但我无法在移动设备上获得低于 0.1 的 CLS。我真的不知道为什么当我使用关键的 css、页面缓存和字体预加载时，我无法在测试中重现这种行为。

在任何情况下，我都会接近 CLS 中的 0.1。

score 1 · Accepted Answer

字段数据和来源摘要

现场数据和来源摘要是真实世界的数据。

这些指标与 Page Speed Insights 运行的综合测试之间存在关键区别。

例如：CLS 是在现实世界中的页面卸载之前测量的，正如在 Google Chrome 上工作的 Addy Osmani 对 CLS 的解释中所提到的。

出于这个原因，如果页面在某些屏幕尺寸下表现不佳（因为 Lighthouse / PSI 默认只测试一种移动屏幕尺寸），或者如果延迟加载在现实世界中表现不佳并导致布局，则您的页面的 CLS 可能会很高当事情加载太慢时会发生变化。

也可能是某些浏览器、连接速度等。

假设您有一个页面在 Lighthouse 综合测试中表现良好，但在某些屏幕尺寸下在现实世界中表现不佳。你怎么能识别它？

为此，您需要收集真实用户指标 (RUM) 数据。

RUM 数据是在真实用户使用您的网站并存储在您的服务器上以供以后分析/问题识别时在现实世界中收集的数据。

使用Web Vitals Library有一个简单的方法可以自己完成。

这允许您收集CLS、FID、LCP、FCP和TTFB数据，这足以识别性能不佳的页面。

您可以将收集到的数据传输到您自己的 API或Google Analytics进行分析。

如果您收集然后将 Web Vitals 信息与用户代理字符串（以获取浏览器和操作系统）和浏览器大小信息（以获取有效的屏幕大小）结合起来，如果问题归结为某个浏览器，您可以缩小范围，a一定的屏幕尺寸，一定的连接速度（你可以从高 FCP / LCP 数据中看到较慢的连接）等等等等。