4种场景下的累积布局偏移为0？

Question

我在 4 个场景下测试了相同的 URL：

1. 有广告
2. 没有“普通”广告，但有 Google 广告
3. 没有 Google 广告，但有普通广告
4. 没有广告

在每种情况下，我都会从 0 获得一个 CLS

怎么可能，因为网址肯定有正在变化的区域。 谢谢！

Answer 1

您正在发生布局变化，但不是在 Google Page Speed Insights 测量时。

广告在桌面上的加载延迟。

问题是网站完全加载，然后广告加载。Page Speed Insights 不会看到这种变化，因为它已经完成了测试，所以它认为页面的所有四个版本都是一样的。

在移动设备上，广告根本不会加载（不确定这是否是故意的），因此显然它们没有效果。

除了加载到您网站中的广告之外，没有任何我一眼就能看到的布局变化。因为您在图像上定义了高度和宽度，并且其他渲染同时发生，所以没有“首屏”布局变化，这就是 PSI 所关注的。

实验室数据（模拟数据）与现场数据（真实世界数据）不同的原因是由于广告导致页面跳转和字段数据是在人们浏览页面时收集的，而不是像 PSI 那样在页面加载时停止。您可能会发现这个在 Google Chrome 上工作的explanation on CLS from Addy Osmani 很有用且相关。 p>

如果您打开开发人员工具并打开“Paint Flashing”和“Layout Shift Regions”（在“Rendering”选项卡下），您有两个工具可用于识别导致布局偏移的原因。 （就您而言，这几乎完全取决于您提到的广告。）

阻止这种情况的一种方法是对广告区域执行与图像处理相同的操作。在他们加载之前给他们一个高度，然后已经为他们分配了空间。如果无法简单地定义固定高度，您也许可以使用 padding-top CSS hack 或类似的东西来实现此目的。