Минимальное смещение макета

Сдвиг макета происходит, когда видимый элемент на вашей странице меняет положение или размер, влияя на положение контента вокруг него. Иногда сдвиг является намеренным, например, когда контейнер расширяется в результате действия пользователя. Однако динамичный характер рекламы может привести к неожиданным изменениям макета , что отрицательно скажется на пользовательском опыте и может вызвать серьезные проблемы с удобством использования.

В этом руководстве объясняется, как измерить и минимизировать сдвиг макета при работе с тегами издателя Google (GPT).

Как реклама вызывает сдвиг макета

Объявления обычно запрашиваются асинхронно и динамически добавляют контент на вашу страницу во время или после загрузки страницы. Пока выполняется получение рекламы, остальная часть страницы продолжает загружаться, и пользователю может стать видимым нерекламный контент. Если вы не зарезервируете достаточно места для загружаемых объявлений, они могут в конечном итоге вытеснить видимый нерекламный контент, когда они в конечном итоге будут добавлены на страницу.

При работе с тегами издателя Google в жизненном цикле объявления есть несколько моментов, когда может произойти изменение макета:

1. При вызове display() . Слот может расширяться или сворачиваться в зависимости от того, как он был настроен.
2. Когда отображается рекламный контент. Размер рекламного места можно изменить, если показывается переменная реклама или если по другим причинам недостаточно места. На этом этапе слот также может развернуться или свернуться, в зависимости от того, как он был настроен.
3. После обработки рекламного контента. Некоторые типы объявлений предназначены для раскрытия после появления на странице.

Имейте в виду, что чем выше рекламное место находится в области просмотра, тем больше контента оно может вытеснить. Будьте особенно осторожны со слотами в верхней части начального окна просмотра (над сгибом). Эти места могут вызвать непропорциональное изменение макета, поскольку они с большей вероятностью будут видны при загрузке рекламного контента.

Измерение смещения макета

Совокупное изменение макета (CLS) — это показатель Core Web Vitals , который можно использовать для количественной оценки влияния изменений макета на ваш сайт как в лаборатории, так и в полевых условиях.

Важно: стандарты Core Web Vitals рекомендуют, чтобы 75-й процентиль CLS вашего сайта был меньше 0,1, чтобы считаться «хорошим». Этот стандарт охватывает все изменения макета вашего сайта, а не только те, которые вызваны рекламой.

В лаборатории

Лабораторные инструменты измеряют CLS синтетически. Это означает, что они не полагаются на реальное взаимодействие с пользователем, что делает их хорошо подходящими для использования в рабочих процессах непрерывной интеграции и локальной разработки. Однако эти инструменты обычно измеряют производительность только во время загрузки страницы и ограничены условиями, которые они могут моделировать, поэтому сообщаемые значения могут быть ниже, чем у реального пользователя.

Аудит рекламы издателей для Lighthouse – это инструмент, который можно использовать для измерения CLS, конкретно связанного с объявлениями GPT. Подробную информацию см. в документации по аудиту смены макета, связанной с сокращением рекламы .

Chrome DevTools также можно настроить для выделения изменений макета при навигации по сайту. Это можно использовать для определения вручную изменений макета, которые происходят возле рекламных мест на вашей странице.

В поле

Полевые инструменты измеряют CLS, который испытывают реальные пользователи при взаимодействии с вашим сайтом. Этот процесс широко известен как мониторинг реальных пользователей (RUM). RUM позволяет наблюдать, как на CLS влияют реальные факторы, такие как возможности устройства, условия сети, взаимодействие с пользователем и персонализация страницы, которые часто сложно или невозможно смоделировать с помощью синтетических тестов.

Примечание. Вы также можете использовать API нестабильности макета для измерения CLS вручную в полевых условиях.

Минимизация смещения макета

Единственный гарантированный способ избежать смещения макета — зарезервировать достаточно места для данного рекламного места с помощью CSS. Установка фиксированной высоты и ширины непосредственно в div рекламного места — наиболее эффективный способ сделать это. Однако, хотя это хорошо работает для статических рекламных мест фиксированного размера, более сложные сценарии могут потребовать более тонкого подхода. Некоторые распространенные сценарии описаны в следующих разделах.

Рекламные места разных размеров

Для рекламных мест, допускающих несколько размеров, мы рекомендуем один из следующих подходов:

• Зарезервируйте место для самого большого размера, настроенного для обслуживания.
• Зарезервируйте место для наименьшего размера, настроенного для обслуживания.
• Зарезервируйте место для размера, который с наибольшей вероятностью будет показан, что определяется на основе исторических данных о заполнении из отчетов Google Ad Manager.

Внимание! Обратите внимание на настройки расширения и сжатия рекламных мест , которые могут повлиять на диапазон размеров, подходящих для показа в ваших рекламных местах.

Выбор правильного подхода

Резервирование места для наибольшего размера, настроенного для обслуживания, является наиболее эффективным способом устранения изменений макета. Однако этот метод может привести к появлению лишнего пустого пространства вокруг объявления в случае показа креатива, размер которого меньше зарезервированного. Уменьшение рекламного места до размера отображаемого объявления приведет к дополнительному изменению макета, поэтому рекомендуется избегать этого. Вместо этого можно использовать вертикальное и горизонтальное центрирование , чтобы уменьшить визуальное воздействие избыточного пустого пространства.

С другой стороны, резервирование места для наименьшего размера, настроенного для показа, позволяет избежать лишнего пустого пространства вокруг вашего объявления. Это может быть хорошим вариантом, если ваше рекламное место обычно заполнено креативами меньшего размера или в тех случаях, когда все размеры, поддерживаемые рекламным местом, одинаковы. Однако этот метод приводит к сдвигу макета в случае показа объявления, размер которого превышает зарезервированный (хотя такие сдвиги обычно меньше по сравнению с отсутствием резервирования места вообще).

Чтобы найти баланс между пустым пространством и изменениями макета, вы можете зарезервировать «средний» объем места для своих рекламных мест. Например, резервирование 100px по вертикали приводит к появлению небольшого пустого пространства при показе объявления 320x50 , но снижает оценку CLS по сравнению с отсутствием места вообще. Вам придется поэкспериментировать с разными размерами, чтобы найти лучший баланс для вашего сайта.

При определении количества места, которое необходимо зарезервировать для определенного места, изучение исторических данных о заполнении из отчетов Google Ad Manager может помочь вам принять более обоснованное решение. Лучше всего это можно проиллюстрировать, рассмотрев несколько примеров.

Примечание. Показанные здесь примеры иллюстрируют лишь часть процесса определения объема резервируемого пространства. После внесения изменений обязательно просмотрите данные на местах и ​​продолжайте вносить корректировки до тех пор, пока 75-й процентиль CLS вашего сайта не достигнет контрольного показателя 0,1.

Пример №1

Размер объявления (поставлено)	Показы рекламного сервера (%)
300x250	70%
320x50	30%

В этом случае резервирование 250px по вертикали может значительно снизить CLS, поскольку большинство отображаемых объявлений имеют 300x250 .

Пример №2

Размер объявления (поставлено)	Показы рекламного сервера (%)
970x90	60%
728x90	10%
320x50	20%
728x250	5%
300x250	5%

В этом случае большинство объявлений имеют высоту не более 90px , поэтому резервирование 90px по вертикали позволит избежать смещения макета в большинстве случаев.

Как зарезервировать место

Мы рекомендуем решить эту проблему, указав размер рекламного места с помощью свойств CSS min-height и min-width :

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

Использование атрибутов min-height и min-width позволяет зарезервировать минимальный объем места для рекламного места, в то же время позволяя браузеру увеличивать размер контейнера по мере необходимости. Это гарантирует, что контент не будет обрезан в случае показа более крупного объявления.

Вы можете комбинировать эту технику с медиа-запросами CSS , чтобы указать разные минимумы для разных размеров экрана:

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

Следует избегать резервирования места с помощью JavaScript, поскольку это может привести к сдвигу макета во время загрузки сценария. Резервирование места с помощью CSS позволяет избежать этого риска.

Гибкие рекламные места

Для гибких рекламных мест не указан фиксированный набор поддерживаемых размеров. Вместо этого эти слоты автоматически изменяют размер в соответствии с предоставляемым им креативным контентом, что позволяет им поддерживать креативы неопределенного размера. В результате невозможно зарезервировать место для этих мест до запроса рекламного контента, а объявления с изменяемым размером всегда вызывают изменения макета.

Чтобы смягчить последствия изменений макета при работе с гибкими рекламными местами, мы рекомендуем следующее:

• Используйте fluid размер только для прорезей ниже сгиба.
• Извлекайте гибкие слоты как можно раньше, чтобы свести к минимуму вероятность того, что пользователь прокрутит их в поле зрения до изменения размера слота.

Свертывание и развертывание рекламных мест

Метод collapseEmptyDivs() позволяет свернуть элементы div рекламных мест, чтобы они не занимали место на странице, когда нет рекламного контента для отображения. Однако эту функцию следует использовать с осторожностью, поскольку она может привести к непреднамеренным изменениям макета. Как отмечалось в предыдущем разделе , свертывание и расширение рекламных мест может привести к изменению макета в двух разных точках жизненного цикла объявления.

Если вам необходимо использовать эту функцию, вы можете уменьшить влияние изменений макета, используя исторические данные о заполнении из отчетов Менеджера рекламы, чтобы реализовать следующие рекомендации:

• Слоты, которые могут быть заполнены, всегда должны начинаться с расширения .
• Слоты, которые вряд ли будут заполнены, всегда должны начинаться со свернутого состояния .

Пример реализации см. в примере «Свернуть пустые рекламные места» .