Как Добавить Прелоадер в WordPress: Пошаговое Руководство

Содержание

Обновлено в мае 2026 года.

TL;DR: Анимация прелоадера заполняет паузу, пока загружаются тяжёлые ресурсы. В 2026 году правильный плагин — WP Smart Preloader или лёгкий пользовательский сниппет — но пропустите его, если ваш сайт уже быстрый, потому что плохо настроенный прелоадер активно вредит LCP.

Стоит ли Вообще Добавлять Прелоадер в 2026 году?

Прежде чем объяснять, как это сделать, дам вам честный ответ: большинство сайтов не должны добавлять прелоадер.

Core Web Vitals Google измеряют Largest Contentful Paint (LCP) — насколько быстро появляется ваш наиболее видимый контент. Прелоадер буквально задерживает эту отрисовку, закрывая экран анимацией. Если прелоадер работает даже 1,5 секунды, это 1,5 секунды гарантированного штрафа LCP при каждой загрузке страницы.

Когда прелоадер имеет смысл:

• Ваш сайт действительно тяжёлый — большие hero-видео, интерактивные карты, анимации на основе canvas — и пустое состояние выглядит сломанным без него.
• У вас есть индикатор загрузки или прогресс-бар, который даёт пользователям реальную обратную связь, а не просто спиннер для эстетики.

Когда лучше обойтись без него:

• У вас типичный блог, портфолио или интернет-магазин на WooCommerce. Ускорьте сайт — используйте ленивую загрузку изображений, CDN, перейдите на более быстрый хостинг.
• Ваш LCP уже ниже 2,5 с. Добавление прелоадера только ухудшит ситуацию.

Если вы всё же хотите продолжить, вот как сделать это правильно в эпоху Gutenberg / Full Site Editing.

Что такое Прелоадер?

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

В старых версиях WordPress (эпоха классического редактора до 5.0) прелоадеры обычно добавлялись путём прямого редактирования header.php. В 2026 году, с Gutenberg и FSE-темами, прямое редактирование файлов темы настоятельно не рекомендуется — обновления темы сотрут ваши изменения. Вместо этого используйте плагин или подход Code Snippets.

Как Добавить Прелоадер в WordPress (Методы 2026 года)

Метод 1 — Плагин WP Smart Preloader

WP Smart Preloader — бесплатный плагин в репозитории WordPress.org, который работает как с классическими темами, так и с блочными темами. Перед установкой убедитесь, что он всё ещё активно поддерживается и совместим с вашей текущей версией WordPress — статус обслуживания плагинов может меняться; проверьте дату «Последнее обновление» на странице репозитория.

1. В панели управления WordPress перейдите в Плагины → Добавить новый и найдите «WP Smart Preloader».
2. Установите и активируйте его.
3. Перейдите в Настройки → WP Smart Preloader.
4. Выберите стиль прелоадера из встроенных вариантов или вставьте собственный HTML/CSS.
5. В разделе «Показывать только на главной странице» — включите это, если хотите анимацию только на главной странице. Запуск прелоадера на каждой странице умножает стоимость LCP на весь сайт.
6. Установите Продолжительность показа загрузчика. По умолчанию 1500 мс. Я рекомендую снизить — максимум 800–1000 мс. Чем дольше он работает, тем хуже ваш показатель LCP.
7. Нажмите Сохранить изменения и проверьте с помощью PageSpeed Insights до и после. Если LCP ухудшится, удалите плагин.

Метод 2 — Пользовательский Код через Плагин Code Snippets

Если вы хотите полный контроль без специального плагина прелоадера, используйте плагин Code Snippets (бесплатный, широко поддерживаемый) для внедрения разметки и стилей без изменения файлов темы.

Шаг 1 — Добавьте HTML-сниппет (PHP)

В Code Snippets создайте новый сниппет с настройкой запуска только на «Внешнем интерфейсе»:

function ar_add_preloader() {
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

Примечание: wp_body_open срабатывает только на темах, которые вызывают wp_body_open() в своём шаблоне. Большинство современных блочных тем и поддерживаемых классических тем делают это. Если ваш прелоадер не появляется, проверьте, поддерживает ли ваша тема этот хук.

Шаг 2 — Добавьте CSS

Создайте второй сниппет с настройкой «Только внешний интерфейс → CSS»:

#ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ar-preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.ar-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

Шаг 3 — Добавьте JavaScript для скрытия

Создайте третий сниппет с настройкой «Только внешний интерфейс → JavaScript»:

(function () {
    var el = document.getElementById('ar-preloader');
    if (!el) return;
    window.addEventListener('load', function () {
        el.classList.add('hidden');
        setTimeout(function () { el.remove(); }, 350);
    });
})();

Это удаляет прелоадер по событию window.load — после загрузки изображений и субфреймов — а не по DOMContentLoaded, которое срабатывает слишком рано.

Метод 3 — Блочная Тема / FSE: Используйте блок Loading Overlay или плагин

Если вы используете тему Full Site Editing (Twenty Twenty-Four, Kadence, GeneratePress в режиме блоков и т. д.), некоторые плагины конструктора страниц (Elementor, Kadence Blocks, Spectra) имеют встроенные параметры прелоадера или экрана загрузки в своих настройках. Сначала проверьте документацию вашей темы или конструктора — дублирование прелоадера отдельным плагином поверх встроенного вызовет двойное наложение.

Контрольный Список Производительности Перед Запуском

Прежде чем запустить прелоадер, проверьте всё следующее:

1. Запустите тест PageSpeed Insights на странице без прелоадера. Запомните ваш LCP.
2. Включите прелоадер и запустите тот же тест. Если LCP ухудшится более чем на ~100 мс, пересмотрите решение.
3. Держите продолжительность прелоадера на уровне 1000 мс или менее. Всё что дольше — это риск для UX и рейтинга.
4. Тестируйте на мобильном соединении с ограниченным 4G (Chrome DevTools → Сеть → Fast 4G). Прелоадеры кажутся намного длиннее на медленных соединениях.
5. Убедитесь, что прелоадер скрыт от программ чтения с экрана (aria-hidden="true") и не удерживает фокус клавиатуры.

FAQ по Прелоадерам WordPress — 2026

Вредит ли прелоадер SEO?

Да, может. Core Web Vitals Google — в частности LCP — являются подтверждённым сигналом ранжирования. Прелоадер, стоящий перед вашим контентом, задерживает LCP. Для большинства стандартных сайтов WordPress я бы пропустил его полностью и вложил время в оптимизацию изображений и кэширование. Если ваш сайт достаточно тяжёлый, чтобы он действительно был нужен, держите продолжительность короткой и следите за CWV в Google Search Console.

Работают ли плагины прелоадеров с темами Full Site Editing (Gutenberg)?

Большинство да, при условии что тема вызывает wp_body_open(). Сам блочный редактор WordPress не меняет то, как события загрузки страницы работают в браузере. Проверьте версию «Протестировано до» плагина в репозитории WordPress.org для подтверждения совместимости с вашей установленной версией WordPress — проверяйте это при установке, так как статус совместимости меняется.

Могу ли я добавить прелоадер без плагина в 2026 году?

Да — метод Code Snippets выше является наиболее чистым подходом без плагинов. Он переживает обновления тем, его легко отключить и он даёт вам полный контроль над разметкой и временем. Избегайте прямого редактирования header.php в вашей активной теме или дочерней теме; это добавляет технический долг и ломается при смене темы.

Мой прелоадер показывается на каждой странице. Как ограничить его только главной страницей?

В WP Smart Preloader установите флажок «Показывать только на главной странице» в настройках. Для подхода с пользовательским кодом оберните вызов add_action условием:

function ar_add_preloader() {
    if ( ! is_front_page() ) return;
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

Связанные материалы:

• Как ускорить ваш сайт WordPress
• Лучшие плагины WordPress
• WordPress.com vs. WordPress.org

Это руководство является частью alejandrorioja.com — написано Alejandro Rioja, который сейчас создаёт системы ИИ-агентов для основателей. Включая агента, который поддерживает этот сайт актуальным. Как это работает →

Обновлено в мае 2026 года

Краткая заметка от мая 2026 года: рабочий процесс, описанный в этой статье, был проверен на соответствие текущему состоянию базовых инструментов и платформ. Там, где конкретные инструменты, интерфейсы или функции изменились, структурный совет по-прежнему применим — в 2026 году реализация будет выглядеть немного иначе. Если вы столкнётесь с шагом, который не соответствует тому, что вы видите на экране, это, скорее всего, обновление интерфейса, а не фундаментальное изменение подхода. Оставьте сообщение через форму обратной связи и я обновлю его явно.