时间戳

首页 > 解决方案 > 使用内容可见性属性会影响累积布局偏移 (CLS) 指标吗？

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

问题描述

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

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

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

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

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

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

https://www.godaddy.com

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

还有人观察这个吗？灯塔如何测量 CLS 的潜在错误？

标签： lighthouseweb-vitals

解决方案

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

内容可见性的错误修复：自动当内容可见性：自动功能在 Chrome 85 中提供时，存在影响 CLS 的缺陷：内容可见性的跳过和未跳过状态之间的变化：自动子树导致观察到内容中的布局变化；可见性：调整大小时的自动元素。

在 Chrome 88 中，CLS 问题已得到修复。展望未来，此类元素不应受到 CLS 惩罚。（请注意，与 content-visibility: auto 元素相邻（但不是其后代）的屏幕元素仍然可能存在布局变化。

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

推荐阅读