CLS 超过 1 可能吗？
CLS over 1 possible?
在我们的 PSI 数据中，我们看到一些页面的 CLS 编号过高，我们无法复制或理解这些编号。事实上，这是一个页面有 2.52 的示例，但我什至不认为有可能超过 1.0 的分数，这将是屏幕上所有内容的完全转变，我说得对吗？ data/chrome 是否存在一些问题，因为这不是一个孤立的事件......大约一个月前，我们的网站页面突然开始遭受可怕的 CLS 数据，我们感到困惑，在 GSC 的 Core Web Vitals 区域。
查看 CLS 的现场数据...2.52，但实验室数据为 .044。 PSI Link
为什么实验室数据和现场数据不同？
实验室测试（综合测试）中的 CLS 纯粹用于初始页面加载和首屏。
现场数据（真实世界）中的 CLS 是从第二次（从技术上讲是第二次）绘制事件一直到 页面卸载。
因此，如果有人滚动页面时布局发生变化，那么这些内容就会不断添加到您的 CLS 中。
如何让 CLS 大于 1？
想象一下，你滚动页面，突然出现滚动条，这会移动整个页面。现在 CLS 基于页面移动的百分比。因此，如果整个页面向左移动 10px，您将获得几乎 1 的布局偏移（将 1 视为可见页面的 100%，0.5 将移动可见页面的 50% 等）。
假设当您进一步滚动页面时，滚动条突然消失，整个页面现在向右移动了 10px。这将导致额外的布局偏移几乎为 1。
现在您的布局偏移量几乎为 1 - 您的累积 布局偏移量几乎为 2。
我简化了how layout shift is calculated但是我觉得上面的例子更容易理解原理
真实用户指标 (RUM) 是捕获此类问题的方法。
至于 CLS 数据突然变化，我建议使用 the web vitals library 之类的方法将数据通过管道传输到自定义后端或您的分析，这样您就可以查看这是否是特定设备、屏幕尺寸等.导致它。
使用开发者工具发现问题
要查看布局偏移区域，请转到开发人员工具 -> 渲染 -> 选中“布局偏移区域”，然后加载页面几次，调整大小等。
我唯一能看到的是您的移动菜单有一些非常奇怪的布局偏移区域，这些区域在大屏幕尺寸下尤其糟糕。除此之外，页面加载时会发生巨大变化，但不应超过 1.
我知道问题出在桌面上，但我不记得他们是将平板电脑数据放在桌面上还是移动现场数据...如果是桌面，那么您可能会有答案！
在我们的 PSI 数据中，我们看到一些页面的 CLS 编号过高，我们无法复制或理解这些编号。事实上，这是一个页面有 2.52 的示例，但我什至不认为有可能超过 1.0 的分数，这将是屏幕上所有内容的完全转变，我说得对吗？ data/chrome 是否存在一些问题，因为这不是一个孤立的事件......大约一个月前，我们的网站页面突然开始遭受可怕的 CLS 数据，我们感到困惑，在 GSC 的 Core Web Vitals 区域。
查看 CLS 的现场数据...2.52，但实验室数据为 .044。 PSI Link
为什么实验室数据和现场数据不同？
实验室测试（综合测试）中的 CLS 纯粹用于初始页面加载和首屏。
现场数据（真实世界）中的 CLS 是从第二次（从技术上讲是第二次）绘制事件一直到 页面卸载。
因此，如果有人滚动页面时布局发生变化，那么这些内容就会不断添加到您的 CLS 中。
如何让 CLS 大于 1？
想象一下，你滚动页面，突然出现滚动条，这会移动整个页面。现在 CLS 基于页面移动的百分比。因此，如果整个页面向左移动 10px，您将获得几乎 1 的布局偏移（将 1 视为可见页面的 100%，0.5 将移动可见页面的 50% 等）。
假设当您进一步滚动页面时，滚动条突然消失，整个页面现在向右移动了 10px。这将导致额外的布局偏移几乎为 1。
现在您的布局偏移量几乎为 1 - 您的累积 布局偏移量几乎为 2。
我简化了how layout shift is calculated但是我觉得上面的例子更容易理解原理
真实用户指标 (RUM) 是捕获此类问题的方法。
至于 CLS 数据突然变化，我建议使用 the web vitals library 之类的方法将数据通过管道传输到自定义后端或您的分析，这样您就可以查看这是否是特定设备、屏幕尺寸等.导致它。
使用开发者工具发现问题
要查看布局偏移区域，请转到开发人员工具 -> 渲染 -> 选中“布局偏移区域”，然后加载页面几次，调整大小等。
我唯一能看到的是您的移动菜单有一些非常奇怪的布局偏移区域，这些区域在大屏幕尺寸下尤其糟糕。除此之外，页面加载时会发生巨大变化，但不应超过 1.
我知道问题出在桌面上，但我不记得他们是将平板电脑数据放在桌面上还是移动现场数据...如果是桌面，那么您可能会有答案！