【发布时间】：2021-05-15 16:29:42
【问题描述】：
我们网站上的页面的 CLS 始终接近于零。这是有道理的，因为它们是服务器渲染的 HTML 页面，具有简单的静态布局。
最近我们添加了 content-visibility: auto per below（仅添加到首屏部分）：
https://web.dev/content-visibility/
section {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}
这在浏览器中没有明显的影响，但根据开发工具的“性能”选项卡、chrome lighthouse 测量和在webpagetest.org 上的重复运行，对绘制/渲染指标产生了预期的显着好处
但是，我们注意到在 google pagespeed 洞察力的实验室数据部分中，累积布局偏移 (CLS) 急剧上升了 0.006 到 1.000+：
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.godaddy.com
还有其他人观察到这一点吗？灯塔测量 CLS 的方式可能存在错误？
【问题讨论】：
-
没有东西可以测试这是一个“一段字符串问题有多长”，但我的猜测是，因为 Page Speed Insights 在测试期间滚动到页面底部的速度比任何人都快您的内在尺寸是否与实际尺寸相差甚远，并且会导致布局发生变化，因为它会快速尝试渲染所有内容。然而，就像您实现的所有如何一样，这一点非常重要，如果您将页面上的所有内容分块到一个框中，那么是的，它肯定会导致比它解决的问题更多的问题。您是否有要测试的页面以提供更好的答案？
-
谢谢，@GrahamRitchie - 感谢您的洞察力。编辑以包含链接。块应该是合乎逻辑的——页面的每个独立的、首屏下的部分。认为团队找到了确凿的证据，我添加了一个答案，指出 Chromium 中的已知 CLS 问题正在逐步修复。
-
有趣，但是如果我在开发者工具中打开布局移位区域跟踪，如果您从
<body>元素中删除“滚动：平滑”，该页面会出现奇怪的行为。这可能与内容可见性有关，因为滚动条跳跃的方式让我认为当前位置上方的内容已被删除。此行为被scroll: smooth掩盖，但布局转换区域仍会触发（对于整个页面，因此 CLS 为 1） -
预计会有一些滚动条“跳跃”，因为
content-visibility: auto应用了尺寸限制并且屏幕外元素的高度只是近似值（我们根据部分的平均尺寸设置contain-intrinsic-size以最小化这种情况） .我在 devtools 中看到了所谓的偏移区域，但没有实际可见的偏移，并且浏览器中的灯塔也指示 CLS 为零。滚动条行为可能需要我们恢复它，但我根据滚动条行为和 CLS 指标的问题质疑这个属性的有用性...... -
对不起，我应该澄清一下，滚动条应该在您向下滚动页面和呈现元素时跳动（使页面比您所说的部分的大小更长或更短），但是不应该发生的是，您当前在页面布局中的 above 元素会再次更改大小。慢慢滚动你会明白我的意思，这就是导致 CLS 的原因（公平地说，我在 4k 显示器上查看，所以可能是资源优化 - 2 秒让我尝试 1920 像素）
标签： lighthouse web-vitals