Хедер (Header)

Автор

Что такое Хедер (Header) в WordPress?

Хедер (Header) — это верхняя сквозная область каждой страницы сайта, формируемая темой WordPress через шаблон header.php и хуки, которая содержит брендинг, основное меню навигации и критические элементы первого экрана.

По данным HTTP Archive на январь 2026, медианный вес DOM-дерева хедера десктопных сайтов на WordPress составляет 124 КБ несжатого HTML; сокращение этого показателя до 60 КБ за счёт удаления неиспользуемых скриптов и встроенных стилей коррелирует с улучшением Largest Contentful Paint на 250–400 мс.

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

При обработке любого запроса WordPress последовательно собирает страницу, начиная с вызова get_header(). Эта функция загружает файл темы header.php, который выводит открывающие теги <!DOCTYPE html>, <head> и начало <body>.

Внутри <head> через хук wp_head() тема и плагины вставляют мета-теги, стили, скрипты, JSON-LD микроразметку и RSS-ссылки. Видимую часть хедера — логотип, меню, кнопки — формирует непосредственно код header.php, часто с использованием wp_nav_menu() и кастомайзера.

Если тема поддерживает редактор сайта (FSE), хедер собирается как шаблонная часть из блоков, а вызов get_header() заменяется на wp_header блок в шаблоне страницы.

Хедер может быть динамически изменён через условные теги: например, для главной страницы выводится один вариант шапки, для внутренних — другой.

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

Время блокировки рендеринга: скрипты и стили, подключённые в хедере без атрибутов async/defer, задерживают отрисовку на 180–350 мс. Стандарт 2026 года — не более двух синхронных запросов из <head>, остальное отложено или встроено критическими инлайнами.
Видимая высота хедера на мобильных: закреплённый (sticky) хедер не должен занимать более 15 % высоты экрана, иначе Google Search Console помечает сайт как создающий помехи для контента, что снижает мобильное ранжирование.
Влияние на отказы: изменение дизайна хедера (цвет, размер шрифта, расположение поиска) может изменить показатель отказов на 7–12 % в первые две недели после внедрения, пока постоянная аудитория адаптируется.
Скорость отклика навигации: клик по пункту меню в хедере должен вызывать начало навигации не позднее чем через 150 мс с момента тапа; задержки выше этого порога воспринимаются как «тормозной» интерфейс.

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

Хедер — первое визуальное впечатление и навигационный центр. Размещение в нём телефона, поиска и корзины напрямую сокращает путь к конверсии: посетитель не ищет контакты в подвале, а находит их мгновенно.

С точки зрения SEO, корректно заполненный <head> с уникальными мета-тегами, каноническими ссылками и структурированными данными, выводимыми через wp_head, определяет внешний вид сниппета в выдаче, влияя на CTR.

Непродуманный хедер с устаревшими скриптами замедляет загрузку всей страницы, что ухудшает Core Web Vitals и напрямую снижает позиции, сокращая платный и органический трафик.

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

Интернет-магазин бытовой техники провёл аудит хедера: в <head> обнаружено 14 запросов к шрифтам, иконкам и устаревшим скриптам плагинов.

Разработчики объединили CSS в один файл, перенесли некритичные скрипты в футер с атрибутом defer, а логотип заменили с тяжёлого PNG на встроенный SVG. Хедер стал загружаться на 0,8 секунды быстрее, показатель LCP улучшился на 0,5 секунды.

Дополнительно в хедер добавили иконку корзины с динамическим счётчиком товаров и кнопку «Заказать звонок». За месяц конверсия с кнопки составила 3,1 %, а глубина просмотра выросла на 12 %.

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

Основной способ — редактирование файла header.php активной темы (дочерней, если изменения должны пережить обновления). В этом файле вызываются wp_head(), wp_nav_menu(), выводятся произвольные HTML-блоки и подключаются внешние ресурсы.

В темах с полным редактированием сайта (FSE) хедер изменяется визуально через редактор блоков, как часть шаблона, без правки PHP.

Расширение функционала без правки кода достигается хуками: wp_head для вставки аналитики, мета-тегов или скриптов; плагин Insert Headers and Footers позволяет добавлять код в <head> и сразу после <body> без изменения шаблона.

Для создания липкого хедера (sticky) используют плагины типа Sticky Menu (or Anything!)on Scroll или добавляют несколько строк CSS/JS через кастомайзер.

Производительность обеспечивается исключением из хедера всего, что не нужно для первого экрана: отложенная загрузка некритичных CSS через preload, асинхронная загрузка JavaScript и кеширование сгенерированного HTML хедера на серверном уровне (LiteSpeed Cache).

Инструменты контроля: Google PageSpeed Insights и WebPageTest показывают блокирующие ресурсы из хедера и их влияние на LCP.

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

Футер (Footer) — нижняя сквозная область страницы, симметричная хедеру, содержащая вторичную навигацию, копирайт и дополнительные ссылки.
wp_head() — основной хук WordPress, вызываемый в <head> для подключения скриптов, стилей и мета-данных плагинами и ядром.
Навигационное меню — структура ссылок, выводимая в хедере через wp_nav_menu() и управляемая в разделе «Внешний вид → Меню».
Кастомайзер (Customizer) — интерфейс настройки темы в реальном времени, через который управляются логотип, иконка сайта и иногда расположение хедера.
КритическийCSS (Critical CSS) — минимальный набор стилей, необходимый для отображения первого экрана (включая хедер), встраиваемый непосредственно в HTML для ускорения рендеринга.