Веб-разработка

Скорость посадочной под контекстную рекламу

Скорость посадочной под контекстную рекламу

LCP (Largest Contentful Paint, «отрисовка крупнейшего элемента») — время, за которое браузер показывает самый большой видимый блок первого экрана: обычно это баннер или заголовок с фоном. На посадочной под контекстную рекламу медленный LCP означает, что человек закрыл вкладку раньше, чем увидел предложение, а клик вы уже оплатили.

Ниже — план ускорения, который мы применяем на посадочных с потоком от пятисот кликов в день: сначала бюджет скорости, потом технические правки, потом сверка с рекламным кабинетом. Сами посадочные мы делаем в рамках разработки сайтов, трафик на них ведём в контекстной рекламе.

Замер: что смотреть до правок

  • PageSpeed Insights — мобильный отчёт, поле LCP и LCP-элемент.
  • Метрика/Web Vitals — реальные пользователи, не только lab.
  • Waterfall в DevTools: что блокирует первый экран.
  • Список скриптов: Метрика, пиксели, чаты, A/B — вес и порядок.
  • Базовая конверсия формы за 7–14 дней — точка сравнения.

Бюджет скорости для landing

Задайте лимиты: HTML + critical CSS до первого байта, hero-image до 150–200 KB WebP, JS до интерактива — только необходимое. Каждый новый виджет («попап через 3 сек», карусель, карта) проходит через вопрос: сколько стоит в LCP?

Элемент первого экранаЛимитЧто происходит при перерасходе
Картинка или фон баннера150–200 KB в формате WebPНа мобильном LCP растёт на секунду и больше
Критические стилиВнутри HTML, без отдельного запросаЭкран ждёт, пока скачается вся таблица стилей
Скрипты до интерактиваТолько счётчик и обработчик формыКнопка нарисована, но нажатие ничего не делает
ШрифтыОдно-два начертания со своего доменаТекст мигает или не виден до загрузки шрифта
Чат и попапыПосле загрузки или первого скроллаВиджет отнимает первый экран у предложения

Что съедает первый экран чаще всего

Четыре обычных виновника
Картинка первого экранаБаннер в PNG на два мегабайта или та же картинка с отложенной загрузкой. Изображение первого экрана грузят первым и в WebP, без lazy-load.
Блокирующие стили и скриптыБраузер не рисует экран, пока не скачает всю таблицу стилей и скрипты из головы документа. Критические стили кладут прямо в HTML, остальное уводят вниз.
Виджеты и чатыОнлайн-чат, попап через три секунды, карта и карусель тянут по несколько сотен килобайт каждый. Их подключают после загрузки страницы.
Счётчики и пикселиМетрика, пиксели рекламных систем и скрипты A/B-тестов часто стоят на критическом пути. Помогает заранее открытое соединение с их доменом и загрузка по готовности.

Порядок правок по отдаче

  1. Оптимизировать LCP-изображение: формат, размер, fetchpriority, без lazy на hero.
  2. Inline critical CSS, отложить остальной CSS и некритичный JS.
  3. CDN для статики, сжатие Brotli на сервере.
  4. Отложить чат и попапы до load или первого scroll.
  5. Preconnect к доменам Метрики/шрифтов, если они на критическом пути.

Порядок именно такой: первые два пункта дают почти всю выигранную секунду, остальные добирают десятые. Если начать с переноса статики на сеть доставки контента (CDN), а картинку в два мегабайта оставить как есть, отчёт PageSpeed почти не изменится.

Первый экран посадочной: заголовок «Расчёт за 15 минут», строка о том, что этот заголовок с фоном и есть LCP-элемент, кнопка заявки и три поля с лимитами — LCP, вес картинки, момент подключения чата.
Ускоряют не «сайт вообще», а конкретный элемент, который человек видит первым.

Связка с Quality Score и A/B

Директ не показывает LCP в кабинете, но отказы и глубина видны. После ускорения сравните отказы и конверсию при том же объявлении и ставках. Если баллы PageSpeed выросли, а заявок нет — проблема в оффере, не только в скорости.

Как замерить результат по заявкам

Сравнивайте заявки за 7–14 дней до правок и столько же после, при том же объявлении и той же ставке. Ориентир по LCP для рекламного трафика — до 2,5 секунды на мобильном, а лучше около двух секунд у трёх четвертей реальных посетителей. Но выиграли вы или нет, показывают заявки, а не баллы в отчёте.

CLSУскоряя LCP, не ломайте CLS: резерв места под картинки и баннер cookies, иначе кнопка «отправить» уедет под палец.

Частые вопросы

Как LCP влияет на Директ?

Медленная страница повышает отказы — падает качество трафика и косвенно страдает эффективность. Пользователь уходит до формы, вы платите за клик без шанса на заявку.

Какой LCP целиться для landing?

До 2,5 с на мобильном для Core Web Vitals «хорошо». Для рекламного трафика лучше стремиться к 2 с на 75-м перцентиле реальных пользователей.

С чего начать ускорение?

Замер PageSpeed/Web Vitals → LCP-элемент (обычно hero-картинка или H1-блок) → сжатие, CDN, убрать блокирующий JS, inline critical CSS.

Нужен ли A/B после ускорения?

Да. Сравните конверсию 1–2 недели до и после при том же трафике. Иногда урезание «украшений» меняет и дизайн-метрики — смотрите заявки, не только баллы.

← Назад к разделу «Веб-разработка»