45
10 мин
Когда бизнес запускает рекламу, кажется, что стоимость лида зависит от ставки, креативов, аудитории и оффера. Это правда, но не полностью. Если лендинг открывается медленно, часть пользователей уходит до первого экрана, часть не дожидается формы, а часть кликает по кнопке дважды и закрывает страницу из-за задержки. В итоге рекламный бюджет тратится, переходы есть, а заявок меньше. Поэтому скорость загрузки лендинга — это не техническая мелочь, а параметр, который напрямую влияет на CPL, конверсию и окупаемость рекламы.
В этой статье разберём, как измерить скорость с точки зрения бизнеса, что означают LCP, FID и CLS простым языком, какие показатели стоит фиксировать до запуска и как разработка одностраничного сайта должна учитывать производительность ещё на этапе структуры, дизайна и ТЗ.
Короткий ответ: чем медленнее лендинг, тем дороже лид
Стоимость лида считается просто: CPL = рекламные расходы / количество лидов. Если рекламный трафик остаётся тем же, а из-за медленной загрузки конверсия падает, CPL растёт автоматически. Не потому что реклама стала хуже, а потому что часть оплаченных кликов не доходит до целевого действия.
| Сценарий | Клики | Бюджет | Конверсия лендинга | Заявки | CPL |
| Лендинг грузится быстро | 1 000 | 80 000 ₽ | 4% | 40 | 2 000 ₽ |
| Лендинг грузится медленно | 1 000 | 80 000 ₽ | 2,5% | 25 | 3 200 ₽ |
В этом примере стоимость клика не изменилась. А CPL вырос на 60% только из-за того, что меньше людей дошло до формы заявки. Поэтому вопрос «как оптимизировать сайт для конверсии» нельзя решать только текстами, кнопками и дизайном. Техническая скорость — такая же часть конверсионной воронки, как оффер и форма.
Кому особенно важно следить за скоростью
• Компаниям, которые покупают трафик в Яндекс Директе, VK Рекламе, Авито или Sber Ads и платят за каждый переход.
• Бизнесу с мобильным трафиком: строительство, медицина, услуги, обучение, мероприятия, локальные сервисы.
• Проектам с дорогим лидом, где потеря даже 5–10 заявок в месяц заметно влияет на экономику.
• Лендингам с большим количеством изображений, видео, карт, виджетов, форм и сторонних скриптов.
1. Как скорость влияет на поведение пользователя и конверсию
Пользователь не оценивает скорость по техническому отчёту. Он оценивает её по ощущениям: быстро ли появился первый экран, можно ли сразу нажать кнопку, не прыгнул ли текст, не зависла ли форма после клика. Если в первые секунды страница ведёт себя нестабильно, доверие падает ещё до того, как человек прочитал предложение.
| Что происходит на медленном лендинге | Как это видит бизнес | Как это отражается в метриках |
| Первый экран появляется с задержкой | Часть пользователей уходит до знакомства с оффером | Растёт доля отказов, падает глубина просмотра |
| Кнопка или форма долго реагируют | Пользователь сомневается, отправилась ли заявка | Падает конверсия в цель, появляются повторные клики |
| Блоки прыгают при загрузке | Страница выглядит сырой и ненадёжной | Падает доверие, растёт доля незавершённых действий |
| Скрипты аналитики или виджеты тормозят страницу | Данные собираются, но заявки теряются | Есть клики, но мало достижений целей |
В Яндекс.Метрике это видно не только по конверсиям. Нужно смотреть отчёт по времени загрузки страниц, отказы, глубину просмотра, достижения целей, сегменты по устройствам и браузерам. Часто проблема обнаруживается именно на мобильных: на десктопе всё выглядит приемлемо, а на смартфоне первый экран открывается слишком долго.
Для ниш с высокой долей мобильного спроса, например в строительстве, скорость особенно критична. В посадочных страницах для ЖК пользователь часто смотрит сайт с телефона: сравнивает планировки, цены, ипотеку и оставляет заявку на звонок. Поэтому в проектах по маркетингу для строительства важно проверять не только дизайн, но и фактическую скорость на мобильном трафике.
2. LCP, FID, CLS что это простым языком
В бизнесе не нужно знать все внутренние детали браузера. Но нужно понимать, какие технические метрики действительно связаны с ощущением скорости. Запрос «LCP FID CLS что это» до сих пор встречается часто, хотя в актуальных Core Web Vitals FID уже заменён на INP. Поэтому ниже разберём и старую, и текущую логику.
| Метрика | Что измеряет | Как объяснить бизнесу | Хороший ориентир |
| LCP | Когда появляется самый крупный важный элемент первого экрана | Пользователь видит главный контент: заголовок, изображение, оффер | До 2,5 секунды |
| FID | Задержку после первого действия пользователя | Старая метрика реакции на первый клик. В 2024 году её заменили на INP | Исторически до 100 мс |
| INP | Скорость реакции страницы на взаимодействия | Пользователь нажал кнопку, открыл форму, переключил блок — сайт отвечает быстро | До 200 мс |
| CLS | Насколько сильно элементы прыгают при загрузке | Кнопка не уезжает из-под пальца, текст и форма не смещаются | До 0,1 |
Для лендинга ключевая связка такая: LCP отвечает за первое впечатление, INP/FID — за ощущение управления страницей, CLS — за аккуратность интерфейса. Если хотя бы одна метрика провалена, пользователь может уйти не потому, что продукт плохой, а потому что страница мешает принять решение.
3. Какие целевые показатели ставить для лендинга
Цель оптимизации — не получить абстрактные «100 из 100» любой ценой. Цель — сделать страницу достаточно быстрой для реальных пользователей и рекламного трафика. Иногда ради одного лишнего балла приходится резать важный визуал или функционал, который помогает продаже. Поэтому показатели нужно фиксировать разумно: отдельно для мобильной и десктопной версии, отдельно для теста и для боевого запуска.
| Показатель | Цель для лендинга | Почему важно |
| LCP | До 2,5 сек. Хорошо, 2,5–4 сек. зона риска, больше 4 сек. критично | Если главный экран появляется поздно, рекламный клик может не стать визитом |
| INP | До 200 мс | Форма, меню, квиз и кнопки должны реагировать без ощущения зависания |
| CLS | До 0,1 | Пользователь не должен промахиваться по кнопке из-за смещения блоков |
| PageSpeed Mobile | Желательно 80+ для промо-лендинга, ниже 50 — повод разбирать причины | Мобильный трафик часто даёт основную долю заявок |
| Время загрузки в Метрике | Смотреть по реальным пользователям и устройствам | Лабораторный тест не всегда совпадает с поведением аудитории |
Важное уточнение: PageSpeed и Core Web Vitals не заменяют бизнес-метрики. Они показывают техническое состояние страницы. Решение принимать нужно по связке: скорость, отказы, конверсия в заявку, стоимость лида, качество лида и ROMI.
4. Как скорость влияет на стоимость лида в цифрах
Возьмём простую модель. Бизнес запускает рекламу на лендинг, получает 1 000 переходов по 80 ₽. Бюджет — 80 000 ₽. Если страница конвертирует 4%, выходит 40 заявок и CPL 2 000 ₽. Если из-за медленной загрузки, прыгающих блоков и тяжёлых скриптов конверсия падает до 3%, будет уже 30 заявок и CPL 2 667 ₽.
На бумаге разница в конверсии всего 1 процентный пункт. В деньгах — плюс 667 ₽ к каждому лиду. При 100 лидах в месяц это уже 66 700 ₽ переплаты или недополученной эффективности. Поэтому влияние скорости сайта на продажи лучше считать не в секундах, а в потерянных заявках и росте CPL.
| Что изменилось | Было | Стало | Последствие |
| Конверсия лендинга | 4% | 3% | Минус 10 заявок на 1 000 переходов |
| CPL | 2 000 ₽ | 2 667 ₽ | Лид дороже на 33% |
| Заявки при бюджете 240 000 ₽ | 120 | 90 | Минус 30 обращений за месяц |
Хороший пример — быстрый запуск сайта застройщика, где важными показателями были срок, мобильность и работоспособность формы. В кейсе сайта застройщика за 7 дней зафиксирован PageSpeed 85 из 100. Это не просто красивая цифра: для посадочной страницы с рекламным трафиком такой уровень помогает не терять заявки до первого контакта.
5. Что чаще всего тормозит лендинг
Обычно скорость ломается не из-за одной причины, а из-за набора мелких решений. Дизайнер добавил тяжёлый фон, разработчик подключил несколько библиотек, маркетолог поставил виджет, аналитик добавил счётчики, клиент попросил видео на первый экран. По отдельности всё кажется нормальным. Вместе это превращается в страницу, которая долго открывается на мобильном интернете.
1. Тяжёлые изображения без WebP/AVIF, без сжатия и без правильных размеров под экран.
2. Видео или крупная анимация на первом экране без постера и отложенной загрузки.
3. Слишком много внешних скриптов: чат, коллтрекинг, карты, пиксели, виджеты соцсетей.
4. Неоптимизированные шрифты: много начертаний, сторонняя загрузка, отсутствие preload для критичных файлов.
5. Большие CSS и JavaScript-файлы, которые блокируют отрисовку первого экрана.
6. Нет кеширования, CDN и нормальной настройки сервера.
7. Непредсказуемая высота блоков: изображения и баннеры подгружаются позже и сдвигают контент.
6. Как мы оптимизируем лендинг: сжатие, lazy load, CDN
Оптимизация скорости начинается не в конце разработки, а до неё. Если в ТЗ уже заложены тяжёлые видео, сложные анимации и пять внешних виджетов на первом экране, техническая команда сможет улучшить ситуацию, но не сделает магию. Поэтому мы разделяем оптимизацию на четыре уровня: структура, фронтенд, сервер и аналитика.
| Уровень | Что делаем | Что это даёт бизнесу |
| Структура страницы | Выносим тяжёлые элементы ниже первого экрана, убираем лишние блоки, упрощаем первый контакт | Пользователь быстрее видит оффер и CTA |
| Изображения | Сжимаем, подбираем размеры, используем WebP/AVIF, настраиваем lazy load | Первый экран и галереи грузятся легче |
| Код | Минифицируем CSS/JS, откладываем некритичные скрипты, убираем лишние библиотеки | Страница быстрее становится интерактивной |
| Сервер и CDN | Настраиваем кеширование, CDN, gzip/brotli, корректные заголовки | Сайт стабильнее открывается из разных регионов |
| Аналитика | Проверяем, не тормозят ли счётчики, цели, карты, виджеты и коллтрекинг | Сохраняем измеримость без потери конверсии |
Отдельно проверяем, как ведёт себя форма. Лендинг может быстро показать первый экран, но проиграть на отправке заявки: кнопка не блокируется после клика, нет состояния загрузки, пользователь не понимает, ушла ли форма. Для бизнеса это такая же техническая потеря, как медленный LCP.
7. Как тестировать скорость перед запуском рекламы
Перед запуском рекламного трафика важно проверить не только один красивый отчёт PageSpeed. Нужен набор проверок, который показывает реальную готовность лендинга к нагрузке и заявкам.
1. Проверить мобильную и десктопную версии отдельно. Мобильная почти всегда важнее для рекламы.
2. Прогнать PageSpeed Insights или Lighthouse и зафиксировать LCP, INP, CLS, общий балл и список проблем.
3. Открыть лендинг на реальном смартфоне через мобильный интернет, а не только через офисный Wi-Fi.
4. Проверить первый экран: заголовок, оффер, кнопка и форма должны появляться быстро и без скачков.
5. Отправить тестовую заявку и убедиться, что цель сработала в Яндекс.Метрике, CRM получила лид, а менеджер увидел уведомление.
6. После запуска рекламы смотреть реальные данные в Яндекс.Метрике: время загрузки страниц, устройства, браузеры, отказы, конверсии.
Для быстрой первичной проверки можно использовать чек-лист мобильной версии лендинга: он помогает за несколько минут понять, где страница теряет пользователя ещё до глубокой технической диагностики.
8. Что фиксировать в ТЗ, чтобы скорость не стала «потом»
Если скорость не прописана в ТЗ, она часто становится необязательной правкой. Клиент думает, что сайт должен быть быстрым по умолчанию. Подрядчик считает, что скорость зависит от контента, хостинга и сторонних сервисов. В итоге вопрос всплывает после запуска, когда уже подключены реклама, CRM, аналитика и сроки горят.
| Что фиксируем | Как формулировать в ТЗ |
| Целевые метрики | LCP до 2,5 сек., INP до 200 мс, CLS до 0,1 по результатам проверки на финальной версии |
| Условия проверки | Проверка отдельно для mobile и desktop, после подключения аналитики и форм |
| Изображения | Использовать сжатые форматы и размеры, соответствующие реальному выводу на странице |
| Скрипты | Все сторонние виджеты согласуются до запуска и проверяются на влияние на скорость |
| Ответственность | Клиент предоставляет оптимизированный контент или согласует обработку материалов подрядчиком |
Такая фиксация защищает обе стороны. Клиент понимает, какой результат считать нормальным. Команда разработки заранее видит ограничения. Маркетолог получает посадочную страницу, которую можно запускать в рекламу без ощущения, что бюджет просто сгорит на медленной загрузке.
9. Мини-чек-лист для бизнеса перед запуском
• Первый экран открывается быстро на смартфоне через мобильный интернет.
• Главный заголовок, изображение и кнопка не появляются с большой задержкой.
• Форма заявки отправляется без зависания и даёт понятное сообщение об успехе.
• Картинки сжаты, тяжёлые галереи и карты не грузятся сразу на первом экране.
• В Яндекс.Метрике настроены цели на отправку формы, клики по телефону и мессенджерам.
• В отчётах можно отдельно смотреть скорость и конверсию по мобильным устройствам.
• После установки всех счётчиков и виджетов скорость проверена повторно.
Вывод: скорость — это часть экономики лендинга
Для бизнеса скорость загрузки лендинга важна не сама по себе. Важны деньги: меньше отказов, выше конверсия, ниже CPL, больше заявок из того же рекламного бюджета. Поэтому технические метрики нужно переводить на язык воронки: сколько людей дошло до первого экрана, сколько увидело форму, сколько отправило заявку и сколько стоил каждый лид.
Если сайт выглядит красиво, но открывается медленно, он может проигрывать ещё до того, как пользователь оценит дизайн. Поэтому правильный лендинг проектируется сразу с учётом скорости: лёгкий первый экран, аккуратные изображения, отложенная загрузка, контроль скриптов, понятная аналитика и проверка на реальных устройствах. Тогда техническая оптимизация работает не ради отчёта, а ради продаж.
