Первый экран сайта: что на нём должно быть и как проверить

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

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

01Сколько времени у вас есть на первом экране

Я открыл 11 статей, которые держатся в топе по запросам про первый экран, и посчитал, на что они опираются. 6 статей из 11 повторяют «3–5 секунд на решение». Ссылку на исследование из этих шести даёт одна. Ещё одна называет 10 секунд со ссылкой на Microsoft Research — то есть топ расходится сам с собой в два-три раза и в большинстве случаев не показывает, откуда взялась цифра.

Замер сделан 11 сентября 2026 года. Что говорит исследование, на которое из этих шести сослалась одна: «Users often leave Web pages in 10–20 seconds, but pages with a clear value proposition can hold people's attention for much longer» — люди часто уходят со страницы за 10–20 секунд, но страница с понятным предложением удерживает внимание заметно дольше. И там же: «To gain several minutes of user attention, you must clearly communicate your value proposition within 10 seconds» — чтобы получить несколько минут внимания, суть предложения надо донести за 10 секунд.

Второе исследование той же группы снимает ещё одно общее место — что первый экран решает всё. Замер распределения внимания: «In our most recent study, users spent about 57% of their page-viewing time above the fold» и «74% of the viewing time was spent in the first two screenfuls, up to 2160px» (2160 пикселей здесь — не размер экрана, а глубина прокрутки, до которой считали). Перевод: около 57 % времени просмотра приходится на то, что видно без прокрутки, и 74 % — на первые два экрана. Там же сравнение с прошлым замером: «In 2010, 80% of the viewing time was spent above the fold. Today, that number is only 57%». Замер сделан в 2018 году, предыдущий — в 2010-м: за восемь лет доля упала с 80 до 57 %, то есть на 23 пункта. Первый экран решает, начнут ли листать вообще, — а дальше работает вся страница.

02Четыре элемента, без которых экран не работает

• Что это. Конкретное название предложения, а не слоган. «Монтаж вентиляции в производственных цехах» вместо «Решения для вашего бизнеса».
• Для кого. Одна строка, сужающая аудиторию. Она отсекает лишние заявки, и это её задача, а не побочный эффект.
• Чем отличается. Проверяемое утверждение: срок, гарантия, объём, ограничение. Если ту же фразу может написать конкурент, она не работает.
• Одно действие. Одна кнопка, а не пять. Форма, звонок и мессенджер на одном экране обычно означают, что решение о целевом действии не принято.

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

03Почему размер нельзя задать в пикселях

Две статьи из топа называют цифры вроде «высота 600–800 пикселей», и обе не ссылаются ни на какой источник. Задавать высоту первого экрана фиксированным числом пикселей нельзя по устройству самого веба: эта высота у каждого посетителя своя.

Для высоты окна в вёрстке есть свои единицы измерения — их считают в процентах от высоты видимой области, а не в пикселях. У старых единиц есть известная особенность. Документация формулирует её прямо: «Although the viewport size can change, the vw and vh sizes do not. As a result, elements sized to be 100vh tall will bleed out of the viewport». По-русски: блок «на всю высоту экрана», сделанный старым способом, на телефоне оказывается выше видимой области, и кнопка уезжает под адресную строку.

Современное решение описано в справочнике MDN: «When you want the viewport to be automatically sized in response to browser interfaces dynamically expanding or retracting, you can use the dynamic viewport size» — есть единицы, которые пересчитываются сами, когда интерфейс браузера разворачивается и сворачивается. Там же предупреждение: «While the dynamic viewport size can give you more control and flexibility, using viewport-percentage units based on the dynamic viewport size can cause the content to resize while a user is scrolling a page» — содержимое может дёргаться прямо во время прокрутки.

Заказчику из этого нужен ровно один вопрос к подрядчику: «Кнопка на первом экране видна на телефоне без прокрутки, когда адресная строка развёрнута?» Проверяется за десять секунд на собственном телефоне.

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

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

Что у этих пяти. Четыре называют высоту десктопного первого экрана: 600–900, 600–800, ещё раз 600–800 и около 700 пикселей. Мобильную высоту называют две — 400 пикселей и 500–600. Источник называет одна: siteclinic ссылается на тот же Statcounter, но ни одного процента из него не приводит. Пятая страница чисел не даёт вовсе. И то, чего не было в сентябрьских 11 статьях, у этих пяти попадается: одна считает высоту в единицах вьюпорта, две пишут про мобильный экран отдельно.

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

Шесть самых частых разрешений собирают 69,88 % визитов — почти треть людей приходит с каким-то другим. По всем устройствам вместе разброс шире: у самого популярного разрешения 24,06 %, у шести первых вместе 48,68 %. То есть больше половины посетителей приходит с разрешением вне этой шестёрки, и любая одна «правильная высота» мимо них. Десктоп в России даёт 64,82 % визитов, мобильные — 34,17 %, поэтому нужны оба списка.

Мобильные разрешения за тот же месяц. Третий столбец — моя арифметика, а не цифра из документации: в ресурсах Android-сборки Chromium высота верхней панели браузера задана строкой <dimen name="default_action_bar_height">56dp</dimen>, в разметке это те же 56 пикселей, и я вычел их из высоты экрана. Для Safari на iPhone такого публичного числа нет, поэтому на iPhone третий столбец — ориентир сверху, а не замер.

Разброс по шестёрке — от 724 до 840 пикселей, и верстать приходится под нижнюю границу: что уложилось в неё, уложится и в остальные пять. Те 400 пикселей, которые в топе называют мобильной высотой первого экрана, — это чуть больше половины высоты, которая на самом коротком из этих телефонов вообще есть.

Числа в мобильной таблице — логические пиксели, те самые, в которых считается вёрстка, а не физические точки матрицы: 414×896, 390×844 и 360×800 буквально повторяют размеры из списка эмулируемых устройств Chrome DevTools. В десктопной таблице то же самое видно арифметикой: 1536×864 — это 1920×1080 при системном масштабе 125 %, монитора с такой матрицей не существует. Свой отчёт о разрешениях Яндекс Метрика описывает так же: «Данные в отчете сгруппированы по логической ширине и высоте дисплея».

И ещё одно, из-за чего третий столбец — минимум, а не константа. Когда панель браузера при прокрутке сворачивается, видимая область вырастает: у одного телефона две разных высоты первого экрана. Верстать MDN советует по меньшей из двух.

05Оффер и кнопка должны попадать в верхние 724 пикселя

Из таблицы получается рамка для приёмки. Это не высота, которую задают в вёрстке — задавать её по-прежнему нельзя. Это нижняя граница того, что есть у посетителя: у самого короткого из шести самых частых мобильных разрешений, 360×780, при развёрнутой панели браузера на страницу остаётся 724 пикселя по высоте при ширине 360. В эту рамку должны попасть заголовок, пояснение и кнопка. На старых маленьких телефонах будет меньше — у iPhone SE с его 375×667 останется около 611, — но если в рамку уложились, на остальных разрешениях из таблицы запас только растёт.

Точнее, чем на глаз, это смотрится линейкой в браузере, и здесь проще попросить подрядчика показать экран, чем разбираться самому. Пусть он откроет страницу в Chrome, включит панель устройств (F12, затем Ctrl + Shift + M), выставит размер 360 × 724 вручную и включит линейки — галочка «Show rulers on hover» в настройках DevTools показывает, на каком пикселе по высоте стоит любой элемент. Кнопка ниже границы — значит, на первом экране её нет, как бы хорошо страница ни выглядела на ноутбуке.

Заодно смотрится размер самой кнопки. Lighthouse называет размер, при котором аудит точно не придерётся: «Tap targets that are 48 px by 48 px never fail the audit», и там же про промежутки — «8 px between tap targets is a good starting point, but is not always enough spacing to pass the audit especially for very small targets». Кнопка мельче этого на телефоне — уже риск, а не вопрос вкуса.

Если оффер и кнопка в рамку не уложились, переделывать первый экран отдельно от остального имеет смысл не всегда — но это одна из немногих правок, которые не требуют трогать весь сайт. Можно обсудить переработку первого экрана лендинга вместе с заменой оффера, если гипотеза о предложении у вас уже есть.

06Мобильный первый экран — отдельная работа

Ни в одной из 11 статей того сентябрьского замера нет раздела про мобильный первый экран. А это не уменьшенная копия десктопного, а другая композиция: заголовок переносится на 3 – 4 строки, картинка занимает половину высоты, кнопка уходит вниз.

Что меняется практически:

1. Порядок блоков другой. Крупное изображение, которое на десктопе стоит справа от текста, на телефоне встаёт сверху и выталкивает смысл за пределы экрана. Часто правильное решение — уменьшить или убрать его на мобильном.
2. Заголовок короче. То, что на широком экране занимает строку, на узком занимает четыре.
3. Скорость становится частью первого экрана. Есть метрика LCP — время, за которое на экране появляется самый крупный видимый элемент: картинка, блок текста или видео. Документация описывает её как «the render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page», а хорошим значением называет «2.5 seconds or less». Считается она не по одному открытию, а по 75-му перцентилю загрузок — то есть по трём четвертям визитов, отдельно для мобильных и десктопа. Тяжёлая картинка на первом экране бьёт по этому показателю сильнее всего остального на странице.
4. Всплывающее окно на первом экране особенно дорого. Google формулирует требование коротко: «Don't obscure the entire page with interstitials».

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

Разберём именно
ваш сайт бесплатно

Посмотрю страницу и рекламу, найду,
где теряются заявки, и пришлю план,
что поменять.

Что входит в разбор

• 1
  Где теряются заявкипуть от объявления до формы
• 2
  Что поправить на сайтепервый экран, оффер, формы
• 3
  Что поменять в рекламезапросы, объявления, бюджет

Михаил Лапошинразберу ваш проект лично

Ваше имяТелефонСайт

TelegramWhatsAppЗвонок

Согласен на обработку данных и политику конфиденциальностиПолучить бесплатный разбор

✓ Заявка принята — отвечу в течение часа

07Если на страницу идёт реклама

Первый экран посадочной страницы — предмет требований Яндекс Директа, а не только вкуса. Справка перечисляет их списком, и два из них касаются первого экрана. Первый: «блоки для размещения объявлений не занимают более половины первого экрана» — речь о чужой рекламе, которую вы сами разместили на странице, а не о ваших собственных блоках. Второй: «не содержит всплывающих блоков (pop-up или pop-under), допускаются формы связи, например, для онлайн-консультаций» — и это требование относится ко всей странице, а не только к её верху.

Третье требование про смысл: страница «соответствует тексту объявления». Практически это значит, что обещание из объявления должно читаться на первом экране теми же словами. Человек, кликнувший по «вентиляция для цехов под ключ», должен увидеть эту фразу, а не «Добро пожаловать».

Какая посадочная вообще нужна под контекст и можно ли обойтись главной страницей сайта, я разбирал подробно: какой сайт нужен под Яндекс Директ и когда хватает одной страницы — там же про то, чем лендинг отличается от раздела услуг.

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

08Как проверить первый экран у подрядчика за 10 минут

Пять проверок, ни одна из которых не требует разбираться в вёрстке.

• Тест незнакомого человека. Покажите экран тому, кто не в курсе вашего бизнеса, на 10 секунд и спросите, что здесь предлагают и кому. Не ответил — переписывать текст, а не двигать кнопку.
• Телефон в руках. Откройте страницу на смартфоне и не листайте. Кнопка видна? Заголовок целиком?
• Совпадение с объявлением. Откройте объявление и страницу рядом. Одно обещание или два разных?
• Одно действие. Посчитайте кнопки и формы на первом экране. Больше одной основной — спросите, какая из них считается целевой.
• Скорость. Засеките, через сколько появляется картинка на первом экране при обычном мобильном интернете, а не по вайфаю в офисе.

Шестая проверка делается не сразу, а через месяц работы сайта. В Яндекс Метрике есть карта прокрутки — инструмент, который «показывает среднее время и количество просмотров определенного участка страницы». Если внимание обрывается на первом экране, до предложения никто не доходит.

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

Михаил ЛапошинМаркетолог, руководитель Laposhin Agency

«Делаем сайты и запускаем Яндекс Директ так, чтобы
сайт приносил заявки, а не просто был»

Есть вопрос по статье?Задать вопрос в Telegram