Определение
Above the Fold (дословно «над сгибом») — это область страницы, которую пользователь видит без прокрутки, сразу после загрузки. В e-commerce этот термин критичен: именно первый экран решает, останется ли посетитель на сайте или уйдёт к конкуренту.
Изначально термин пришёл из газетного бизнеса: самая важная новость всегда размещалась в верхней половине полосы, чтобы её было видно на витрине киоска. В digital-среде «сгиб» — это граница видимой области браузера или экрана смартфона.
Для DTC-брендов Above the Fold — это зона первого впечатления, где за 3–5 секунд формируется доверие, интерес и желание скроллить дальше.
Аналогия
Представьте витрину магазина на оживлённой улице. Прохожий решает, зайти внутрь или нет, за 2–3 секунды взгляда. Если витрина пустая, тусклая или непонятная — он идёт дальше. Первый экран сайта работает точно так же: это ваша цифровая витрина, и у вас нет второго шанса произвести первое впечатление.
Формула
Видимая высота первого экрана = Высота viewport − Высота браузерного UI − Высота фиксированной шапки
| Устройство | Viewport (px) | Видимая зона Above the Fold (px) |
|---|---|---|
| iPhone 15 (Safari) | 852 | ~620–660 |
| Samsung Galaxy S24 | 780 | ~580–620 |
| Desktop 1920×1080 | 1080 | ~800–900 |
| MacBook Air 13" | 900 | ~700–760 |
Правило большого пальца: проектируйте ключевой контент в пределах 600 px по высоте — это безопасная зона для 80%+ мобильного трафика.
Сравнение: Above the Fold vs Below the Fold
| Критерий | Above the Fold | Below the Fold |
|---|---|---|
| Задача | Захватить внимание, удержать | Убедить, снять возражения |
| Контент | Заголовок, оффер, CTA, УТП, визуал | Детали, отзывы, FAQ, соцдоказательства |
| Время контакта | 3–8 секунд | 30+ секунд |
| Метрика | Bounce Rate, Scroll Rate | Time on Page, CR |
| Ошибка | Перегруженность | Слабая вовлечённость |
Применение в DTC и e-commerce
1. Карточка товара (PDP). На первом экране должны быть: фото товара (крупно), название, цена, кнопка «В корзину», ключевое УТП (например, «Бесплатная доставка от 3 000 ₽»). По данным Baymard Institute, средний CR карточки товара — 2,5–3,5%, и до 40% потерь происходит именно из-за слабого первого экрана.
2. Главная страница. Hero-баннер с оффером, категории, промо-плашка. Исследования Google показывают: если первый экран загружается дольше 3 секунд, вероятность отказа растёт на 32%.
3. Лендинг под платный трафик. Заголовок + подзаголовок + CTA + форма/кнопка. Конверсия таких страниц с правильно выстроенным Above the Fold достигает 8–15% против 2–4% у перегруженных.
4. Мобильная версия. 70–80% трафика российских DTC-брендов — mobile. Здесь Above the Fold сжимается до 600 px, и каждый элемент на счету.
Типичные ошибки
- Слишком большой баннер без оффера. Красивая картинка без ценности = потеря внимания.
- Много текста и мелкий шрифт. Пользователь не читает — он сканирует.
- CTA спрятан ниже сгиба. Кнопка «Купить» должна быть видна сразу.
- Медленная загрузка hero-изображения. LCP > 2,5 сек убивает конверсию.
- Отсутствие УТП. Непонятно, чем вы отличаетесь от 10 конкурентов.
- Фиксированная шапка съедает 100–150 px. Учитывайте это при вёрстке.
- Игнорирование мобильной адаптации. Desktop-макет, сжатый на смартфон, = провал.
Связанные термины
- CTA (Call to Action) — призыв к действию, ключевой элемент первого экрана
- Hero Section — главный визуальный блок Above the Fold
- Bounce Rate — показатель отказов, напрямую зависит от качества первого экрана
- Scroll Depth — глубина прокрутки, метрика вовлечённости
- LCP (Largest Contentful Paint) — скорость загрузки главного элемента
- UTP (УТП) — уникальное торговое предложение
- CR (Conversion Rate) — конверсия, итоговая метрика эффективности
- Viewport — видимая область экрана устройства
Вывод
Above the Fold — это не просто «верх страницы», а точка принятия решения. В российском DTC-сегменте, где стоимость привлечения клиента (CAC) растёт на 20–30% в год, качество первого экрана напрямую влияет на unit-экономику. Проектируйте его как витрину: оффер, визуал, CTA — и ничего лишнего. Всё остальное — ниже сгиба.