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

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

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

Времени на этом экране мало. Исследователи Microsoft Research (Chao Liu с коллегами) собрали данные плагина для браузера по 205 873 страницам, у каждой не меньше 10 000 визитов. Пересказ Nielsen Norman Group (NN/g) от 11 сентября 2011 года: люди часто уходят за 10-20 секунд, а тех, кто сразу понял, что им предлагают, удержать проще. Исследование не новое, так что 10 секунд — не закон, а напоминание.

Верх страницы получает больше всего взглядов. В исследовании NN/g (15 апреля 2018 года) 120 человек смотрели сайты на компьютере с экраном 1920×1080, а за их взглядом следил специальный прибор. Выше линии прокрутки (так называют нижний край экрана: что над ним, видно без прокрутки) люди провели около 57% времени, на первых двух экранах — 74%. Про телефоны данных нет. Похожая работа 2010 года на экранах 1024×768 дала 80%, но экраны и сайты с тех пор изменились, и NN/g пишет, что разделить влияние нельзя.

Три вопроса, на которые он отвечает

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

Первый вопрос: что здесь? Ответ даёт заголовок. В нём нужно назвать, что вы продаёте или делаете, обычными словами. «Ремонт квартир под ключ» понятно сразу. «Комплексные решения для вашего бизнеса» — нет: так можно написать про что угодно.

Второй вопрос: это для меня? Ответ лежит в строке под заголовком. Здесь пригодятся город, тип клиентов, цена «от» или срок. Человек должен найти здесь себя.

Третий вопрос: что нажать? Нужна одна главная кнопка с понятной подписью: «Получить расчёт», «Заказать звонок», «Смотреть каталог». «Узнать больше» ничего не обещает.

Так сделана наша главная (на 7 октября 2026 года). Заголовок: «ИИ-агенты для бизнеса: больше продаж с той же рекламы». Под ним строка: «ИИ-продавец за секунды отвечает каждому, кто написал, и доводит до заявки. Днём и ночью.» Дальше кнопка «Записаться на демо» и строка с ценой: «Разбор бесплатно · ИИ-продавец от 250 000 ₽». Хороша ли она, покажут заявки: экран новый, результата пока нет.

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

Откройте свой сайт на компьютере и на телефоне.

Что главное на экране у разных сайтов

Три вопроса одинаковы для всех, ответы разные.

У строк про рекламу и ролик общее правило: слова совпадают с тем, что человек видел до сайта. Объявление обещает услугу, а экран встречает фразой «Мы — надёжный партнёр»? Человек решит, что попал не туда.

Чего на экране быть не должно

Громкий слоган вместо ответа: «Создаём будущее» не говорит, что вы продаёте. Несколько кнопок одинакового размера: человек не понимает, с какой начать, и не нажимает ни одну.

Длинное меню на пол-экрана и тяжёлая картинка, которая грузится долго (об этом ниже). Про меню и шапку есть отдельная статья про шапку сайта.

Первый экран и скорость

Красивый экран бесполезен, если он появляется через несколько секунд. По справке Google (web.dev, обновлена 4 сентября 2025 года) результат считается хорошим, когда главная картинка или заголовок появляется за 2,5 секунды или быстрее. Название показателя и подробности — в конце статьи, в блоке для технических специалистов.

Типичная ошибка — откладывать загрузку главной картинки. Разработчики Google пишут прямо: главную картинку откладывать нельзя, это замедляет экран (web.dev, 31 марта 2025). Проверить сайт можно бесплатно в Google PageSpeed Insights.

Как проверить по данным

Первая цифра — отказы в Яндекс Метрике. Метрика — бесплатный счётчик посещений. В статье базы знаний Яндекс Директа от 22 апреля 2026 года сказано: отказом считается визит, где выполнены сразу три условия. Просмотрена не больше одной страницы. Визит короче 15 секунд (так по умолчанию). И нет служебной отметки «неотказ» (её счётчик ставит сам, если человек пробыл на странице заданное время). Высокий отказ на странице — повод посмотреть внимательнее, а не приговор. Человек мог сразу позвонить. Смотрите отказы рядом с заявками и звонками.

Вторая — записи визитов. Вебвизор в Метрике записывает, как человек двигает мышь и листает страницу, будто видео. Если люди тянутся к картинке и мимо кнопки, кнопку стоит менять.

Третья — тест на пяти-семи незнакомых людях. Наше правило, не исследование: если трое из пяти отвечают на три вопроса неверно, виноват экран.

Меняйте что-то одно и сравнивайте неделю до и неделю после. Поменяете всё сразу — не поймёте, что сработало.

Как это у нас

Скажем сразу: замеров «до и после» именно по первому экрану у нас нет, процентов здесь не будет. Есть три примера.

Первый пример — сайт «Сайн Клик», поставщика оборудования для рекламы и полиграфии. Осенью 2021 года мы с нуля нарисовали ему новый дизайн. Раньше меню каталога слева состояло из 12 разделов, на новой главной стало 4 крупных. Это правка каталога на главной, не всего первого экрана. В шапке появилась кнопка «Получить КП» (КП — коммерческое предложение, расчёт с ценами для компании). Кнопка «Заказать звонок» была и до редизайна.

Люди из поиска стали смотреть больше страниц за визит: на компьютере было 2, стало 3, на телефоне было 1,6, стало 2 (январь-сентябрь 2021 и ноябрь 2021 — апрель 2022 года, Метрика сайта). Менялось всё сразу, поэтому сказать, сколько дал именно первый экран, нельзя. Есть и оговорка из кейса «Сайн Клик»: доля просмотров адресов с параметрами (листание, сортировка, фильтры) выросла с 6% до 10%, а без них рост глубины составил около 35%.

Второй пример — сайт одной печи для бани, который мы сделали за сутки к выходу ролика у блогера. Человек смотрит ролик и переходит на сайт. Сверху три режима печи, о которых говорят в роликах: человек сразу узнаёт то, что видел. По Метрике от блогера пришли 2 880 визитов, в среднем по 74 секунды, сразу ушли 11,8%. Цифры не доказывают, что экран сработал: люди пришли уже заинтересованными. Вывод мы записали в кейс про сайт для печи: страница должна быть про тот же товар, что в ролике.

Третий пример — страницы нашей же услуги. Откройте «Продающий сайт»: под заголовком одна строка про боль клиента («Сайт есть, реклама идёт, а заявок нет»), три пункта и кнопка «Заказать услугу». На странице услуги ИИ-продавца строка под заголовком про выгоду: «Больше продаж с той же рекламы: отвечает за секунды каждому, кто написал, и доводит до заявки». Строку про год основания и число проектов с первого экрана ИИ-продавца мы убрали: покупателю важнее его проблема. Какой эффект дали эти правки, пока сказать не можем: отдельного замера по заявкам нет.

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

Многое решается текстом. Заголовок, строка под ним, подпись кнопки и строка с ценой правятся за вечер без дизайнера. С них и начинайте.

Дизайнер нужен, когда сам экран устроен неудачно: кнопка не помещается на телефоне, меню занимает пол-экрана или у сайта нет понятной структуры.

Сколько стоит дизайн, мы называем сразу: дизайн сайта у нас от 150 000 ₽, срок 3-4 недели. В цену входят структура, прототипы и макеты, вёрстка и запуск считаются отдельно (цены со страницы услуги на 7 октября 2026 года).

Дизайн сайтаСтруктура, прототипы и макеты, 3-4 недели

Продающий сайтЛендинг, корпоративный сайт или магазин: формат и цены

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

Когда это не нужно

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

Ещё случай: экран прошёл все проверки, а заявок нет. Тогда дело, скорее всего, в рекламе, цене или скорости ответа клиенту. Редизайн не поможет.

Для технических специалистов

Ссылки проверены 7 октября 2026 года.

• Показатель называется LCP (Largest Contentful Paint, время появления самого крупного элемента на экране). Хорошим считается 2,5 секунды и меньше на 75-м процентиле загрузок, отдельно для мобильных и компьютеров (web.dev, обновлено 04.09.2025). Элементом LCP на первом экране обычно становится главная картинка или заголовок.
• Картинку LCP не отдают в ленивую загрузку, ей ставят fetchpriority="high". Подробнее — в документации (web.dev, обновлено 31.03.2025).
• Наша практика: заголовок первого экрана совпадает с H1 и держит запрос, по которому страницу ищут, боль идёт подзаголовком. Смотрим экран на ширине 390 и 1440 пикселей.

Читайте также

• Одностраничные сайты: когда подходят, из чего состоят и где подводят
• Шапка сайта: что в ней должно быть и частые ошибки
• Кейс: сайт «Сайн Клик» после редизайна