5 вариантов первого экрана для landing page: гайд с цифрами

50-80% пользователей решают остаться на странице или закрыть вкладку за первые 3-7 секунд. Эти секунды целиком приходятся на первый экран — ту область, которую посетитель видит до прокрутки. В английской терминологии — hero section или above the fold, в русской — просто первый экран или первый блок. От него зависит, дойдёт ли человек до оффера, формы и кнопки «купить».

В статье разбираем 5 рабочих вариантов hero для landing page: классический, с видео-фоном, split-screen, с формой захвата внутри и с каруселью социального доказательства. С размерами в пикселях, диапазонами роста конверсии, разбором ошибок и схемой A/B-теста, который не врёт.

Если параллельно с лендингом вы оформляете товары на маркетплейсах, логика «понятно за 3 секунды» работает там точно так же — карточки на WB: как создать, оформить и не потерять продажи разбирает те же принципы внимания на материале Wildberries.

Что такое первый экран и почему он решает судьбу лендинга

Первый экран сайта — это видимая область браузера от верхнего края до нижней границы окна без прокрутки. Её ещё называют hero block, hero section или the fold. Линия сгиба — метафора из печатных газет: на витрине газеты сгибали пополам, и всё, что должно было продать выпуск, верстали выше сгиба. Веб унаследовал и термин, и логику.

В цифрах это выглядит так. По агрегированным данным NN/g, Hotjar и российских юзабилити-агентств, доля пользователей, не прокручивающих ниже первого экрана, держится в диапазоне 20-43% в зависимости от ниши. Это не «ленивые посетители». Это люди, которые за первые секунды не нашли причины читать дальше.

Простой расчёт. Допустим, на лендинг идёт 1 000 переходов с рекламы по 35 ₽ за клик. Бюджет — 35 000 ₽. Если 30% уходят на первом экране, вы заплатили 10 500 ₽ за тех, кто даже не увидел оффер. Это не «технический процент», это деньги, которые сожгла слабая hero section.

Поэтому подход «давайте сначала сделаем красивую первую картинку, а оффер допишем потом» — это не дизайн, а статья расхода. Первый экран — единственный блок, который видят 100% посетителей. Остальное — выборка.

Размер первого экрана для лендинга: цифры, которые надо знать

Главная ошибка — проектировать hero «на глаз» в макете 1920×1080. Реальные экраны посетителей сильно разнообразнее. Вот рабочие диапазоны, на которые опираются продакшн-команды:

Отдельная проблема — динамическая адресная строка в мобильном Safari и Chrome. Она «съедает» 50-100 px высоты при прокрутке. Если вы закладываете hero ровно на 100vh, нижняя кнопка прыгает. На практике лучше делать 92-95vh с гарантированным запасом.

Что должно влезать в первый экран без скролла:

  1. Логотип и базовая навигация (если она нужна).
  2. Заголовок-оффер с понятной выгодой.
  3. Подзаголовок на 1-2 строки.
  4. Основной CTA — кнопка или форма.
  5. Визуальный якорь — фото, иллюстрация, видео или скриншот продукта.

Если что-то из этого списка не помещается — режьте подзаголовок или уменьшайте визуал. CTA должен быть виден без прокрутки на 95% устройств. Это не правило хорошего тона, это математика конверсии.

Хотите быстро собрать обложку или баннер для hero?

Под визуал в hero нужны баннеры, скриншоты и инфографика — без них первый экран выглядит сыро. Если в команде нет дизайнера, попробуйте инфографика для маркетплейсов: тот же конструктор закрывает задачи под web-баннеры, превью и карточки. Шрифты, контраст, размеры — всё под нужные форматы за несколько минут.

Вариант 1. Классический: заголовок + оффер + CTA + картинка

Самая частая и самая недооценённая схема. Слева — текстовый блок: H1 в две-три строки, подзаголовок, кнопка. Справа — визуал: продукт, скриншот интерфейса, иллюстрация. Соотношение 50/50 или 55/45 в пользу текста.

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

Когда не брать. Если продукт сложный и требует контекста (медтех, b2b-платформы с многоэтапным внедрением). Там одной картинки и кнопки мало — нужны цифры, логотипы клиентов, цитата.

Цифры. По данным открытых A/B-кейсов агентств CXL, Conversion Rate Experts и российских аудитов, классический hero с конкретным оффером даёт CR в заявку 3-7% на тёплом трафике и 1,5-3% на холодном. Замена «нашего» заголовка типа «Мы — лидер рынка» на оффер с цифрой («Сократите складские издержки на 18% за 60 дней») повышает CR в среднем на 25-40%.

Что важно. Заголовок — не миссия, а оффер. «Делаем сайты, которые продают» — это слабо. «Лендинг под ключ за 14 дней, гарантия конверсии 3% или возврат денег» — это сильно. Подзаголовок снимает главное возражение. Кнопка — глагол действия плюс контекст: не «Отправить», а «Получить расчёт за 2 минуты».

Вариант 2. Видео-фон на весь hero

Hero занимает весь первый экран, фоном идёт зацикленное видео без звука, поверх — заголовок и кнопка. Эстетика дорогая, ощущение премиальности высокое. Но цена ошибки тоже высокая.

Когда брать. Бренды, где важна эмоция и «вайб»: рестораны, путешествия, недвижимость премиум-класса, агентства, проекты в моде. Везде, где продукт нельзя объяснить таблицей.

Когда не брать. SaaS с конкретным функционалом, b2b с длинным циклом, медицина, юридические услуги. Там видео воспринимается как «отвлекающее», и время до клика по CTA вырастает на 2-4 секунды. Это много.

Технические рамки. Файл — не больше 1,5-2,5 МБ. Формат — MP4 (H.264) плюс WebM. Длина — 8-15 секунд, зацикленный. Без звука, с poster-картинкой на время загрузки. На мобильных — автозапуск отключайте, иначе iOS Safari режет первую загрузку и показывает чёрный экран.

Цифра, которую часто игнорируют. По замерам PageSpeed Insights, видео-фон на 8-12 МБ роняет LCP с 1,8 с до 4-6 с. Это автоматически бьёт по позициям в Google и по конверсии: каждая лишняя секунда загрузки — минус 7% к conversion rate. На рекламном трафике с 35 000 ₽ бюджета это около 2 400 ₽ слитых на ожидание.

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

Вариант 3. Split-screen: пополам текст и визуал

Экран делится строго пополам по вертикали. Левая половина — один смысловой блок (например, «для бизнеса»), правая — другой («для частных клиентов»). Или: слева оффер, справа форма захвата. Или: слева текст, справа большое фото продукта на всю высоту.

Когда брать. Если у продукта два равноценных сегмента аудитории и нужно сразу развести их по разным сценариям. Часто встречается у банков, образовательных платформ, агентств с услугами и инфопродуктами.

Когда не брать. Если 80% аудитории — один сегмент. Тогда split-screen разбавляет фокус, и CTR главной кнопки падает на 15-25% по сравнению с классической схемой.

Что важно. Каждая половина должна быть самодостаточной. Свой заголовок, своя кнопка, своя визуальная метафора. Если пользователь не понимает, какая половина «для него» за 3-5 секунд, hero не работает. Хорошая практика — добавить вопрос-фильтр сверху: «Кто вы?» — и две карточки-ответа.

Из практики: split-screen на лендинге онлайн-школы повысил CR в заявку с 2,1% до 3,4% за счёт того, что аудитория сразу видела свой вариант («хочу освоить профессию» / «хочу повысить квалификацию»). Без сегментации та же страница давала «средний по больнице» оффер, который никого не цеплял.

Вариант 4. Форма захвата прямо в hero

Кнопка — не «Узнать больше» и не «Оставить заявку». В hero сразу встроена форма: 1-3 поля плюс кнопка отправки. Имя, телефон, email — минимум. Или вообще одно поле: email или телефон.

Когда брать. Лидген, инфопродукты, бесплатные расчёты, заявки на консультацию, подписка на рассылку. Везде, где оффер — это «оставь контакт, и мы что-то сделаем». Конверсия в заявку на холодном трафике вырастает на 30-60% по сравнению со схемой «кнопка → попап → форма».

Когда не брать. Если продукт требует объяснения до того, как человек готов оставить контакт. Если попросить телефон в первом блоке у пользователя, который ещё не понял, что вы продаёте, конверсия упадёт в 2-3 раза, а в форму будут уходить случайные люди.

Правило простое: форма в hero оправдана, когда оффер сам по себе настолько ясен, что 30-50% аудитории готовы оставить контакт без дополнительного контекста. Проверяется одной фразой: «Если бы у меня был только этот первый экран, я бы понял, что мне предлагают?» Если нет — форму вниз, в hero оставляем кнопку.

Поля. Каждое дополнительное поле — минус 10-15% к конверсии формы. Три поля вместо пяти повышают завершённость на 30-50%. Если можно обойтись email — берите только email. Телефон спросите на втором шаге.

Вариант 5. Карусель с социальным доказательством

Hero состоит из переключающихся слайдов: 3-5 вариантов с разными заголовками, кейсами или отзывами. Иногда вместо ручного переключения — автоплей раз в 5-8 секунд. Часто рядом с заголовком — логотипы клиентов, цифры выручки или количество пользователей.

Когда брать. У вас несколько сильных кейсов или сегментов аудитории, и каждый требует своего захода. Агентства, b2b-платформы, продукты со множеством применений.

Когда не брать. Если кейсов нет или они слабые. Карусель в этом случае только размывает фокус. По данным NN/g, кликабельность баннер-каруселей в среднем 1-2% на первый слайд и 0,1-0,5% на остальные. То есть 95% аудитории видят только первый слайд. Зачем тогда карусель?

Авторская позиция. Карусель в hero — почти всегда компромисс между «нам надо показать всё» и «давайте выберем главное». В 8 случаях из 10 правильное решение — выбрать одно главное. Карусель брать только если у вас реально есть 3-4 сильных доказательства, каждое из которых работает на свою аудиторию.

Если всё же делаете карусель: автопереключение — не быстрее 6-8 секунд (иначе пользователь не успевает прочитать), точки навигации видимые, стрелки на десктопе обязательны. На мобильных — свайп.

Лучше карусели работает альтернатива: статичный hero + блок с 3-5 логотипами клиентов и одной цифрой («2 700 проектов с 2018 года»). Это даёт социальное доказательство без размывания фокуса.

Как тестировать первый экран: A/B без самообмана

Главная ошибка — менять сразу всё: заголовок, картинку, кнопку и форму одновременно. После такого теста невозможно понять, что именно дало эффект. Через месяц вы повторите эксперимент и получите другой результат, потому что не знаете, какой элемент сработал.

Правильная последовательность. На один тест — одно изменение. По приоритету:

  1. Заголовок. Самый сильный рычаг. Замена «о нас» на оффер с цифрой даёт +25-40% к CR.
  2. Кнопка CTA. Текст важнее цвета. «Получить расчёт» против «Отправить» — это +10-20%. Цвет даёт 2-7%.
  3. Визуал. Фото продукта против абстрактной иллюстрации, лицо клиента против стокового фото. Влияние сильно зависит от ниши, разброс 5-30%.
  4. Форма vs кнопка. Решается данными, а не вкусом. Прогоните оба варианта на одинаковом трафике.

Сколько ждать. Для статистической значимости нужно минимум 200-400 конверсий на каждый вариант или 5 000-10 000 уникальных посетителей на каждую версию. При CR 3% и трафике 200 человек в день это 16-30 дней теста. Меньше — гадание.

Инструменты. Google Optimize закрылся в 2023 году, поэтому реалистичные варианты — VWO (от $199 в месяц), Optimizely (для крупных проектов), Convert ($99-1 099 в месяц) или встроенные A/B-сплитеры в платформах вроде Tilda и Webflow. Для самостоятельной разработки — простой сплит через серверный редирект 50/50 плюс отдельные UTM.

Расчёт. Допустим, базовая CR — 2,5%. Цель — 3,5%. Минимальный размер выборки для значимости 95% и мощности 80% — около 4 500 посетителей на вариант. Если у вас 100 посетителей в день, ровный сплит даст результат через 90 дней. На таком сроке гипотеза проверяется только если бюджет на трафик стабилен.

3 ошибки в hero, которые стоят денег

Ниже — типичные провалы, которые встречаются почти в каждом аудите лендинга. С последствиями и цифрами.

Мини-расчёт по ошибкам. Лендинг с трафиком 3 000 уникальных в месяц, средний чек 25 000 ₽. При исходной CR 1,5% — 45 заявок и условные 1 125 000 ₽ потенциальной выручки (при конверсии в продажу 100%, что нереально, но для иллюстрации). После исправления трёх ошибок CR вырастает до 3% — это уже 90 заявок и 2 250 000 ₽ при том же трафике. Разница в 1 125 000 ₽ — стоимость трёх правок в hero. Не дизайнерская блажь.

Что брать, если выбирать одно

Если запускаетесь с нуля и не знаете, какой вариант hero взять, — берите классический (вариант 1). Заголовок-оффер с цифрой, подзаголовок-снятие возражения, кнопка с глагольным CTA, справа — фото продукта или скриншот интерфейса. Это не самый эффектный, но самый предсказуемый формат. Конверсия 3-7% на тёплом трафике достижима почти в любой нише.

Дальше — тестируйте. Через 1-2 месяца данных у вас будет понимание, в какую сторону двигаться: видео-фон, форма в hero, split или карусель. Гипотеза без данных — это вкусовщина, а не дизайн.

Если у вас уже есть лендинг и его CR ниже 2% на тёплом трафике — начинайте с заголовка. Не с цвета кнопки, не с шрифта, не с анимаций. Заголовок объясняет оффер. Всё остальное — обёртка. Слабую обёртку улучшить можно, слабый оффер — нельзя.

Чек-лист перед запуском hero

Что ещё посмотреть по теме

Чтобы материал работал сильнее, свяжите его с соседними темами блога. Внутренняя перелинковка помогает читателю собрать картину, а поиску — понять структуру сайта.

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

Как называется первый экран сайта?

В дизайне и в задачах разработчикам его называют hero section, hero block или above the fold. Термин fold пришёл из газетной вёрстки: всё, что выше линии сгиба, считалось главным. На сайтах роль линии сгиба играет нижняя граница экрана до прокрутки. В рунете чаще говорят просто «первый экран» или «первый блок».

Какой размер первого экрана для лендинга считается рабочим?

На десктопе — высота 600-900 px при ширине контента 1140-1280 px. На мобильных закладывайте 100vh, но проверяйте, чтобы заголовок и кнопка помещались на iPhone SE (568 px по высоте полезной области). На планшетах берите 700-820 px. Если hero выше 900 px, кнопка часто уходит за пределы первого экрана у части пользователей.

Первый экран сайта — это только то, что видно без прокрутки?

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

На сколько вырастает конверсия при смене hero?

Диапазон в практике сильно разнится. Замена слабого заголовка на конкретный оффер с цифрой даёт +25-40% к конверсии в заявку. Полная переработка hero с новым визуалом, CTA и формой — до +60-80%. Если изменения мельче (цвет кнопки, шрифт) — рост редко превышает 5-12%, и его надо проверять статистикой, а не глазами.

Видео-фон в hero — это всегда плохо для скорости?

Не всегда, но часто. Несжатое видео 1080p весом 8-15 МБ грузится 3-6 секунд на 4G и роняет LCP до 4-6 с при норме 2,5 с. Если без видео никак, держите файл в пределах 1,5-2,5 МБ, ставьте poster-картинку и отключайте автозапуск на мобильных. Иначе вы платите за рекламу, а посетитель уходит до загрузки.