4种情况下的累积布局偏移量为0？

Question

我在4种情况下测试了相同的URL：

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

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

那怎么可能，因为url肯定有一些区域在变化。 谢谢！

Answer 1

您的布局正在发生变化，但在Google Page Speed Insights进行衡量的时候并非如此。

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

问题在于网站已完全加载，然后加载了广告。PageSpeed Insights将不会看到此更改，因为它已经完成了测试，因此页面的所有四个版本都相同。

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

除了广告加载到您的网站外，我一眼就看不到任何布局变化。因为您在图像上定义了高度和宽度，而渲染又一次发生，所以“折叠上方”没有布局偏移，这就是PSI所关注的。

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

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

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