Практические рекомендации по высоте первого экрана для лендинга в px и vh, примеры для десктопа и мобильных устройств, чек‑лист и тесты ✅ Улучшите конверсию.

Как определить оптимальный размер первого экрана для лендинга

Короткий ответ: нет универсального фиксированного числа в пикселях — оптимальный размер первого экрана для лендинга определяется задачей и типичными размерами устройств целевой аудитории. Практически: для десктопа ориентируйтесь на 600–900px по высоте или 50–80vh; для планшетов 600–800px; для мобильных устройств обеспечьте видимость основного заголовка и CTA в пределах 320–440px высоты экрана (или ~40–60vh с учётом системных панелей). Главный критерий — ключевое предложение и CTA должны быть очевидны без лишнего скролла.

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

Первый экран (hero area, above the fold) — та часть лендинга, которую пользователь видит сразу после загрузки страницы без вертикальной прокрутки. Это главная точка контакта: тут формируется первое впечатление, читается ценностное предложение, принимается решение прокрутить дальше или покинуть страницу.

Почему важно: на поведенческие метрики (время на странице, показатель отказов), CTR и конверсию сильно влияет, насколько быстро посетитель понял, что ему предлагают и какие следующие шаги. Для SEO это важно косвенно: улучшение поведенческих сигналов и увеличение органических конверсий повышают отдачу от продвижения.

Технические параметры: px, vh и адаптивность

Единицы измерения и их поведение

px — фиксированная единица, полезна для точного позиционирования элементов, но не для адаптивной верстки.
vh — процент от высоты окна браузера (1vh = 1% высоты). Удобно для «экранных» блоков: 100vh = весь экран.
Проценты и flex — позволяют подстраивать содержимое под родительский контейнер.

Почему 100vh не всегда работает

На мобильных браузерах адресная/панель состояния влияет на вычисление 100vh: некоторые браузеры считают 100vh без учёта панели (что приводит к скрытию части контента), другие — с учётом. Рекомендуем использовать хитрости: min-height: calc(100vh - var(--header-height)); или JavaScript-переменную для вычисления корректной высоты (document.documentElement.clientHeight).

// пример установки CSS-переменной через JS
const setVh = () => {
  document.documentElement.style.setProperty('--vh', (window.innerHeight * 0.01) + 'px');
};
window.addEventListener('resize', setVh);
setVh();
/* в CSS: .hero { min-height: calc(var(--vh) * 100); } */

Устройство	Ориентир по высоте	Рекомендация по CSS
Десктоп (широкие экраны)	600–900 px или 50–80vh	min-height: 60vh; max-height: 80vh; адаптивное масштабирование контента
Ноутбуки (1366×768)	560–760 px	min-height: 55vh; учесть фиксированную шапку (header)
Планшеты	600–800 px	min-height: 60–75vh; крупный CTA и читаемый текст
Мобильные (смартфоны)	320–440 px видимой области (высота без панели браузера); ориентируйтесь на 40–60vh	делайте ключевой заголовок и CTA видимыми в пределах первых 360–440px; используйте компактную верхнюю панель

Что должно помещаться в первом экране: приоритеты контента

Упорядочьте элементы по важности — от самого критичного к второстепенному:

Короткий и понятный заголовок (что вы даёте и для кого)
Подзаголовок или одно предложение-выражение выгоды
Главный CTA (форма/кнопка) — очевидный, контрастный
Короткий доверительный элемент: логотипы клиентов, рейтинг, короткий статистический факт
Визуал (картинка/иллюстрация/краткое видео), поддерживающий месседж

Если нужен ещё элемент (например, форма захвата лидов), ограничьте поля до 1–2 в первом экране и вынесите подробную форму ниже.

Дизайн, композиция и CTA: практические советы

Композиция

Правило золотого треугольника и F-образного чтения: важные элементы располагаем в верхней левой части для языков слева направо.
Контраст текста и фона — ключ для быстрого восприятия.
Оставляйте воздух: не загромождайте первый экран лишними элементами.

CTA

Фраза должна быть конкретной и полезной: «Получить расчёт» вместо «Узнать больше».
Цвет и размер: контрастный цвет, достаточный размер для тап‑зоны на мобильных (не менее 44×44px).
Дублируйте важные действия: если экран большой, разместите основной CTA и повторите ещё раз чуть ниже.

Изображения и видео

Изображение должно усиливать сообщение, а не отвлекать. Короткие автоплей видео без звука может повышать вовлечение, но замедляет загрузку — используйте оптимизированные форматы и lazy‑loading.

Влияние первого экрана на SEO и поведенческие метрики

Хотя поисковые алгоритмы напрямую не смотрят на «высоту первого экрана», поведенческие сигналы, зависящие от него, влияют:

Показатель отказов (bounce rate). Если пользователи не видят ценности — уходят, что ухудшает поведенческие метрики.
Время на странице и глубина просмотра. Хорошо расставленные приоритеты в первом экране мотивируют читать дальше.
CTR из поисковой выдачи. Соответствие заголовка (title/snippet) и видимого заголовка на лендинге повышает релевантность и клики.

Практическая рекомендация SEO‑first: делайте первую часть страницы максимально релевантной целевым поисковым запросам — используйте ключевую фразу в H1, кратком подзаголовке и видимом тексте. Платная реклама при запуске поможет получить трафик и ускорить сбор данных для A/B тестов, но сама по себе не заменит органическую оптимизацию.

Практические приёмы: A/B тесты, аналитика и инструменты

A/B тестирование

Что тестировать:

Высоту блока (100vh vs 70vh)
Позиционирование CTA (центр/верх/в правой части)
Короткий заголовок vs более детальный
Форма в первом экране vs кнопка «Оставить заявку»

Метрики для оценки: CR (conversion rate), CTR главной кнопки, время до клика, bounce rate из входного трафика.

Инструменты для проверки

Google Analytics / GA4 — сегменты по устройствам и источникам трафика.
Яндекс.Метрика — тепловые карты кликов и скроллов.
Платформы для A/B тестов — Google Optimize (или аналоги), VWO, Optimizely.
DevTools — симуляция устройств, Lighthouse для оценки производительности.

Как быстро собрать гипотезу

Посмотрите в аналитике самые частые разрешения и устройства вашей аудитории.
Определите бизнес‑цель лендинга (лиды/продажи/звонки) и ключевой CTA.
Постройте минимально изменяемый прототип — измените высоту и расположение CTA.
Запустите тест на достаточном трафике (правило статистической значимости).

Типичные ошибки и как их избежать

Сделать экран слишком громоздким. Пользователь не видит ценности быстро — уход. Решение: сократить текст, вынести детали ниже.
Игнорировать мобильную видимость CTA. Убедитесь, что кнопка достаточно большая и видна без скролла.
Плохая оптимизация веса картинок/видео. Замедление загрузки ухудшает поведенческие сигналы и SEO. Решение: WebP/AVIF, lazy load, адаптивные изображения.
Копировать шаблон без учёта ЦА. Универсального дизайна нет — ориентируйтесь на реальные пользователей.

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

Проверьте по пунктам перед релизом:

Заголовок содержит ценность и релевантен ключевому запросу.
CTA видим и контрастный, тап‑зона ≥44×44px на мобильных.
Ключевая информация помещается в пределах целевых разрешений (см. таблицу выше).
Изображения оптимизированы, lazy‑load настроен.
Шапка/меню не перекрывают важный контент на мобильных (тест на плотных экранах).
SEO‑метатеги (title, description) соответствуют сообщению на первом экране.
Настроена аналитика: события кликов по CTA, скроллам, тепловые карты.

FAQ

1. Какой высоты должен быть первый экран для мобильных?

Оптимально, чтобы ключевой заголовок и основной CTA были видны в пределах 320–440px видимой области. Технически используйте relative units (vh) и JS‑фикс для корректной высоты на мобильных. Если нужен элементарный ориентир: стремитесь к тому, чтобы критическая информация помещалась в верхние 40–60vh для смартфонов.

2. Стоит ли делать первый экран на 100vh?

Иногда да — для эффектного промо или лендинга с мощной визуальной презентацией. Но 100vh может скрыть CTA на мобильных из‑за системных панелей. Лучше использовать адаптивный минимум (min-height) и тестировать поведение на реальных устройствах.

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

Смотрите метрики: CTR CTA, CR по источникам трафика, глубину просмотра, тепловые карты по кликам и скроллам. Запустите A/B тест с альтернативной компоновкой и оцените статистически значимые изменения по ключевой конверсии.

4. Что важнее — дизайн первого экрана или скорость загрузки?

Оба важны, но если выбирать, скорость загрузки — фундамент. Медленный лендинг снизит трафик и позиции в поиске. Дизайн должен быть оптимизирован с учётом скорости (оптимизированные изображения, отложенная загрузка видео, минимальная критическая CSS/JS).

5. Насколько SEO зависит от того, что видно в первом экране?

Непосредственно поисковик не «оценивает» видимую часть страницы, но поведенческие сигналы, качественные релевантные заголовки и соответствие сниппету влияют на клики и удержание, что в итоге повышает эффективность SEO‑вложений.

Как мы помогаем

В Rose Digital мы проектируем лендинги с SEO‑парадигмой: сначала строим страницу, которая органически релевантна целевым запросам и удерживает пользователя с первого экрана, затем ускоряем рост трафика контекстной рекламой и оптимизацией конверсии. Это позволяет получить стабильный накопительный эффект от органики и одновременно быстрый запуск заявок с рекламы.

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

Услуги создания и продвижения сайтов • Кейсы по лендингам

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