Above the Fold

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.