Реклама Google замедляет работу

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

Реклама Google в действии

Независимо от того, что вы думаете об их содержании, CNN является одним из самых популярных сайтов в Интернете — и они используют рекламу Google. В верхней части страницы расположен большой рекламный баннер Google. Она часто появляется через несколько секунд после того, как отобразится остальная часть сайта. Эта реклама значительно замедляет загрузку страницы и вызывает большой сдвиг макета, что раздражает пользователей и может отрицательно сказаться на их рейтинге в поисковой выдаче.

Пример баннерной рекламы CNN.com

Реклама Google повсюду

Легко придираться к сайту cnn.com, но реклама Google вездесуща. Они появляются повсюду, особенно в медиаиндустрии, и вызывают проблемы с производительностью.

В этом посте мы сосредоточимся на этих крупных новостных сайтах: nytimes.com, cnn.com, foxnews.com, wsj.com и espn.com. На каждом из них есть хотя бы одна реклама Google.

Цель исследования — выяснить, какое влияние, если оно вообще есть, оказывает реклама Google на производительность сайтов?

Измерение влияния рекламы Google на производительность

Лучшим способом измерения влияния рекламы Google на производительность такого сайта, как cnn.com, было бы проведение A/B-тестов с включенной и выключенной рекламой Google на различных группах пользователей. Но мы не работаем на CNN и не контролируем их рекламу (сайт стал бы быстрее, если бы мы это сделали), поэтому мы должны использовать доступные нам инструменты.

Настройка теста

Чтобы провести A/B-тестирование веб-производительности сайтов с рекламой Google и без нее, мы будем использовать Puppeteer. Это инструмент от Google, который позволяет нам автоматизировать Chrome с помощью кода.

Чтобы попытаться обеспечить определенный уровень справедливости, каждый сайт будет загружен 10 раз с включенной рекламой Google и 10 раз с заблокированной рекламой Google. Кэш браузера будет отключен, и мы будем чередовать загрузку с рекламой и загрузку без рекламы, пытаясь сгладить любые сетевые заминки.

Вместо того чтобы блокировать всю рекламу на странице (некоторые из этих сайтов используют более одного провайдера), мы будем блокировать только те домены, которые принадлежат Google. Puppeteer позволяет нам проверять каждый исходящий запрос и блокировать его по своему усмотрению.

Время загрузки каждой страницы будет получено непосредственно из API window.performance в браузере. Мы также возьмем кумулятивный сдвиг макета, чтобы проверить, не оказывает ли реклама Google негативного влияния на The Core Web Vitals.

Медленный ход

После сбора данных со всех сайтов — с рекламой и без — результаты были очевидны. Реклама Google оказала негативное влияние на производительность каждого протестированного сайта. В большинстве случаев это влияние было значительным.

Результаты производительности нагрузки

Сайт Без рекламы С рекламой Влияние
espn.com 2.9s 3.5s В 1,2 раза медленнее
nytimes.com 2.5s 3.5s 1,4x медленнее
cnn.com 7.0s 16.7s 2.4x медленнее
foxnews.com 4.6s 16.2s 3,5x медленнее
wsj.com 2.8s 14.8s 5,3x медленнее

Время загрузки с рекламой Google и без нее

ESPN получил наименьший эффект от рекламы Google — время загрузки увеличилось всего на 20%, когда реклама была включена. На другом конце спектра время загрузки Wall Street Journal было в 5,3 раза медленнее с рекламой и без нее.

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

В целом, очевидно, что размещение рекламы от Google на вашем сайте замедляет работу.

Макеты тоже меняются

Вы когда-нибудь пытались нажать на ссылку на сайте во время его загрузки, но при этом видели, как ссылка смещается вниз, а на ее место нажимается другой элемент страницы? Это называется смещением макета, и происходит оно, когда новое содержимое заставляет существующие элементы сдвигаться и освобождать место.

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

Google измеряет это поведение как Core Web Vital под названием Cumulative Layout Shift (CLS). В дополнение к измерению влияния на производительность нагрузки, мы хотели узнать, способствуют ли рекламные объявления большему смещению макета, измерив их CLS.

Результаты кумулятивного сдвига макета

Сайт Без рекламы С рекламой Влияние
nytimes.com 0.208 0.031 В 6,7 раза лучше*
espn.com 0.0 0.0 0.0
cnn.com 0.102 0.19 1,9x хуже
wsj.com 0.009 0.087 в 9,6 раза хуже
foxnews.com 0.021 1.06 в 50 раз хуже

Кумулятивный сдвиг макета с рекламой Google и без нее

Здесь результаты не столь однозначны. ESPN отлично справляется с ограничением смещения макета в обоих случаях. New York Times фактически имеет лучший показатель CLS с включенной рекламой! (Подробнее об этом ниже)

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

У The New York Times лучший показатель CLS с включенной рекламой?

На сайте New York times с помощью CSS резервируется место для большого рекламного баннера в верхней части сайта. Когда объявление появляется, оно не вызывает перетекания или смещения макета, потому что место для него уже существует.

Когда реклама отключается, место для размещения сворачивается, вызывая больший сдвиг макета, чем если бы реклама была включена!

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

Как улучшить эффективность рекламы Google

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

Статическая загрузка скриптов

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

<script>
  var el = document.createElement('script');
  el.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
  var node = document.getElementsByTagName('script')[0];
  node.parentNode.insertBefore(el, node);
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Асинхронная загрузка статических скриптов

Google предлагает загружать скрипты асинхронно, чтобы не блокировать загрузку страницы.

<!-- Use of the async attribute on the script tag can help defer load -->
<!-- For Adsense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!--Or using the Google Publisher Tag-->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
Вход в полноэкранный режим Выход из полноэкранного режима

Несмотря на этот совет, многие сайты по-прежнему загружают рекламные скрипты с помощью медленных динамических загрузчиков или синхронно загружают статические теги скриптов.

Ленивая загрузка объявлений ниже сгиба

Нет смысла ждать загрузки объявления, которое пользователь даже не видит. Когда это возможно, загружайте рекламу ниже сгиба лениво — это предотвращает блокировку загрузки. У Google есть хороший пример ленивой загрузки, если вы используете тег Google Publisher. Google даже разместил демонстрационный ролик, чтобы вы могли увидеть его в действии.

Резервный размер для объявлений над сгибом

Предотвращение смещения макета не менее важно, чем оптимизация загрузки страницы. Самый простой способ предотвратить неприятную для пользователей смену макета — зарезервировать место для ваших объявлений, как это делает New York Times. Самый простой способ зарезервировать место — использовать CSS-свойства min-width и min-height для определения размера объявления.

<div id="banner-ad" style="min-width: 600px; min-height: 200px;"></div>
Вход в полноэкранный режим Выход из полноэкранного режима

Несколько размеров содержимого

Иногда объявления имеют несколько размеров, и в этом случае вам придется принимать решение о резервировании места. Общие стратегии таковы:

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

Google предоставляет дополнительную информацию о смене макета и лучших практиках размещения рекламы.

Заключение

Реклама может быть необходима на сайте, но важно максимально снизить ее влияние на производительность. Если вы используете Google Ads, попробуйте воспользоваться Request Metrics и улучшить производительность вашего сайта.

Request Metrics будет отслеживать кумулятивный сдвиг макета, производительность загрузки и десятки других показателей для каждого пользователя на вашем сайте. Вы получите актуальные метрики, которые покажут вам, как именно работает ваш сайт. Кроме того, вы получите 90 дней исторических данных, чтобы проверить, в правильном ли направлении движутся события.

Оцените статью
devanswers.ru
Добавить комментарий