Первый экран мобильного лендинга: что оставить, что убрать

Больше 85% трафика с Facebook и TikTok приходит с телефонов. Но большинство лендингов до сих пор собирают под десктоп и «просто сжимают» под мобильный. Результат — лид по 180–220 ₴ вместо 90–110 ₴ и апрув, который не спасёт ни одна команда КЦ. В этой статье — конкретный чеклист: что должно быть на первом экране адаптивного лендинга, а что нужно безжалостно убрать ещё до запуска.

Почему первый экран решает всё

Пользователь из TikTok или Facebook Reels приходит «горячим» — он только что видел видео с товаром и тапнул. У него есть 3–4 секунды, пока не закрыл вкладку. За это время он не читает — он сканирует. Если первый экран не ответил на вопрос «что это, сколько стоит и что мне делать дальше» — человек ушёл. CR падает, цена лида растёт.

Для лендинга под мобильный трафик товарки это означает одно: первый экран должен умещаться в высоту одного тапа прокрутки и давать ответы без усилий.

Что обязательно оставить

1. Заголовок — одно предложение, одна боль или один результат.
Не «Инновационный массажер для спины», а «Снимает боль в спине за 15 минут». Максимум 8–10 слов. На смартфоне шрифт должен быть от 22px — меньше не читается на ходу.

2. Фото товара крупным планом, без лишнего фона.
Одно фото на весь экран или фото на 60% ширины рядом с заголовком. Человек должен узнать товар из видео, которое только что видел. Коллаж из 4 изображений на первом экране — лишний.

3. Цена или скидка — сразу.
Если товар за 890 ₴ вместо 1 490 ₴ — это должно быть видно без прокрутки. Цена без скидки снижает конверсию: человек не понимает, выгодно ли это.

4. Одна CTA-кнопка — большая, контрастная, понятная.
«Заказать за 890 ₴», «Получить со скидкой», «Хочу попробовать» — конкретно. Кнопка должна быть минимум 48px в высоту, чтобы легко тапалась большим пальцем. Две кнопки на первом экране — это уже выбор, а выбор тормозит.

5. Одно социальное доказательство — микро.
Звёзды + количество заказов или одна короткая цитата: «Уже 1 840 заказов в этом месяце» или «⭐⭐⭐⭐⭐ 4.8 — 620 отзывов». Не абзац текста — одна строка.

Что убрать без жалости

Навигационное меню. На мобильном лендинге для товарки меню — это путь к выходу. Человек тапает «О нас» и больше не возвращается. Убирайте.

Слайдер с 5+ фото. Слайдеры на мобильном тормозят, не все свайпают, первое фото видят все — и всё. Одно сильное фото лучше карусели.

Большой текстовый блок «О товаре». Три абзаца мелким шрифтом до кнопки — читает 3% аудитории. Остальные закроют страницу. Детали — ниже, после первого экрана.

Несколько номеров телефонов и ссылок. Каждая ссылка — это выход из воронки. Если есть форма заявки — убирайте прямой номер с первого экрана.

Анимации и видео с автозапуском. Они жрут трафик, тормозят загрузку и раздражают. Скорость загрузки мобильного лендинга товара — критична: каждая лишняя секунда стоит 7–10% конверсии по оценкам практиков рынка.

Логотип большого размера. Бренд в товарке редко решает. Логотип 40×40px в углу — максимум, если вообще нужен.

Реальная проверка: тест на «большой палец»

Откройте свой лендинг на телефоне в режиме инкогнито. Дайте его человеку, который не знает, что это за товар. Спросите: что это, сколько стоит, что нужно сделать? Если он ответил за 5 секунд без прокрутки — первый экран работает.

Практический ориентир для проверки: на связках с Facebook на товары 590–1 490 ₴ (наколенники, массажеры, товары для дома) первый экран с заголовком-болью + большое фото + цена со скидкой + одна кнопка даёт CR 4–7% на холодном трафике. Если меньше 3% — проблема, скорее всего, именно здесь.

A/B-тест первого экрана — не роскошь. Даже смена текста кнопки с «Заказать» на «Заказать за 890 ₴» даёт +0,5–1,5% к конверсии на объёме от 500 визитов. На бюджете 5 000 ₴/день это ощутимо.

Как сделать это в LandEmpire

1. Откройте раздел «Лендинги» → «Лендинг по ссылке на товар» — вставьте ссылку с Rozetka или Prom, нажмите «Собрать лендинг». Фото, цена и название подтянутся автоматически, первый экран уже адаптивен под смартфон.
2. Чтобы отредактировать заголовок или кнопку — кликните на блок в редакторе, введите свой текст. Меню навигации в шаблонах товарки по умолчанию отключено.
3. Через панель «Добавить блок» (клавиша «/») добавьте блок «Осталось N» или «Лента заказов» — социальное доказательство одной строкой сразу под CTA.
4. Чтобы проверить, как выглядит первый экран на телефоне — нажмите иконку смартфона в верхней панели редактора перед публикацией.
5. Подключите Facebook Pixel: карточка лендинга → «⋯» → «Настройки лендинга» → вкладка «Реклама» → поле «Facebook Pixel ID». Так события с первого экрана пойдут в рекламный кабинет сразу.
6. На тарифе Pro запустите A/B-тест: карточка → «⋯» → «A/B-тест» → «Создать вариант» — протестируйте два варианта первого экрана и объявите победителя по статистике.

Итог

• Первый экран мобильного лендинга — заголовок с болью или результатом, одно большое фото, цена со скидкой, одна CTA-кнопка, микродоказательство.
• Убирайте: меню, слайдеры, длинные тексты, несколько ссылок, автовидео, большой логотип.
• Проверяйте тестом «большой палец»: 5 секунд — три ответа без прокрутки.
• A/B-тест первого экрана на объёме от 500 визитов даёт ощутимый прирост CR даже от смены текста кнопки.
• Соберите адаптивный лендинг и сразу запустите тест — создать лендинг бесплатно.