Above the Fold (укр. «над згином», «перший екран») — це та частина сторінки, яку користувач бачить одразу після завантаження, без прокручування. Саме тут формується перше враження і рішення «залишитися чи піти», тому в цю зону виносять найважливіше: заголовок, головну вигоду й заклик до дії.
Простими словами: це вітрина. Термін прийшов зі світу газет — «над згином» друкували найгучніший заголовок, щоб газету купили ще до того, як її розгорнуть. У вебі логіка та сама.
Що таке Above the Fold і навіщо він потрібен
Перший екран вирішує, чи взагалі користувач продовжить читати. За кілька секунд людина сканує видиму зону й вирішує, чи є тут те, що вона шукала. Якщо на першому екрані — незрозумілий банер без сенсу, відвідувач іде, і ви отримуєте відмову (bounce). Тому Above the Fold — це не «краса», а місце, де вирішується доля конверсії.
Важливо: єдиної «лінії згину» не існує. Above the Fold різний на десктопі, планшеті й смартфоні, бо в усіх різна висота екрана. Тому перший екран проєктують з огляду насамперед на мобільні, де він найкоротший.
Що зазвичай розміщують над згином
- Чіткий заголовок — що це за сторінка і яка головна вигода.
- Підзаголовок — коротке пояснення або конкретика.
- Головний CTA — кнопка цільової дії.
- Візуал — фото товару чи ключовий образ.
- Іноді — тригери довіри: рейтинг, гарантія, короткий соціальний доказ.
Above the Fold і Core Web Vitals (CLS)
Перший екран напряму пов’язаний з технічними метриками швидкості. Найважливіший контент над згином має завантажуватися першим — це покращує LCP (найбільше відображення). А ще саме тут найчастіше «скаче» верстка: коли підвантажується банер чи шрифт, елементи стрибають — і зростає CLS (сукупний зсув макета), одна з метрик Core Web Vitals. Тому під зображення й банери на першому екрані завжди резервують місце заздалегідь.
Приклад
На посадковій сторінці послуги в зоні Above the Fold — заголовок з вигодою, підзаголовок, кнопка «Отримати прорахунок» і фото результату. Усе, що потрібно для першого кроку, видно без жодного скролу. Прайс, відгуки й FAQ ідуть нижче — коли користувач уже зацікавився й гортає далі.
Часто плутають з…
- Below the Fold — усе, що нижче й видно лише після прокручування. Це не «менш важливе», просто інша роль у сценарії.
- Hero-секція — це конкретний великий блок угорі сторінки; він зазвичай і є основою першого екрана, але Above the Fold — ширше поняття (уся видима зона, а не один блок).
Питання та відповіді
Above the Fold досі важливий для SEO?
Так, побічно. Прямого фактора «перший екран» немає, але через нього формуються поведінкові сигнали (відмови, час на сторінці) і метрики Page Experience, зокрема CLS та LCP, які Google враховує.
Де саме проходить лінія згину?
Фіксованої лінії немає — вона залежить від пристрою й розміру екрана. Орієнтуйтеся насамперед на мобільні, де видима зона найменша, і перевіряйте на реальних роздільностях.
Чи треба «запихати» все важливе на перший екран?
Ні. Головне рішення й один чіткий CTA — так. Але перевантажений екран лякає. Решту контенту розкривають нижче, зберігаючи чисту й зрозумілу першу зону.
Не впевнені, що перший екран продає? Перевіримо його на реальних сценаріях у межах UX/UI-аудиту юзабіліті та зберемо ефективний лендинг.
Схожі терміни: CLS, CTA, Landing Page, Bounce Rate, A/B Testing.
