Above the fold

Above the fold — видимая область веб-страницы, которую пользователь видит сразу после загрузки, без какой-либо прокрутки. Это первый экран сайта, который формирует начальное впечатление и определяет, останется ли посетитель или уйдет к конкурентам.

Что такое above the fold

Зона above the fold охватывает все элементы, попадающие в поле зрения пользователя без единого движения колесика мыши или касания экрана. Ее размер не фиксирован и зависит от разрешения монитора, настроек браузера и типа устройства. На десктопе с разрешением 1920×1080 видимая высота составляет около 700-900 пикселей, на мобильном iPhone 14 — около 740 пикселей CSS. Именно поэтому не существует универсального значения «высоты above the fold»: специалисты ориентируются на диапазон 600-800 пикселей для десктопа и 500-700 пикселей для мобильных. Nielsen Norman Group фиксирует: пользователи проводят в зоне above the fold от 57% до 80% всего времени на странице — факт, который определяет приоритеты при проектировании.

Термин пришел из газетной индустрии: крупные издания размещали главные заголовки на верхней половине первой полосы — именно той части, что видна покупателю на прилавке выше физического сгиба. В digital-маркетинг понятие перешло в конце 1990-х, когда мониторы с разрешением 640×480 ограничивали видимую область до минимума, и первые интернет-магазины жестко конкурировали за каждый пиксель первого экрана. С приходом адаптивного дизайна «линия сгиба» стала условной — она разная для каждого устройства и пользователя. Google в алгоритме Page Layout (2012) начал учитывать зону above the fold напрямую, применяя санкции к сайтам, где первый экран перегружен рекламой в ущерб контенту. Это закрепило понятие как SEO-фактор, а не только UX-принцип. Сегодня исторический контекст помогает понять, почему «важное — вперед» работает на всех уровнях продвижения.

В современном digital-маркетинге above the fold — точка пересечения SEO, UX и конверсионной оптимизации. Яндекс и Google анализируют полезность первого экрана: обилие рекламы или нерелевантные баннеры в зоне above the fold снижают поведенческие метрики и могут ухудшать позиции. В UX этот экран — главный инструмент онбординга: здесь пользователь за 3-5 секунд решает, стоит ли углубляться в страницу. В landing page маркетинге концепция above the fold материализовалась в четкий фреймворк: оффер, ключевая выгода, социальное доказательство и CTA должны умещаться на первом экране. A/B-тесты на крупных платформах показывают, что перемещение CTA в зону above the fold в среднем увеличивает CTR на 40-80% по сравнению с расположением ниже сгиба.

Маркетолог, который не управляет зоной above the fold осознанно, теряет деньги на самом дорогом этапе воронки — при первом контакте. Данные Chartbeat показывают: если пользователь не взаимодействует с первым экраном в первые 15 секунд, вероятность прокрутки и конверсии резко падает. Тепловые карты Hotjar и Microsoft Clarity стабильно фиксируют наибольшую плотность кликов в верхней части страницы, причем каждые 100 пикселей вниз снижают концентрацию взаимодействий на 15-25%. Для SaaS-продуктов, e-commerce, лендингов и блога оптимальный состав первого экрана принципиально разный — нет универсального шаблона. Оптимизация above the fold — итеративный процесс с постоянным тестированием, а не разовая настройка. Именно поэтому крупные сервисы проводят десятки A/B-тестов в месяц, начиная всегда с первого экрана.

Как работает above the fold

1. Рендер viewport браузером. Когда браузер загружает страницу, он рендерит именно ту область, которая помещается в текущий размер окна — это и есть above the fold. Размер viewport определяется физическим разрешением экрана, масштабом браузера и наличием панелей инструментов. Если пользователь открывает сайт на мобильном устройстве в портретной ориентации, viewport будет одним, а при повороте экрана — другим. Именно поэтому при тестировании страниц важно проверять first screen на нескольких разрешениях: минимум 1280px, 1920px для десктопа и 375px, 768px для мобильных.
2. Первичное сканирование взглядом. После загрузки пользователь не читает страницу — он сканирует ее по предсказуемым паттернам. Исследования eye-tracking Nielsen Norman Group показывают два основных паттерна: F-pattern (сканирование горизонтальными полосами сверху вниз) и Spotted pattern (взгляд прыгает к визуально выделяющимся элементам). В первые 2-3 секунды пользователь фиксирует заголовок, крупные изображения и кнопки — именно они должны быть в зоне above the fold. Остальные элементы первого экрана служат контекстом, подтверждающим релевантность страницы.
3. Принятие решения о продолжении. На основе сканирования пользователь за 3-5 секунд отвечает на один вопрос: «Я здесь по адресу?» Если заголовок точно соответствует его запросу или намерению, а визуальный контекст подтверждает это — пользователь продолжает взаимодействие. Если первый экран не дает ответа на этот вопрос или отвечает размыто, 55% посетителей покидают страницу в первые 15 секунд по данным исследований отказов. Это означает, что задача above the fold — не продать продукт, а убедить остаться и узнать больше.
4. Взаимодействие с элементами CTA. Если решение о продолжении принято, следующий шаг — взаимодействие с призывом к действию. CTA-кнопка в зоне above the fold работает по принципу наименьшего сопротивления: пользователь видит кнопку, не тратя усилий на поиск. HubSpot в своих исследованиях фиксирует, что CTA в теле контента (below the fold) генерируют в среднем 6% конверсий, тогда как элементы в зоне first screen — значительно выше, особенно для теплого трафика. Конкретный прирост зависит от оффера, аудитории и типа страницы, но размещение CTA выше сгиба всегда входит в топ первых гипотез для A/B-тестирования.
5. Сигналы поведения и SEO-влияние. Поисковые системы анализируют поведенческие метрики: если пользователи массово возвращаются в выдачу (pogo-sticking), это сигнал низкого качества страницы. Плохой first screen — главная причина высокого показателя отказов и короткого времени на сайте. Яндекс учитывает эти метрики в коммерческом ранжировании, и улучшение above the fold напрямую улучшает эти сигналы — что со временем сказывается на позициях в органике.
6. Итеративная оптимизация через тестирование. Работа с above the fold — это цикл гипотез, тестов и анализа данных, а не разовая настройка. Специалист строит гипотезу, запускает A/B-тест через VWO, Google Optimize или Unbounce, собирает данные на 200-300 конверсиях для статистической значимости и принимает решение. После внедрения победившего варианта цикл начинается заново. Крупные платформы проводят десятки таких тестов в месяц в зоне above the fold — именно здесь каждое изменение дает наибольший рычаг на конверсию.

Виды above the fold

• Десктопный first screen. Видимая область на компьютерах и ноутбуках с шириной экрана от 1024 пикселей. Здесь больше горизонтального пространства, что позволяет строить двухколоночные структуры: текстовый блок с оффером слева и визуальный элемент (фото, видео, иллюстрация) справа. Стандартная рабочая высота для десктопа — 600-900 пикселей в зависимости от аудитории; данные по разрешениям вашей аудитории всегда стоит проверять в Google Analytics или Яндекс.Метрике в разделе «Технологии — Разрешения экрана».
• Мобильный first screen. На смартфонах видимая область узкая и короткая — как правило, 350-430 пикселей по ширине и 600-800 по высоте. Это означает, что для мобильного above the fold нужна отдельная версия приоритизации контента: заголовок, подзаголовок и кнопка CTA должны помещаться вертикально без прокрутки. Если мобильный трафик составляет больше 50% (а для большинства коммерческих сайтов в России это норма), мобильный first screen должен быть в приоритете при оптимизации. Google с 2019 года использует mobile-first indexing, оценивая страницы именно по мобильной версии.
• Above the fold для лендинга. На лендинге первый экран — самый критичный элемент всей страницы, потому что лендинг обычно имеет одну цель и одну аудиторию. Классический состав: главный заголовок с оффером (что именно, для кого, зачем), подзаголовок с ключевой выгодой, социальное доказательство (счетчик клиентов, логотипы партнеров, рейтинг) и кнопка CTA. Отсутствие хотя бы одного из этих элементов в зоне above the fold статистически снижает конверсию — именно поэтому A/B-тесты лендингов чаще всего начинаются с экспериментов над первым экраном.
• Above the fold для карточки товара в e-commerce. На странице товара пользователь ожидает увидеть в зоне first screen: главное фото, название, цену, наличие и кнопку «В корзину». Если цена уходит ниже сгиба, часть пользователей покидает страницу, не узнав её — особенно на мобильных. Исследование Baymard Institute на выборке более 50 крупных e-commerce сайтов показывает, что карточки с ценой и CTA в зоне above the fold конвертируют в среднем на 30-45% лучше.
• Above the fold для статьи блога или SEO-страницы. Здесь задача первого экрана иная: удержать пользователя и мотивировать читать дальше, а не конвертировать немедленно. Ключевые элементы: заголовок H1, лид-абзац с четким обозначением темы и пользы, иногда оглавление, показывающее структуру материала. Отсутствие четкого лида или перегрузка first screen рекламными блоками повышает показатель отказов и негативно влияет на ранжирование статьи.
• Динамический above the fold с персонализацией. На сайтах с персонализацией первый экран меняется для разных сегментов: новым посетителям показывают один оффер, вернувшимся — другой, пользователям из конкретного города — третий. Такой подход используют крупные e-commerce платформы и SaaS-сервисы. Внедрение требует платформы персонализации (Insider, Mindbox) и достаточного трафика для сегментации, но в среднем дает прирост конверсии на 15-25% по данным кейсов этих платформ.

Сравнение

Пример использования

Интернет-магазин детских товаров с трафиком около 25 000 визитов в месяц обратился с проблемой: конверсия в заказ составляла 0.9% при хорошем трафике из поиска. Анализ тепловых карт через Hotjar показал, что 68% пользователей с мобильных устройств не прокручивали страницу ниже первого экрана. Первый экран занимал полноэкранный слайдер из пяти баннеров без конкретного оффера, кнопки покупки и какой-либо информации о категориях. Посетитель видел красивые картинки, не понимал, что именно продает магазин, и уходил. Показатель отказов на главной странице достигал 73%, что также тянуло вниз позиции в органике по брендовым запросам.

Команда убрала слайдер и заменила его статичным блоком: заголовок с оффером «Игрушки и одежда для детей от 0 до 12 лет — доставка за 2 дня», три кнопки быстрого перехода в топ-категории, счетчик «15 000 товаров в наличии» и блок с отзывом покупателя. На десктопе добавили баннер акции правее. Через 40 дней после внедрения конверсия выросла с 0.9% до 2.3%, показатель отказов снизился с 73% до 51%, а глубина просмотра увеличилась с 1.8 до 3.1 страниц за сессию. Выручка за аналогичный период выросла на 156% при том же рекламном бюджете и без роста трафика — исключительно за счет оптимизации зоны above the fold.

Частые вопросы