Перший екран сайту: формула, що утримує клієнта в перші секунди

Перший екран сайту — це все, що відвідувач бачить без прокручування, і саме він вирішує, чи залишиться людина на сторінці. Робоча формула складається з шести елементів: заголовок з конкретною пропозицією, підзаголовок з фактами (ціна, строк, географія), 2–4 докази довіри, одна головна кнопка, візуал, що показує результат, і швидке завантаження — до 2,5 секунди на смартфоні. Якщо за 3–5 секунд людина не зрозуміла, що ви пропонуєте, чи це для неї і що робити далі, вона повертається в пошук.

Нижче — розбір кожного елемента, приклади для різних ніш, технічні вимоги, 11 типових помилок і чеклист, за яким можна перевірити власний сайт за 10 хвилин.

Чому перший екран важить більше за решту сторінки

Айтрекінгове дослідження 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 години — безкоштовно і без зобовʼязань.