Баннер без штрафа для скорости: как проверить LCP, INP и CLS до запуска кампании

1 сентября 2026 года многие сайты меняют летние макеты на осенние акции. Вместе с новым баннером на главную нередко приезжают тяжелая картинка, сторонний счетчик, шрифт и анимация. Визуально страница остается прежней, но пользователь дольше видит пустой блок, кнопка отвечает с задержкой, а текст прыгает после загрузки рекламы. Проверять такой креатив надо не только по красоте и кликабельности, но и по трем Core Web Vitals: LCP, INP и CLS.

Три метрики - три разных вида поломки

LCP показывает, когда отрисован крупнейший заметный элемент в области просмотра. Если большой баннер стоит вверху страницы, именно он часто становится кандидатом LCP. INP оценивает отзывчивость интерфейса при взаимодействиях: тяжелый рекламный скрипт может занять основной поток в момент клика или прокрутки. CLS измеряет неожиданные сдвиги макета. Когда место под рекламу появляется только после ответа рекламной системы, контент уезжает вниз и пользователь нажимает не туда.

Эти показатели нельзя свести к общему весу страницы. Баннер на 300 килобайт может загрузиться вовремя и не мешать, а маленький скрипт - построить длинную цепочку запросов и заблокировать интерфейс. Поэтому в отчете должны быть не только мегабайты, но и последовательность событий: когда создан контейнер, когда началась загрузка, сколько заняло декодирование картинки и какие задачи выполнялись в момент первого клика.

Сначала зарезервируйте место

Контейнер баннера должен иметь известные размеры или соотношение сторон до прихода рекламы. Для фиксированного места задайте width и height, для адаптивного - aspect-ratio и разумные ограничения. Если рекламодатель не прислал креатив нужной пропорции, лучше показать фон или аккуратные поля, чем менять высоту блока после загрузки.

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

Не применяйте ленивую загрузку ко всему подряд

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

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

Скрипт баннера не должен владеть страницей

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

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

Протокол испытания перед запуском

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

Запишите LCP, INP и CLS, но не ограничивайтесь одним прогоном. Холодный кеш, теплый кеш и случайная сетевая задержка дают разные результаты. Для лабораторной проверки достаточно серии повторов, а после запуска нужны полевые данные реальных посетителей. Если среднее красиво, но каждый десятый визит заметно ломается, кампания все равно теряет людей.

Как поставить условие рекламодателю

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

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

Быстрый баннер - не обязательно маленький и скучный. Он заранее занимает свое место, рано сообщает браузеру о важном ресурсе, не захватывает основной поток и спокойно исчезает при сбое сети. Такой креатив сохраняет и рекламный результат, и страницу, на которой этот результат должен случиться.