Первый экран лендинга: как удержать посетителя за 5 секунд

Первый экран лендинга — это то, что посетитель видит без прокрутки, когда страница загрузилась. У вас есть 3–5 секунд, чтобы объяснить, чем вы можете быть полезны, и удержать его от кнопки «назад». Именно на первом экране лендинг теряет от 30 до 60% посетителей — и это те деньги, которые вы уже заплатили за рекламу, но ещё не превратили в заявку.

В этой статье разберём, из каких элементов собран правильный hero-блок, какие ошибки убивают конверсию, как проверить свой первый экран за 10 минут и что делать, если посетители массово уходят на первом же скролле. Мы будем говорить не про «дизайн», а про смысл: красивый пустой первый экран продаёт хуже, чем визуально скромный, но с сильным оффером.

Что такое первый экран и почему он критичен

Первый экран (hero-блок, «above the fold») — это верхняя часть страницы, которую видно без скролла на устройстве посетителя. На десктопе это область ~1440×800 пикселей, на мобильном — примерно 375×667. Всё остальное посетитель увидит, только если решит прокрутить страницу, а решает он это за 3–5 секунд.

Именно поэтому первый экран собирает на себя большую часть внимания и большую часть решений «остаться / уйти». На лендингах средняя глубина визита обычно составляет 1,5–2,2 экрана: половина визитов не доходит даже до второго блока. При этом стоимость визита из контекста в популярных нишах — 40–200 ₽, и каждый ушедший посетитель — это чистый убыток.

Что об этом говорят исследования

Это не «маркетинговое ощущение», а измеренные закономерности. Три цифры, которые стоит держать в голове при работе над первым экраном:

• ≈50 миллисекунд нужно человеку, чтобы сформировать первое впечатление о странице — быстрее, чем он осознанно дочитает заголовок. Решает не только текст, а вся картинка первого экрана целиком (исследование Lindgaard и коллег, воспроизведено Google Research).
• ≈57% времени внимания приходится на контент выше линии сгиба; на второй экран — примерно втрое меньше. Всё, что не попало в первый экран, видит меньшинство посетителей (данные Nielsen Norman Group).
• 6,6% — медианная конверсия лендингов по анализу 41 000 страниц и 464 млн визитов; у верхней четверти страниц она заметно выше. Сильный первый экран напрямую влияет на то, в какую часть этого диапазона вы попадёте (Unbounce Conversion Benchmark Report).

Отсюда простое правило: сильный первый экран — это самый дешёвый способ поднять конверсию. Изменить его — задача на 2–4 часа работы дизайнера и копирайтера, а эффект на конверсии измеряется десятками процентов. Другие блоки, воронку и трафик разбираем отдельно — в статьях про структуру продающего лендинга, конверсию и дизайн и UX.

Пять обязательных элементов сильного первого экрана

Хороший первый экран — это не «крутая картинка + большой заголовок», а система из пяти элементов, каждый из которых закрывает одну работу. Уберёте один — экран станет слабее, добавите шестой — начнётся визуальный шум.

Заголовок отвечает на «что и кому». Подзаголовок закрывает возражение «а какие условия?». Кнопка задаёт единственное действие — не «узнать больше», а «получить смету», «записаться на демо», «попробовать бесплатно». Соц-доказательство говорит «не мы одни». Визуал показывает продукт: если продаёте SaaS — скрин интерфейса, если услугу — фото команды или процесса.

Заголовок: главный элемент, за который бьёмся

Заголовок — единственный элемент, который посетитель прочитает точно. Он должен за одну строку сказать: что за продукт, кому, какую выгоду даёт и в чём отличие. Хороший заголовок отвечает на «почему стоит остаться и прочитать дальше», плохой — описывает компанию: «Динамично развивающаяся команда профессионалов».

Есть три проверенных формулы для заголовков. Первая — «Что + для кого + выгода»: «CRM для интернет-магазинов — автоматически догоняем брошенные корзины». Вторая — «Результат за срок»: «Лендинг под ключ за 7 дней». Третья — «Против кого/чего»: «Замена Excel для склада: работает без обучения».

Если сомневаетесь в формулировке — тестируйте A/B: два варианта заголовка на равных долях трафика, метрика — CTR по кнопке первого экрана. Через 2–4 недели видно, кто выиграл. Как правильно ставить и мерить такие тесты — в материале про A/B-тесты и аналитику лендинга.

Подзаголовок и кнопка: детали и действие

Подзаголовок — это вторая по важности строка. Он расширяет обещание из заголовка и снимает главное возражение: «а сколько», «а как долго», «а точно ли мне подойдёт». Хороший подзаголовок в 1–2 строки: «От 40 000 ₽, готовим за 7 рабочих дней, оплата после согласования макета». Плохой: «Мы делаем всё качественно и в срок».

Кнопка (CTA) — единственная. Если рядом две-три кнопки одинакового веса, посетитель зависает в микровыборе и уходит. Правильно: одна крупная контрастная кнопка с глаголом действия, рядом — второстепенная ссылка «посмотреть кейсы» или «узнать цену» текстовым стилем. Формулировка кнопки должна отражать результат для клиента, а не действие на сайте: не «отправить», а «получить смету», не «подписаться», а «попробовать 7 дней бесплатно».

Визуал и социальное доказательство

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

Соц-доказательство — короткий блок под кнопкой или сбоку. Форматы: логотипы клиентов («Нам доверяют X, Y, Z»), число покупателей («12 500 компаний уже подключились»), рейтинг («4,8 из 5 на Отзовике»), цитата одного клиента с фото и должностью. Достаточно одного варианта, не переборщите. Развёрнуто про доверие — в статье как повысить конверсию лендинга.

Отдельная тема — видео на первом экране. Автоплей-видео поднимает вовлечённость на 15–25%, но добавляет 1–3 секунды к загрузке страницы и требует бесшумного варианта с субтитрами. Если продукт визуальный (SaaS, дизайн, физтовар в действии) — попробуйте видео и замерьте. Если продукт объясняется словами — обойдитесь скриншотом или иллюстрацией.

Первый экран на мобильном: свои правила

На мобильных лендинги смотрит 60–80% трафика с VK Рекламы и Яндекс Директа. На маленьком экране правила меняются: заголовок вмещается в 3–4 строки, подзаголовок — в 2, кнопка — во всю ширину. Визуал часто уходит вниз или прячется, потому что важнее показать текст и кнопку в первом экране без прокрутки.

Ошибка номер один — гигантский hero-баннер из десктопа, где на мобилке видно только 30% заголовка и половину картинки. Ошибка номер два — кнопка ниже сгиба, до которой нужно скроллить. Ошибка номер три — тёмные плашки поверх фото, которые нечитаемы на солнце. Проверяйте первый экран отдельно в мобильном режиме браузера и на реальном iPhone SE — самый маленький распространённый экран.

Топ-8 ошибок первого экрана

Собрали список ошибок, которые встречаются чаще всего в аудитах лендингов. Если у вас есть хотя бы 3–4 из списка — переделывайте первый экран, не тратя время на другие блоки. Эффект от исправления обычно виден за первую же неделю.

1. 1Заголовок про компанию. «Компания N — надёжный партнёр в области…» — никому не интересно. Нужен заголовок про выгоду клиенту.
2. 2Слоган вместо оффера. «Меняем мир к лучшему» — красиво, но продукт не понятен. Оффер должен быть конкретным.
3. 3Три-четыре кнопки подряд. «Заказать», «Узнать больше», «Скачать презентацию», «Позвонить» — паралич выбора. Одна яркая, остальные — ссылками.
4. 4Стоковое фото рукопожатия. Читается как «нам нечего показать». Лучше скриншот продукта или процесс работы.
5. 5Отсутствие цены или диапазона. Даже «от 40 000 ₽» отсекает нецелевых и повышает доверие целевых.
6. 6Медленная загрузка. LCP больше 3 секунд — минус 20–40% визитов. Оптимизируйте изображения и шрифты.
7. 7Первый экран не помещается на мобилке. На iPhone SE видно только заголовок без кнопки — вы теряете половину мобильного трафика.
8. 8Ноль соц-доказательства. Ни логотипов, ни цифр, ни отзыва — посетитель не понимает, доверять ли.

Как проверить свой первый экран за 10 минут

Есть быстрый тест, который заменяет большую часть аудитов. Показываете первый экран человеку не из вашей ниши, отсчитываете 5 секунд, закрываете. Задаёте три вопроса: что это за продукт, кому подойдёт, что тут можно сделать. Если испытуемый отвечает на все три уверенно — первый экран работает. Если путается — переделывайте.

Второй способ — тепловая карта. Установите Яндекс Метрику, включите вебвизор и карту скроллинга. Через неделю посмотрите, до какой строки прокручивает медианный посетитель. Если 50% уходят, не долистав до второго экрана, — проблема в первом. Если долистывают, но не жмут кнопку — проблема в оффере или доверии.

Третий способ — трафик-тест. Прогоните 300–500 кликов из контекста на текущий вариант, потом 300–500 на переделанный. Метрика — CTR по CTA и глубина визита. Стоит 15–30 тысяч рублей, но даёт цифру, а не мнение. Если продукт запускается впервые, соберите первый экран сразу в визарде FreeTeams — AI-подрядчик учитывает эти правила по умолчанию.

Первый экран — это витрина магазина. Если в витрине пусто или лежит не то, посетитель не зайдёт внутрь, даже если внутри отличные товары.

Три шаблона первого экрана под разные ниши

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

• Шаблон B2B-услуга. Заголовок: «Что делаем + для кого». Подзаголовок: «Срок и стартовая цена». CTA: «Получить смету за 1 день». Соц-док: логотипы 5 клиентов. Визуал: фото процесса или скрин отчёта.
• Шаблон SaaS-подписка. Заголовок: «Что автоматизируем + результат». Подзаголовок: «Условия триала». CTA: «Попробовать 7 дней бесплатно». Соц-док: «12 000+ компаний». Визуал: скрин продукта.
• Шаблон розничный товар. Заголовок: «Название + ключевое отличие». Подзаголовок: «Цена и скорость доставки». CTA: «Купить со скидкой 10%». Соц-док: «4,9 из 5 по 3200 отзывам». Визуал: фото товара на белом.

Дальше идёт настройка под трафик: если реклама обещает «лендинг за 7 дней» — на первом экране должно быть ровно это, а не «мы студия digital-решений». Совпадение объявления и первого экрана — самый недооценённый фактор конверсии. Подробнее про связку рекламы и посадочной — в статье про трафик для лендинга и воронку продаж на лендинге.

С чего начать переделку, если экранов много

Если у вас уже есть лендинг и он не конвертит, не переделывайте всё сразу. Соберите короткий список правок и катите их по одному, чтобы понимать, какое изменение даёт эффект. Одновременная замена заголовка, кнопки, картинки и подзаголовка даст суммарный результат, но вы не узнаете, что именно сработало.

Порядок такой: сначала заголовок и подзаголовок — это самая быстрая и дешёвая правка. Потом кнопка и её формулировка. Потом визуал — заменяем сток на скриншот продукта или реальное фото. В последнюю очередь — соц-доказательство и мобильная адаптация. На каждый шаг закладывайте 1–2 недели теста, чтобы собрать хотя бы 300–500 визитов на вариант.

И держите в голове: первый экран — не самоцель. Его задача — не «конвертировать в лид», а «удержать посетителя достаточно долго, чтобы он посмотрел второй и третий блоки». Заявку почти никогда не оставляют с первого экрана — её оставляют с четвёртого-пятого, когда посетитель уже прочитал оффер, увидел цены и кейсы. Первый экран — это дверь, а не касса.

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

Сколько секунд у меня есть на первом экране?

3–5 секунд до того, как посетитель решит остаться или закрыть вкладку. За это время он читает заголовок, смотрит визуал и оценивает кнопку. Всё остальное — уже вторая волна внимания.

Что важнее: заголовок или картинка?

Заголовок. Картинка притягивает взгляд, но решение остаться посетитель принимает после того, как прочитал заголовок и понял, о чём речь. Слабый заголовок не спасёт даже гениальный визуал.

Нужна ли форма прямо на первом экране?

Не обязательно. Форма на первом экране работает только для тёплого трафика и очевидных продуктов. Для нового продукта лучше кнопка «попробовать» или «получить смету», а форма — на 2–3 экране.

Как быстро окупается переделка первого экрана?

Обычно за 1–2 недели. Средний рост конверсии из клика в заявку после правильной переделки — 30–70%. Это дешевле любой другой оптимизации на лендинге.

Стоит ли ставить видео на первый экран?

Стоит попробовать, если продукт визуальный (SaaS, процесс, физтовар в действии). Видео поднимает вовлечённость на 15–25%, но замедляет загрузку — нужен облегчённый вариант и субтитры.