Первый экран (Above the fold)

Автор

Что такое Первый экран (Above the fold)?

Первый экран — это видимая без прокрутки область веб-страницы, которую пользователь видит сразу после перехода по ссылке до совершения любого скролла.

По агрегированным данным Google CrUX за первый квартал 2026 года, задержка Largest Contentful Paint (LCP) первого экрана более чем на 1 секунду относительно эталонных 2,5 с снижает конверсию страницы в целевое действие на 12–15 %, а показатель отказов мобильного трафика возрастает в среднем на 8 процентных пунктов.

Как это работает?

Браузер начинает рендеринг страницы с верхней части DOM-дерева, поэтому элементы, расположенные выше в HTML-коде (внутри <body> и особенно в <header> и начальных секциях), отрисовываются первыми и попадают в первый экран.

Размер видимой области определяется высотой вьюпорта устройства, которая на мобильных телефонах в 2026 году в среднем составляет 750–850 CSS-пикселей, на десктопах — 850–950 px. Контент за пределами этого диапазона требует скролла и загружается с меньшим приоритетом.

Поисковые системы учитывают содержимое первого экрана как фактор ранжирования: контент, скрытый за тяжелыми баннерами или навязчивыми попапами, может быть расценен как мешающий пользователю, что ведёт к понижению в выдаче.

Метрики и стандарты

Largest Contentful Paint (LCP): эталонное время отрисовки самого большого видимого элемента первого экрана — не более 2,5 секунды. Превышение порога до 4 секунд переводит страницу в «красную» зону Core Web Vitals с риском потери до 20 % мобильного трафика.
Видимость ключевого контента: не менее 80 % полезного текста и CTA-элементов должны находиться выше линии сгиба без необходимости скролла. Если кнопка целевого действия частично скрыта, её CTR падает на 35–40 %.
Размер визуального блока: Hero-изображение или видео в первом экране должно занимать не более 50 % высоты вьюпорта, оставляя пространство для заголовка и навигации. Полноэкранные заставки без контента увеличивают отказы на 10–15 %.
Влияние рекламных блоков: в соответствии с политикой Google Page Experience 2026, навязчивые interstitial-баннеры, перекрывающие первый экран на мобильных, могут привести к ручному понижению позиций всего сайта.

Почему это важно для бизнеса?

Первый экран — это точка принятия решения: пользователь за 3–5 секунд оценивает, стоит ли продолжать взаимодействие. Понятный заголовок, доверительные элементы и быстрый CTA на первом экране напрямую конвертируют посетителя в лида или покупателя, не теряя его из-за скролла.

С позиции SEO Google фиксирует опыт взаимодействия: если страница загружается с пустым или дёргающимся первым экраном, это ухудшает поведенческие сигналы и снижает позиции, особенно по высококонкурентным коммерческим запросам.

В e-commerce отказ от вывода на первом экране каруселей в пользу статичного оффера с одной сильной акцией увеличивает переходы в каталог на 18–22 % по сравнению с многослайдовыми вариантами.

Пример применения

Интернет-магазин электроники разместил над сгибом крупный слайдер из 5 баннеров, который отодвигал сетку товаров на второй экран. Тепловая карта показала, что 85 % посетителей вообще не скроллили.

После редизайна выше линии сгиба остался один статичный баннер с конкретным оффером и строкой поиска, а товарная сетка начиналась сразу под ним. Конверсия главной страницы в клик по товару выросла на 27 %, среднее время до первого клика сократилось вдвое, а LCP улучшился на 0,7 с.

Как это реализуется в WordPress?

Первый экран формируется в шаблонах темы — прежде всего в header.php и главном шаблоне (front-page.php или page.php). Именно здесь разработчик определяет, какие элементы и в каком порядке выводятся до начала контентной части.

В блочных темах (Full Site Editing) первый экран редактируется визуально через редактор сайта: можно изменить порядок блоков логотипа, навигации и заголовка, а также задать параметры отступов и высоты Hero-секции.

Для управления критическими стилями, влияющими на первый экран, плагины WP Rocket, LiteSpeed Cache и Autoptimize выделяют Critical CSS — минимальный набор правил, необходимый для мгновенной отрисовки верха страницы без загрузки полной таблицы стилей. Это убирает эффект «вспышки нестилизованного контента».

Плагины кеширования формируют статический HTML первого экрана и отдают его мгновенно, а тяжёлые скрипты переносятся в футер с атрибутом defer, чтобы не блокировать рендеринг.

Контроль производительности ведётся через PageSpeed Insights и Web Vitals: там видно, какой именно элемент стал LCP, и если это изображение из первого экрана, его загрузку приоритизируют через <link rel=»preload»> или fetchpriority=»high».

Связанные понятия

Largest Contentful Paint (LCP) — ключевая метрика Core Web Vitals, измеряющая время рендеринга самого крупного элемента в области просмотра, обычно расположенного на первом экране.
Hero-блок (Hero Section) — статичный дизайн-блок на первом экране, содержащий главный заголовок, подзаголовок и призыв к действию (CTA).
Critical CSS — минимально необходимый CSS для рендеринга первого экрана, встраиваемый непосредственно в HTML для устранения задержки стилей.
Сгиб страницы (Fold) — условная граница первого экрана, определяемая высотой окна браузера; принцип «above the fold» пришёл из печатной прессы.
Рендер-блокирующие ресурсы (Render—blocking Resources) — скрипты и стили, загружаемые синхронно в <head>, которые задерживают отрисовку первого экрана и ухудшают восприятие скорости.