core-web-vitals - 如何在启用 Google Adsense“让 Google 优化您的移动广告尺寸”的情况下避免 CLS（累积布局转换）？

Question

由于愿意获得更好的 Web Vitals 分数，我没有使用响应式广告。

但是，在Let Google optimize the size of your mobile ads选中后，Google 似乎仍会min-height通过将 CSS 属性修改为以下内容来更改/更新其在已定义容器中的广告尺寸：

height: auto !important;
min-height: 0px !important;

有什么办法可以解决吗？

我不想取消选中它，因为收入会下降。

Answer 1

以下是关于如何使用 Google Adsense 减少 CLS 的一些很好的参考资料（ref1和ref2）：

最好的方法是在每个广告单元周围的包装器中添加一个最小高度值。然而，使用一个类来定位这个 CSS 属性是不够的——你需要使用一个 ID 来定位这个包装器。出于某种未知原因，Google AdSense 的 Javascript 去除了所有父对象的最小高度指令。 但是，如果您使用 ID 进行 CSS定位，它们不会删除这一点。

所以诀窍是添加一个id以定位容器的 CSS，这应该会将您的 CLS 降低到 0！