На перезапущенном веб-сайте видимость рекламы также выросла на 75 %, показатель отказов снизился на 50 %, а количество просмотров страниц выросло на 27 %.
Когда Google объявил об инициативе Core Web Vitals, немецкий издатель Netzwelt быстро осознал потенциал этих новых показателей для улучшения качества страниц и улучшения монетизации на основе рекламы. Они отправились в путь, чтобы перезапустить свой веб-сайт, применив общие рекомендации по повышению эффективности и одновременно оптимизируя рекламные теги и места размещения. Использование отличного UX и быстрых страниц оказалось путем одновременной оптимизации взаимодействия и доходов от рекламы: количество просмотров страниц увеличилось на 27 %, видимость рекламы — более 75 %, а доходы от рекламы увеличились на 18 %.
27 %
Увеличение просмотров страниц
18 %
Увеличение дохода от рекламы
75 %
Видимость объявления
Соревнование
Как и многие другие издатели новостей, Netzwelt изо всех сил пытался найти правильный баланс между оптимизацией пользовательского опыта и скоростью страницы, сохраняя при этом высокие доходы от рекламы. Основными проблемами, с которыми они столкнулись, были:
- Высокий совокупный сдвиг макета (CLS) из-за изменений макета, вызванных рекламой, особенно из рекламных мест с несколькими размерами и верхних баннеров.
- Самая большая отрисовка контента (LCP) появляется с опозданием из-за того, что реклама является самой большой отрисовкой или из-за того, что загрузка главного изображения занимает полосу пропускания.
- Высокая задержка первого ввода (FID), вызванная сторонним JavaScript, необходимым для рекламы, назначения ставок в заголовке и других целей.
- Побочные эффекты на основные веб-показатели из-за диалоговых окон согласия, контролируемых сторонними поставщиками, которые также добавляли сдвиги в макете и могли быть обнаружены как поздние самые большие отрисовки.
Оптимизация новостного веб-сайта для Core Web Vitals
Когда компания Netzwelt начала работать над основными веб-показателями, они быстро заметили, что оптимизация основных веб-показателей не обязательно должна отрицательно влиять на рекламу, а может быть использована как возможность улучшить видимость рекламы. Поэтому команда Netzwelt оптимизировала Core Web Vitals, чтобы поднять видимость рекламы выше 75 % и привлечь более ценную рекламу (средний мировой показатель для медийной рекламы составляет менее 50 % ).
Оптимизация CLS
Рекламные объявления часто загружаются с опозданием (иногда сознательно из-за отложенной загрузки), а их реальный размер часто неизвестен заранее из-за многоразмерности и гибкого размещения рекламы.
Проблему можно разделить на две — реклама вверху и внизу страницы.
Объявления в верхней части экрана могут привести к значительным скачкам макета из-за поздней загрузки и неизвестных размеров. Блокирование самого большого пространства, которое им может понадобиться, может привести к ухудшению UX, а требование к рекламодателям фиксированных размеров может снизить доход от рекламы. Netzwelt решил эту проблему, сделав верхнюю рекламу прикрепленной и удалив некоторые из баннеров большего разрешенного размера. Наложенное объявление позволяет избежать скачков макета для объявлений разных размеров. Хотя уменьшенные допустимые размеры действительно влияют на продажи рекламы, лучшая видимость легко компенсирует это.
Исторические данные и A/B-тесты помогли Netzwelt найти правильный размер и расположение для разных устройств и размеров экрана, а также медиа-правила CSS, используемые для резервирования места.
Объявления ниже сгиба предлагают возможности для значительных улучшений:
- Баннер, который не отображается, но загружается, ухудшает видимость рекламы и ухудшает восприятие страницы.
- Баннер, загружаемый в тот момент, когда пользователь прокручивает его, может привести к дополнительным переходам к контенту.
Чтобы обеспечить хорошее качество страницы и высокую видимость рекламы, Netzwelt внедрил отложенную загрузку и зарезервировал пространство по размеру наименьшего общего знаменателя. В мультисайзной зоне запрашиваются баннеры размером от 300х250 до 300х600, зарезервировано 250 пикселей по высоте. Это устранило сдвиги в макете для меньших размеров; и значительно сократили их для более крупных баннеров. Этот подход не является оптимальным, но это начало и хороший компромисс.
Для дальнейшей оптимизации Netzwelt использовала Intersection Observer и API сетевой информации , чтобы контролировать размещение рекламы и сокращать сдвиги макета. В зависимости от положения прокрутки и качества сетевого подключения используются разные позиции объявлений и стратегии отложенной загрузки, а размеры объявлений могут быть изменены с нескольких на фиксированные. Целью алгоритма всегда является максимизация видимости рекламы при минимизации сдвигов макета. Браузеры, не поддерживающие API NetworkInfo, используют значение прокси, основанное на сочетании типа сети, полученного из устройства и IP. Эта стратегия адаптивной загрузки особенно снижает CLS для пользователей с медленным подключением к Интернету.
Оптимизация ПИД
Задержка первого ввода может оказаться проблемой для издателей новостей, поскольку реклама часто сопровождается множеством дополнительных библиотек JavaScript. И, похоже, существует негативное влияние, если посмотреть на лабораторные данные, такие как Lighthouse. Однако, судя по полевым данным Веб-альманаха за 2020 год , многие веб-сайты реагируют достаточно быстро. Частично это связано с поздней загрузкой рекламного JavaScript (после первого ввода), хорошим кэшированием (например, обработка кэширования кода v8 ) или хорошей оптимизацией поставщиками рекламы. Трекеры видимости поставщиков стараются избегать длительных задач — поэтому даже если сумма времени выполнения велика, общее время блокировки (TBT) и FID не затрагиваются. Хотя FID не стал большой проблемой для Netzwelt, все же предстояло внести некоторые оптимизации:
- Сокращаем рекламные скрипты и провайдеров, по возможности концентрируясь на одном стеке.
- Загрузка всех скриптов с помощью defer или async.
- Использование веб-пакета или аналогичных технологий для создания деревьев и разделения.
- Использование простых правил CSS в стиле BEM.
- Избегайте длительных задач и используйте шаблон «простой до срочного» .
- Работа с RequestAnimationFrame везде, где это влияет на макет.
Оптимизация LCP
Рекламные объявления могут влиять на самую большую содержательную отрисовку двумя способами: явно, распознавая рекламу как самую большую отрисовку, и косвенно, перегружая пропускную способность сети или влияя на критический путь, так что фактическая самая большая отрисовка (например, главное изображение) не может загрузиться. достаточно быстро.
Netzwelt уже удалила средние прямоугольные объявления из верхних рекламных мест при оптимизации для CLS. Это имело дополнительное преимущество: реклама не стала самым крупным элементом.
Netzwelt следует строгой политике, ставя контент выше рекламы. Netzwelt отдал приоритет главным изображениям и шрифтам, используемым в верхней части сгиба, и оптимизировал критический путь, чтобы он имел приоритет над рекламными сценариями и рекламными объявлениями. Такая расстановка приоритетов помогла LCP не зависеть от рекламы.
Помимо этих оптимизаций, Netzwelt использовал и другие лучшие практики:
- Выделил CSS для критического пути рендеринга и поместил его в заголовок.
- Предварительно загружены наиболее важные шрифты, скрипты и изображения.
- Избегаем ленивой загрузки изображений выше сгиба.
- Использован
font-display="swap".
Согласие GDPR и основные веб-показатели
Диалоги о согласии часто негативно влияют на основные веб-показатели. Как и в случае с рекламой, диалог согласия может повлиять на основные веб-показатели двумя способами:
- Явно, если он определяется как самая большая краска или вызывает сдвиги макета.
- Неявно, забирая пропускную способность у самого большого изображения, блокируя критический путь к самому большому изображению или задерживая рекламу до тех пор, пока не будет получено согласие, что, в свою очередь, может вызвать изменения макета.
Netzwelt работает со сторонним поставщиком согласия, который также реализовал оптимизацию. Сначала Netzwelt постарался избежать очевидных ошибок:
- Скрипты согласия загружаются асинхронно, чтобы не блокировать критически важные ресурсы.
- Согласие форматируется таким образом, что большие элементы не могут считаться самыми крупными элементами в LCP.
- Наложение согласия использует
position: fixed, чтобы избежать сдвигов. - Хотя реклама показывается только после получения согласия, заранее сохраняется достаточное количество пробелов, чтобы избежать смещения макета при загрузке рекламы.
- Убедитесь, что отображение и расположение диалогового окна согласия не приводит к изменению макета. Одной из проблем, обнаруженных и исправленных здесь, была опция блокировки прокрутки поставщика услуг, которая отключала прокрутку во время отображения согласия путем перемещения основного содержимого статьи при прокрутке, вызывая сдвиги макета.
После этой работы все еще сохранялись большие расхождения между полевыми и лабораторными CLS. Хотя лабораторный CLS был близок к нулю, значения полей значительно превышали пороговые значения. После расследования виновником оказались изменения макета в iframe согласия, которые в настоящее время правильно фиксируются только в полевых данных. Netzwelt продолжает работать со сторонним поставщиком разрешений для решения этой проблемы.
Модели подписки на новости и основные веб-показатели
Издатели новостей переходят на модель подписки для финансирования журналистики. Эта модель актуальна для Core Web Vitals, поскольку люди не будут подписываться на веб-сайты с плохим пользовательским интерфейсом. Кроме того, подписчики не ожидают увидеть рекламу в платном контенте, но скрытие рекламы может привести к смещению макета. Веб-сайту необходимо проверить, имеют ли пользователи право просматривать контент и показывать ли рекламу. Эти проверки могут вызвать дополнительные задержки, что приведет к смещению контента или ухудшению пользовательского опыта.
Netzwelt использует модель, в которой контент всегда бесплатен, но подписчики не видят рекламу. Они исследовали различные способы запроса и хранения прав, чтобы уменьшить задержки и изменения макета.
Первоначальный запрос прав всегда вызывал задержки, и поэтому, если запрос прав занимает слишком много времени, сайт будет отображать последнее кэшированное состояние. Для новых подписчиков это означает небольшой риск того, что платящий пользователь увидит рекламу один раз. Пользователи, только что завершающие подписку, могут увидеть одну загрузку без рекламы до обновления локально сохраненных прав. Как только права известны, они сохраняются локально с помощью API LocalStorage, чтобы избежать дополнительных задержек и изменений макета во время будущей навигации.
Результаты оптимизации
Результаты оптимизации Netzwelt говорят сами за себя. Их рейтинг PageSpeed Insights не имеет себе равных среди новостных издателей по всему миру:
Оптимизации улучшили качество страниц, но были сделаны с учетом интересов бизнеса и улучшили качество рекламы, видимость рекламы и доход. После перезапуска оптимизированной страницы в Netzwelt цена за тысячу показов выросла на 20–30 %, а видимость рекламы превысила 75 %. Однако Netzwelt предполагает, что общий рост доходов будет еще выше. Трафик увеличился после перезапуска, вероятно, из-за более высокого уровня вовлеченности пользователей и снижения показателей отказов из-за улучшения UX. Эти эффекты трудно оценить количественно и установить причинно-следственную связь с перезапуском, поскольку трафик естественно колеблется, а также существуют последствия глобальной пандемии. Эти косвенные эффекты являются одной из причин, почему Netzwelt всегда обращает внимание на все цифры при просмотре своего сайта, а не только на цену за тысячу показов, что может вводить в заблуждение. Основные веб-показатели и показатели UX в сочетании со всеми показателями, связанными с рекламой, дают реальную картину.
Заглядывая в будущее
Netzwelt считает, что в будущем без сторонних файлов cookie контекстный таргетинг через контент в сочетании с хорошим UX и удобством страницы (включая видимость рекламы) станет ключом к успеху издателя новостей.
Поэтому Netzwelt не останавливается на Core Web Vitals, а делает все возможное, реализуя многие современные веб-возможности, такие как прогрессивные веб-приложения (PWA), автономный контент, темный режим, API веб-ресурсов и доверенные веб-действия (TWA), используя новый API цифровых товаров .