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

Question

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

1. 有广告
2. 没有“正常”广告但有谷歌广告
3. 没有谷歌广告但有普通广告
4. 无广告

在每个场景中，我都从0获得一个CLS。

这是怎么可能的，因为url肯定有一些领域正在发生变化。谢谢!

Answer 1

你正在得到布局变换，但不是在谷歌页面速度洞察力测量的点。

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

问题是站点完全加载，然后广告加载进来。页面速度洞察不会看到这一变化，因为它已经完成了它的测试，所以它认为所有四个版本的页面是一样的。

在手机上，广告根本不加载(不确定这是否是故意的)，所以很明显它们没有效果。

除了广告加载在您的网站没有任何布局变化，我可以看到一目了然。因为您定义了高度和宽度在您的图像和渲染其他所有的同时，没有布局移动“以上的折叠”，这是PSI所看到的。

实验室数据(模拟数据)之所以与字段数据(真实世界数据)不同，是因为广告导致页面跳来跳去，并且字段数据是在人们浏览页面时收集的，而且不只是停留在页面加载时，而不像PSI。您可能会发现，在Google上工作的从Addy Osmani看CLS是有用的和相关的。

如果打开开发人员工具并打开“画图闪烁”和“布局移位区域”(在“呈现”选项卡下)，则有两个工具可以用于识别导致布局变化的原因。(就你的情况而言，这很大程度上取决于你提到的广告。)

阻止这种情况的一种方法是对广告区域做同样的处理，就像处理图像一样。在加载之前给他们一个高度，然后空间已经分配给他们了。如果不可能简单地定义固定高度，您就可以使用填充顶CSS黑客或类似的东西来实现这一点。