core-web-vitals - 如何在启用 Google Adsense "Let Google optimize the size of your mobile ads"的情况下避免 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):

The best method is to add a min-height value to a wrapper around each of your ad units. However, using a class to target this CSS property isn’t enough – you will need to use an ID to target this wrapper. For some unknown reason, Google AdSense’s Javascript strips out min-height directives on any parent objects.However, they do not strip this out if you use an ID to do the CSS targeting.

所以诀窍是添加一个 id以您的容器的 CSS 为目标，这应该将您的 CLS 降为 0!