lighthouse - 受使用内容可见性属性影响的累积布局偏移 (CLS) 指标？

Question

我们网站上的页面的 CLS 一直接近于零。这是有道理的，因为它们是服务器呈现的 HTML 页面，具有简单的静态布局。

最近我们添加了 content-visibility: auto 的使用，如下所示(仅添加到首屏部分):

https://web.dev/content-visibility/

section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

这对浏览器没有明显的影响，但根据开发工具的“性能”选项卡、chrome 灯塔测量和在 webpagetest.org 上的重复运行，对绘制/渲染指标产生了预期的显着好处

但是，我们注意到在 google pagespeed insights 的实验室数据部分，累积布局偏移 (CLS) 急剧上升了 0.006 到 1.000+:

https://www.godaddy.com

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.godaddy.com

还有人观察到这个吗？灯塔如何测量 CLS 可能存在错误？

Answer 1

可能会回答我自己的问题 - 知道已修复的 Chromium 错误，我猜它仍然存在于其他浏览器中以及任何支持 google pagespeed insights 的东西:

Bug fix for content-visibility: auto When the content-visibility: autofeature was shipped in Chrome 85, a CLS-impacting flaw was present:changes between the skipped and not-skipped state of acontent-visibility: auto subtree caused an observed layout shift inthe content;visibility: auto element as it resized.

In Chrome 88, the CLS issue was fixed. Going forward, there should beno CLS penalty for such elements. (Note that there still may be alayout shift for onscreen elements adjacent to (but not descendantsof) the content-visibility: auto element.

https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_cls.md