Почему первый экран решает всё
Первый экран это то, что посетитель видит до первого скролла. На мобильном это около 600 пикселей высоты, на десктопе 700–900. По данным Яндекс.Метрики, 40–60% посетителей принимают решение остаться или уйти за 5–7 секунд, то есть не докручивая страницу.
Если на первом экране нет главного оффера, дальше ничто не поможет. Можно написать гениальные отзывы в 5-м блоке, но до них никто не доберётся. Поэтому 80% внимания при проектировании идёт именно на верхние 700 пикселей.
Ниже 10 элементов, которые либо обязательны, либо сильно влияют на конверсию. Порядок по убыванию важности.
1. Заголовок с понятным обещанием
Главный продающий элемент страницы. Задача заголовка — за 3 секунды ответить на вопрос “что я тут получу”. Не “о нас”, не “добро пожаловать”, а конкретная выгода или предложение.
Рабочие формулы:
- “Что получает клиент за что-то”. Пример: “Продающий лендинг за 2 дня и 15 000 рублей”.
- “Решение проблемы в цифрах”. Пример: “Поток заявок в стоматологию от 3 000 рублей за лид”.
- “Отстройка от конкурентов”. Пример: “Ремонт квартир с фикс-ценой и сроком без изменений в смете”.
Размер шрифта заголовка — от 40 пикселей на мобильном, от 56 на десктопе. Контраст с фоном минимум 7:1. Это не дизайнерский каприз, а физика восприятия.
2. Подзаголовок с уточнением условий
Под заголовком идёт подзаголовок из 1–2 строк. Он уточняет оффер: кому, на каких условиях, что входит. Подзаголовок читается после заголовка у 70% посетителей, ещё 20% читают только его.
Пример связки:
Заголовок: “Продающий лендинг за 2 дня и 15 000 рублей” Подзаголовок: “Дизайн, вёрстка, копирайтинг, подключение домена и метрики. Гарантия возврата, если не уложусь в срок.”
Подзаголовок должен снять первое возражение, которое возникает у читателя после заголовка. Если заголовок обещает быстро, подзаголовок объясняет, что именно влезает в этот срок.
3. CTA-кнопка без скролла
Главная кнопка целевого действия обязательно видна на первом экране без прокрутки. Иначе посетитель не сможет среагировать на оффер сразу, пока импульс свежий.
Требования к кнопке:
- Размер от 48×48 пикселей (минимум для пальца на мобильном).
- Яркий контрастный цвет относительно фона.
- Текст в активной форме: не “заказать”, а “заказать лендинг за 2 дня”.
- Только одна главная кнопка. Вторая рядом только если она повторяет главную другим каналом (Telegram / MAX / звонок).
Две кнопки разного веса на первом экране режут конверсию в 1,5–2 раза. Посетитель выбирает между ними вместо того, чтобы нажать.
4. Визуальный якорь
Это картинка, фото или иллюстрация, которая помогает понять суть продукта. Плохие варианты:
- Стоковое фото “счастливые люди в офисе с планшетом”.
- Абстрактные “геометрические облака” без смысла.
- Огромный видеофон, который тормозит загрузку.
Хорошие варианты:
- Скриншот самого продукта или интерфейса.
- Фото выполненной работы (для услуг: отремонтированная квартира, готовая причёска, выточенный зуб).
- Кастомная иллюстрация, передающая суть процесса.
Визуал не должен отвлекать от заголовка. Соотношение 60/40 в пользу текстовой части работает лучше, чем 50/50.
5. Социальное доказательство сверху
Ещё до скролла желательно показать один элемент доверия. Это может быть:
- Счётчик “125 проектов с 2019 года”.
- Логотипы известных клиентов.
- Короткая цитата из отзыва с фото автора.
- Рейтинг на Яндекс.Картах или Отзовик.
Один такой элемент сверху увеличивает конверсию в клик по CTA на 10–20%. Посетитель быстрее проникается доверием и готов действовать.
Что не работает как доказательство
- “Более 10 лет на рынке” без конкретики. Это слова без привязки.
- “Тысячи довольных клиентов” без цифры, источника и проверки.
- Анонимные отзывы с выдуманными фото из стока. Профессиональный посетитель считывает мгновенно.
6. Короткие выгоды или преимущества
Под главным оффером часто уместны 3–4 коротких буллета с конкретными выгодами. Каждый буллет — одна строка. Каждый с иконкой или маркером.
Пример:
- Договор и чек в день оплаты
- Возврат 100% при срыве срока
- Лично сам, без менеджеров
- Работаю с 2019 года, 140 проектов
Буллеты читаются быстрее, чем абзац текста, поэтому работают хорошо. Но 5+ пунктов превращаются в мусор, который никто не читает. Оптимум — 3–4 ключевых факта.
7. Шапка с навигацией или контактами
Вверху страницы шапка с минимальным набором: логотип, телефон, 1–2 пункта меню (только если они ведут к действию), и одна кнопка CTA (та же, что в главном блоке).
Спорный элемент — меню на лендинге. Если меню есть, оно должно вести либо к якорям внутри страницы, либо к целевому действию. Меню со списком услуг на лендинге — это антипаттерн, размывает фокус.
Что точно стоит держать в шапке
- Номер телефона кликабельным в tel-ссылке.
- Иконки мессенджеров (Telegram, MAX) с прямыми ссылками на чат.
- Маленький CTA-оффер напоминалкой.
8. Индикатор скролла или направляющий элемент
Часть посетителей не понимает, что страница длинная и ниже есть контент. Им кажется, что первый экран — это весь лендинг. Чтобы подсказать, что можно скроллить, используют:
- Стрелку вниз с анимацией “пульс”.
- Короткий текст “ещё 12 блоков ниже”.
- Небольшой отступ следующего блока, чтобы было понятно, что он есть.
Индикатор даёт прирост глубины просмотра на 15–25%. Это не прямое влияние на конверсию, но косвенно работает: больше людей доходят до отзывов и цен.
9. Без лишних элементов отвлечения
Часто первый экран перегружают элементами, которые растягивают внимание:
- Слайдер с 6 офферами. Посетитель видит только первый, остальные не докликивают.
- Попап на 3-й секунде с “подпишитесь на рассылку”. Раздражает, снижает время на странице.
- Баннер “мы используем cookies” во весь экран. Закрывает половину контента, требует клика.
- Чат со смайликом “здравствуйте, чем помочь” в правом нижнем углу, который перекрывает CTA.
Всё это убирается с первого экрана. Cookies — узкая полоска снизу. Чат включается после 30 секунд на странице. Попапы — только на exit-intent, когда курсор ушёл к крестику.
10. Адаптация под источник трафика
Если лендинг получает трафик из Яндекс.Директа по ключу “ремонт ванной недорого”, заголовок первого экрана должен упоминать ремонт ванной и вилку цен. Если по ключу “дизайн кухни” — кухню.
Техническая реализация — мультилендинг с подменой контента по UTM-метке. Сервисы типа Yagla делают это из коробки. Рост конверсии после настройки 20–40% на тех же рекламных объявлениях.
Для небольшого бизнеса альтернатива проще: 2–3 отдельных лендинга под разные ключевые группы, каждый со своим акцентом на первом экране.
Таблица: типовые ошибки первого экрана и их стоимость
| Ошибка | Потеря конверсии |
|---|---|
| Заголовок “Добро пожаловать” без оффера | до 60% |
| CTA-кнопка ниже скролла | до 30% |
| Стоковое фото вместо продукта | до 20% |
| Меню со списком услуг | до 15% |
| Слайдер с 5+ слайдами | до 25% |
| Нет подзаголовка под заголовком | до 15% |
| Попап в первые 5 секунд | до 20% |
Эти потери суммируются. Первый экран с 3 ошибками из списка может терять до 70% потенциальной конверсии против оптимального варианта.
Чек-лист: проверьте свой первый экран
- За 3 секунды ясно, что предлагает сайт.
- На первом экране видна кнопка целевого действия.
- Под заголовком есть подзаголовок с условиями.
- Визуал показывает продукт, а не абстракцию.
- Есть минимум один элемент социального доказательства.
- На мобильном всё помещается без горизонтального скролла.
- Нет попапов в первые 5 секунд.
- Кнопки отзывчивы сразу, а не через 2 секунды на загрузку JS.
- Текст читается на обоих цветах фона (день/ночь темы браузера).
- Загрузка первого экрана меньше 1,5 секунд на 4G.
Короткий итог
Первый экран — это не “красиво выглядит”, а “понятно за 5 секунд и есть одна кнопка”. Всё остальное вторично.
Если сомневаетесь в своём первом экране, откройте лендинг на мобильном, сделайте скриншот, покажите человеку, который не знает ваш продукт. Пусть за 5 секунд скажет, что вы предлагаете. Если не может — перерисовывайте первый экран.
Инвестиция 3–5 часов в правильную формулировку заголовка и подзаголовка окупается в 2–3 раза быстрее, чем любое улучшение нижних блоков.
