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

Первый экран — единственная часть сайта, которую видят все посетители без исключения. Дальше доходит меньшинство. Поэтому цена ошибки здесь выше, чем на любой другой странице: неудачный первый экран обнуляет весь остальной сайт, каким бы хорошим он ни был.
Формула, которая работает
Четыре элемента, и порядок важен.
1. Что вы делаете и для кого
Заголовок должен отвечать на вопрос «куда я попал» за пару секунд.
Не работает: «Мы создаём будущее», «Инновационные решения для вашего бизнеса», «Мы больше чем студия».
Работает: «Разработка сайтов под ключ на Next.js», «Ремонт квартир под ключ в Челябинске», «Бухгалтерское сопровождение для ИП и ООО».
Скучно? Да. Понятно? Да. Второе важнее.
2. Конкретика, которая отличает
Подзаголовок или строка с цифрами: цена «от», срок, объём, гарантия. Именно здесь вы отличаетесь от конкурентов, у которых написано «качественно и в срок».
«От 30 000 ₽, запуск за 5 рабочих дней» говорит о вас больше, чем абзац про миссию.
Почему конкретика вообще решает — разбирали в статье как повысить конверсию сайта: она снимает главный вопрос ещё до того, как человек его задал.
3. Целевое действие
Одна основная кнопка. Текст кнопки описывает результат для посетителя, а не усилие: «Получить смету», «Рассчитать стоимость», «Записаться» — вместо «Отправить» или «Подробнее».
Второе действие допустимо, но визуально слабее: посмотреть работы, скачать прайс.
4. Способ связи
Телефон и мессенджер видимы сразу, на мобильном — нажимаются в один тап. Часть аудитории не будет заполнять форму принципиально, и терять её из-за того, что телефон спрятан в подвале, обидно.
Что убрать
Слайдер с автопереключением. Устойчивый источник потерь: человек не успевает прочитать, теряет контроль, а до второго слайда доходят единицы. Если у вас три сообщения — выберите главное, остальные разместите ниже.
Абстрактные фразы. «Комплексный подход», «индивидуальные решения», «команда профессионалов». Это пишут все, значит это не говорит ничего.
Стоковые фотографии. Люди в костюмах, жмущие руки на фоне небоскрёба. Аудитория узнаёт их мгновенно и считывает как сигнал, что показать нечего.
Всплывающее окно через три секунды. Оно повышает подписки и портит всё остальное, включая поведенческие показатели.
Тяжёлое фоновое видео. Красиво на презентации, но грузится секундами и портит метрики скорости — а это прямая потеря посетителей, о чём подробно в статье Core Web Vitals.
Особенности мобильной версии
На телефоне первый экран — это меньше половины того, что помещается на десктопе. Значит, приоритеты жёстче.
Что должно поместиться: заголовок, одна строка конкретики, кнопка, доступ к телефону. Всё.
Что часто ломается: заголовок в четыре строки съедает экран целиком, кнопка уезжает ниже сгиба, крупная картинка занимает верх, а текст оказывается вне видимости.
Проверять это нужно на реальном телефоне, а не в браузере на компьютере — методика в статье адаптивная вёрстка.
Разные экраны для разных страниц
Частая ошибка — считать, что первый экран есть только у главной.
Главная — кто вы, чем занимаетесь, куда идти дальше.
Страница услуги — что это за услуга, сколько стоит, за какой срок. Именно сюда чаще всего приходят из поиска, и именно этот экран решает больше всего.
Лендинг под рекламу — точное совпадение с запросом, по которому пришёл человек. Если он искал «ремонт кофемашин Jura», в заголовке должно быть про Jura. Механика такой подмены — в статье что такое мультилендинг.
Проверка за три секунды
Самый практичный тест, для которого не нужны инструменты.
Покажите первый экран человеку со стороны на три секунды, закройте и спросите: чем занимается компания, что вам предлагают, что нужно сделать дальше.
Три ответа из трёх — экран работает. Два — нужна доработка. Меньше — переделывать.
Дополнительно посмотрите карту скроллинга в аналитике: она покажет, какая доля посетителей вообще уходит ниже первого экрана. Если больше половины не прокручивает — проблема здесь.
Итог
Четыре элемента: что и для кого, конкретика с цифрами, одно целевое действие, доступный контакт. Убрать: слайдер, абстракции, стоковые фотографии, тяжёлое видео.
И главное — проверять на людях, а не на себе. Владелец бизнеса видит свой первый экран сотый раз и не может оценить его глазами человека, который попал сюда впервые и через три секунды решает, оставаться или нет.
Частые вопросы
Что обязательно должно быть на первом экране?+
Четыре вещи: чем вы занимаетесь и для кого, чем отличаетесь или какая конкретика (цена, срок), целевое действие и способ связи. Всё остальное — украшение, которое не должно мешать этим четырём.
Нужен ли слайдер на первом экране?+
Практически никогда. Посетитель не успевает прочитать первый слайд, теряет контроль над происходящим и почти никогда не кликает по второму и последующим. Один сильный экран работает лучше пяти сменяющихся.
Как проверить, работает ли первый экран?+
Покажите его человеку, не знакомому с вашим бизнесом, на три секунды и спросите, чем занимается компания и что ему предлагают. Если не ответил — экран не работает, независимо от того, насколько красиво он выглядит.
Стоит ли ставить видео на первый экран?+
Осторожно: тяжёлое видео замедляет загрузку и портит метрики скорости, а на мобильном интернете просто не успевает прогрузиться. Если очень нужно — короткий сжатый ролик с картинкой-заглушкой, без автозапуска со звуком.
Читайте также
- Анимации на сайте: где помогают, а где мешаютКакие анимации улучшают восприятие, какие раздражают и тормозят загрузку, сколько это стоит и как понять, что эффектов стало слишком много.3 мин
- Доступность сайта: базовые требования и зачем это бизнесуЧто такое доступность простыми словами, какие требования закрывают большинство случаев, сколько это стоит при разработке и почему это выгодно даже без учёта социальной стороны.4 мин
- Mobile-first: почему дизайн начинается с телефонаЧто означает проектирование от мобильной версии, чем оно отличается от адаптации десктопа, какие решения меняет на практике и когда подход не нужен.3 мин
- Шрифты для сайта: как выбрать и не сломать скоростьКак подобрать шрифт, который читается, сколько начертаний реально нужно, чем платные шрифты отличаются от бесплатных и как подключить их без ущерба для загрузки.4 мин