Первый экран сайта: формула, которая удерживает клиента

Первый экран сайта — это всё, что посетитель видит, не прокручивая страницу. За несколько секунд он решает: читать дальше или вернуться в выдачу. Чтобы он остался, на экране нужны шесть вещей: заголовок с конкретным предложением, подзаголовок с фактами (цена, срок, география), 2–4 доказательства доверия, одна главная кнопка и визуал с результатом — а сам экран должен загрузиться на смартфоне быстрее чем за 2,5 секунды. Не понял человек за 3–5 секунд, что ему предлагают, подходит ли это ему и куда нажать, — он уходит к конкуренту.

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

Почему первый экран важнее остальной страницы

Айтрекинговое исследование Nielsen Norman Group (2018) показало: 57% времени просмотра страницы пользователи проводят в зоне, видимой без прокрутки, а до нижних блоков добирается только часть аудитории. Первый экран видят все, блок с гарантиями или портфолио — далеко не все.

Ещё три причины, почему это самая дорогая площадь сайта:

• Реклама оплачивается за клик, а не за внимание. Цена клика в Google Ads зависит от ниши и конкуренции, и во многих тематиках это десятки гривен за переход (подробнее — в статье сколько стоит реклама в Google). Если человек закрыл страницу через пару секунд, вы заплатили за посетителя, который так и не узнал о вашем предложении.
• Мобильный экран маленький. Видимая зона смартфона — примерно 360–430 px в ширину и 600–750 px в высоту с учётом панели браузера. Туда помещаются заголовок, 2–3 строки текста и кнопка. Всё.
• По первому экрану судят обо всём бизнесе. Устаревший дизайн, мутное фото или медленная загрузка воспринимаются как признак того, что и услуга будет такой же.

Задача первого экрана — не продать всё сразу, а удержать и перевести к следующему шагу: прокрутить, нажать кнопку, написать в мессенджер.

Формула первого экрана: 6 обязательных элементов

Заголовок: три схемы, которые работают

Заголовок — главное обещание страницы. Оптимальная длина — 5–12 слов, чтобы на смартфоне он занимал не больше 2–3 строк.

1. Услуга + результат + условие. «Бухгалтерское сопровождение ФЛП без штрафов и походов в налоговую». Подходит для услуг, где клиент сравнивает несколько компаний.
2. Проблема → решение. «Сломался котёл? Мастер приедет в течение 2 часов». Работает в срочных нишах: аварийные службы, ремонт техники, стоматология с острой болью.
3. Продукт + главное отличие. «Торты на заказ без маргарина с доставкой в день заказа». Для товаров и производства.

Для SEO заголовок первого экрана обычно и есть H1, поэтому в нём должен быть главный запрос в естественной форме: не «Стоматология Киев недорого имплантация», а «Имплантация зубов в Киеве с гарантией на работу».

Чего избегать:

• приветствий вроде «Добро пожаловать на наш сайт»;
• названия компании вместо предложения — его и так видно в логотипе;
• абстракций: «Решения для вашего бизнеса», «Создаём будущее»;
• непроверяемых обещаний: «Лучшие в Украине».

Подзаголовок: 1–2 строки фактов

Подзаголовок отвечает на вопросы, которые возникают сразу после заголовка: сколько стоит, как быстро, где, чем вы отличаетесь. Лучше всего работают числа: «от 2 500 грн», «выезд за 60 минут», «отправка в день заказа». Если точную цену назвать нельзя, дайте диапазон или «от» — без единой цифры человек пойдёт искать её у конкурентов.

Хороший приём — три коротких факта под заголовком в виде тегов или иконок: «Гарантия 2 года · Договор с фиксированной ценой · Бесплатный замер».

Доказательства доверия: что поместится на первый экран

Полный блок отзывов здесь не уместится, а 2–4 коротких доказательства — вполне:

• рейтинг и количество отзывов в Google Maps (только реальные, со ссылкой на профиль);
• лицензия, сертификат, членство в профессиональной ассоциации — для медицины, права, строительства;
• годы работы, число филиалов, объём производства — если вы готовы это подтвердить;
• гарантия, прописанная в договоре;
• логотипы известных клиентов — только с их согласия.

Выдуманные цифры вроде «10 000 довольных клиентов» и шаблонные отзывы вредят сильнее, чем их отсутствие: люди научились их распознавать, а проверка занимает минуту.

Главное действие: одна кнопка и понятный результат

Главная кнопка должна быть одна. Второстепенная допустима, если визуально слабее — например, контурная «Написать в Telegram» рядом со сплошной «Записаться».

• Текст = глагол + результат: «Рассчитать стоимость», «Записаться на консультацию», «Получить прайс». Не «Отправить», «Подробнее» или «Нажмите здесь».
• Размер: высота от 44–48 px, чтобы в кнопку было легко попасть пальцем.
• Контраст: цвет кнопки больше нигде на экране не повторяется.
• Мягкий первый шаг: если услуга дорогая или сложная, вместо «Заказать» предложите квиз из 3–5 вопросов, калькулятор или «Смету за 15 минут».
• Мессенджеры: в Украине кнопки Telegram и Viber часто конвертируют лучше формы, особенно на смартфоне.

Визуал: показывайте результат, а не «бизнес»

Изображение должно усиливать заголовок, а не просто украшать страницу:

• услуги — результат работы (фото «до/после», готовый объект), команда, реальный кабинет или цех;
• товары — продукт крупно, в использовании, с деталями;
• B2B — производство, склад, техника, сертификаты;
• локальный бизнес — интерьер, витрина, блюда, мастера за работой.

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

Первый экран для разных типов сайтов

Для лендинга с рекламным трафиком критично соответствие объявлению (message match). Если в объявлении «Лендинг от 8 900 грн за 3 дня», а на первом экране — «Мы создаём цифровые решения», человек решит, что попал не туда. Страдает и реклама: релевантность и удобство целевой страницы входят в показатель качества Google Ads. Подробнее — в статье о посадочной странице для Google Ads.

Пример: как меняется первый экран после аудита

Было (сайт стоматологии): слайдер из трёх баннеров, заголовок «Ваша улыбка — наша забота», кнопки «Услуги», «Цены», «Контакты», «Записаться» одного цвета, телефон без ссылки.

Стало: заголовок «Лечение и имплантация зубов на Позняках — без боли и очередей», подзаголовок «Первая консультация с планом лечения — 500 грн, приём в день обращения», три факта «Лицензия МОЗ · Рейтинг 4,9 в Google · Гарантия в договоре», одна кнопка «Записаться на приём» и вторая, контурная, — «Viber». Фото — реальный кабинет и врач, без баннеров.

Цифры в примере условные, но логика универсальна: меньше элементов, больше конкретики, одно действие.

Техническая сторона: первый экран должен появиться за 2,5 секунды

Самый крупный элемент первого экрана (обычно главное изображение или заголовок) — это и есть метрика LCP из Core Web Vitals. По состоянию на 2026 год Google считает хорошими такие значения: LCP до 2,5 с, INP до 200 мс и CLS до 0,1 — как минимум для 75% посещений. Подробно об этих метриках — в материале о Core Web Vitals.

Что делать на практике:

• Главное изображение — в WebP или AVIF, 80–200 КБ для мобильной версии, с отдельными размерами для смартфона и десктопа и приоритетной загрузкой.
• Без видеофона на мобильном. Если видео действительно нужно, показывайте статичный кадр, а само видео грузите после взаимодействия.
• Шрифты: 1–2 гарнитуры, только нужные начертания, кириллическое подмножество.
• Сторонние скрипты (онлайн-чат, пиксели, виджеты отзывов) — после первой отрисовки, а не до неё.
• Фиксированные размеры блоков, чтобы ничего не «прыгало» при загрузке. Баннер cookie или акции не должен сдвигать кнопку.
• Никаких попапов в первые секунды. Окно «Оставьте телефон» через 2 секунды после входа раздражает и на смартфоне закрывает весь контент.

Мы гарантируем PageSpeed 90+ на мобильных (не дотянули — дорабатываем бесплатно) как раз потому, что медленный первый экран обнуляет работу дизайнера и копирайтера.

11 типичных ошибок первого экрана

1. Слайдер из 3–5 баннеров — размывает фокус и тормозит загрузку.
2. Заголовок-слоган без сути — «Вместе к успеху», «Ваш надёжный партнёр».
3. Несколько равнозначных кнопок — человек не понимает, что делать, и не делает ничего.
4. Ни одной цифры — ни цены, ни срока, ни гарантии.
5. Стоковые фото, которые люди видели на десятках других сайтов.
6. Тяжёлый видеофон, из-за которого первый экран появляется через 5–8 секунд.
7. Попап или баннер cookie на полэкрана сразу после входа.
8. Телефон без ссылки — на смартфоне по нему нельзя нажать, чтобы позвонить.
9. Текст поверх фото с низким контрастом — на солнце его не прочитать.
10. Мобильная версия как уменьшенный десктоп — H1 на шесть строк, кнопка ушла за пределы видимой зоны.
11. Несоответствие языка — человек пришёл по украиноязычному запросу, а видит русскоязычную страницу или смесь языков. По умолчанию сайт для Украины должен открываться на украинском.

Как проверить, что первый экран работает

Тест пяти секунд. Покажите первый экран 5–7 людям из целевой аудитории (не коллегам) на 5 секунд, затем уберите и спросите: что здесь предлагают, для кого и что можно сделать дальше? Если большинство не отвечает на все три вопроса — переписывайте заголовок и подзаголовок.

Аналитика поведения. Бесплатный Microsoft Clarity показывает записи сессий, тепловые карты кликов и глубину прокрутки. Смотрите на:

• долю людей, которые ушли, не прокрутив страницу;
• клики по некликабельным элементам — люди думают, что иконка или фото является ссылкой;
• серии быстрых кликов в одно место (rage clicks) — признак раздражения.

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

A/B-тест. Тестируйте один элемент за раз — заголовок, кнопку или визуал. Для надёжного вывода нужно минимум 2 недели и желательно 100+ целевых действий на каждый вариант. На малом трафике разница в 10–15% часто оказывается случайностью.

Быстро оценить скорость и базовые проблемы страницы можно с помощью бесплатного аудита сайта.

Чеклист первого экрана

Проверяйте на смартфоне — там большинство ваших посетителей:

• За 5 секунд понятно, что вы предлагаете и для кого.
• В заголовке услуга или продукт, а не слоган.
• Есть хотя бы одна конкретная цифра: цена «от», срок, гарантия.
• Есть 2–4 проверяемых доказательства доверия.
• Одна главная кнопка с глаголом и результатом.
• Кнопка видна без прокрутки на экране 360×640.
• Телефон кликабельный, есть Telegram или Viber.
• Фото реальные и показывают результат или продукт.
• Нет автоматического слайдера и видеофона на мобильном.
• LCP до 2,5 с, PageSpeed на мобильных — 90+.
• При загрузке ничего не прыгает.
• Нет попапа в первые 10–15 секунд.
• Первый экран лендинга повторяет предложение из рекламы.
• Язык страницы соответствует языку запроса.

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

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

Дальше — фиксированная цена и срок в договоре:

• лендинг — от 8 900 грн за 2–3 дня; в пакете «Максимум» (24 900 грн, 5–7 дней) — два варианта первого экрана для A/B-теста;
• дизайн сайта с продуманными первыми экранами для главной и ключевых страниц;
• редизайн действующего сайта — 70% от стоимости нового пакета, с переносом контента и 301-редиректами, чтобы не растерять накопленный трафик.

Вывод

Хороший первый экран оценивают не по красоте, а по одному критерию: понятно ли за 5 секунд, что вы предлагаете, почему вам стоит верить и какой шаг сделать. Ничего сложного для этого не нужно — заголовок с пользой, подзаголовок с цифрами, пара проверяемых доказательств, одна кнопка, настоящее фото и загрузка быстрее 2,5 секунды. Остальное покажут тесты.

Интересно, как мог бы выглядеть первый экран вашего сайта? Команда Tvorum бесплатно сделает прототип за 24 часа — без обязательств.