Как мне избежать CLS (кумулятивного сдвига макета) при включенном Google AdSense «Разрешить Google оптимизировать размер ваших мобильных объявлений»?

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

Вот несколько отличных ссылок о том, как уменьшить CLS с помощью Google AdSense ( ref1 и ref2):

Лучший способ - добавить значение минимальной высоты в оболочку вокруг каждого из ваших рекламных блоков. Однако использования класса для нацеливания на это свойство CSS недостаточно - вам нужно будет использовать идентификатор для нацеливания на эту оболочку. По неизвестной причине Javascript Google AdSense удаляет директивы min-height для всех родительских объектов. Однако они не удаляют это, если вы используете идентификатор для таргетинга CSS .

Итак, уловка состоит в том, чтобы добавить id чтобы настроить таргетинг на CSS вашего контейнера, и это должно снизить ваш CLS до 0!

Answer 2

Минимальная высота в div с идентификатором [см. ответ № 1 или здесь: https://mediarealm.com.au/articles/google-adsense-reducing-cls-cumulative-layout-shift/] помогает... но все еще испытывает трудности с адаптивными макетами в Bootstrap.

Если вы используете автоматическую рекламу AdSense, AdSense будет вставлять рекламу там, где, по его мнению, лучше всего, а это означает изменение высоты этих элементов:

      <div class="row">  

на что AdSense меняется на

      <div class="row" style="height: auto !important;">

и pagespeed также жалуется на CLS с

      <div class="alert">

Возможно, в Bootstrap можно применить подход с уникальным идентификатором к блокам строк и предупреждений (без установки минимальной высоты, поскольку на большинстве веб-сайтов все страницы разные), но даже если это сработает, это снизит доходы от рекламы. Кажется, это «Уловка-22»: у вас могут быть отличные основные показатели ИЛИ отличная оптимизация AdSense, но не то и другое. AdSense должен найти решение, предположительно путем прогнозирования оптимальных позиций, макетов и размеров объявлений до рендеринга страницы, чтобы не было CLS.