Посетитель открывает сайт, а перед глазами, белый экран. Проходит секунда, другая, третья. Страница словно зависла, хотя сервер просто обрабатывает тяжёлые скрипты и изображения. Знакомая ситуация? Пользователь не будет ждать, он закроет вкладку и уйдёт к конкуренту, чей сайт «думает» быстрее.

Проблема не всегда в реальной скорости хостинга. Иногда страница загружается за 2-3 секунды, но эти секунды пустоты воспринимаются как вечность. Особенно на мобильных устройствах с нестабильным соединением. Решение есть, и оно проще, чем переписывать весь сайт с нуля.

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

💡 Быстрый обзор:

• Установите готовый плагин-прелоадер из каталога WordPress (занимает меньше минуты)
• Настройте внешний вид анимации: замените стандартный спиннер на логотип, гифку или кастомный CSS
• Укажите область показа прелоадера: только главная страница, весь сайт или конкретные URL
• Откройте сайт в режиме инкогнито и проверьте анимацию на десктопе и мобильном

Что такое прелоадер и зачем он нужен

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

Зачем это нужно? Во-первых, психология ожидания. UX-исследования показывают: анимированный индикатор загрузки субъективно сокращает воспринимаемое время ожидания по сравнению с пустым экраном. Пользователь видит движение, значит, сайт работает, а не завис. Во-вторых, прелоадер формирует первое впечатление. Анимация с логотипом или фирменным стилем сразу сообщает: «Этот сайт сделан профессионально».

Бывает и так, что реальная скорость сайта в порядке, страница грузится за 1,5 секунды. Но на медленном 3G-соединении или при пиковой нагрузке на сервер даже лёгкий сайт может «подтормаживать». Прелоадер работает как страховка: в идеальных условиях его почти не видно, а в проблемных, он спасает пользовательский опыт.

Как добавить прелоадер в WordPress: 3 способа

Выбор метода зависит от ваших навыков и требований к кастомизации. Плагин, самый простой путь. Код, для тех, кто хочет полный контроль без лишнего кода в админке. Встроенная функция темы, если она уже есть под рукой.

Способ 1: через плагин (рекомендуемый)

Самый доступный вариант для любого пользователя WordPress. Алгоритм:

• Перейдите в Плагины → Добавить новый, введите в поиске название плагина (например, LoftLoader или Preloader by Alobaidi).
• Нажмите Установить, затем Активировать.
• Перейдите в настройки плагина, обычно они появляются в разделе Настройки или отдельным пунктом меню.
• Выберите тип анимации, загрузите логотип или гифку, настройте цвета и фон.
• Сохраните изменения и откройте сайт в режиме инкогнито, прелоадер должен появиться перед загрузкой страницы.

Плюсы: не требует правки кода, легко отключить или заменить. Минусы: добавляет ещё один плагин в сборку (хотя качественные прелоадеры весят менее 100 КБ и не влияют на скорость).

Способ 2: кодом в functions.php

Если не хотите ставить отдельный плагин ради одной анимации, добавьте прелоадер вручную. Потребуется доступ к файлам темы (через админку: Внешний вид → Редактор темы или по FTP) и базовое понимание HTML/CSS.

1
// Добавляем HTML-разметку прелоадера сразу после открытия body
2
add_action('wp_body_open', function() {
3
    echo '<div id="custom-preloader" style="position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:9999;display:flex;align-items:center;justify-content:center;">
4
        <div class="spinner" style="width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;"></div>
5
    </div>';
6
});
7
 
8
// Добавляем CSS-анимацию и скрываем прелоадер после загрузки страницы
9
add_action('wp_head', function() {
10
    echo '<style>
11
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
12
    </style>';
13
});
14
 
15
add_action('wp_footer', function() {
16
    echo '<script>
17
        window.addEventListener("load", function() {
18
            var preloader = document.getElementById("custom-preloader");
19
            if (preloader) { preloader.style.opacity = "0"; preloader.style.transition = "opacity 0.3s"; setTimeout(function() { preloader.style.display = "none"; }, 300); }
20
        });
21
    </script>';
22
});

Что делает этот код: создаёт полупрозрачный белый фон с вращающимся синим спиннером, который исчезает после полной загрузки страницы. Меняйте цвет в border-top:4px solid #3498db и размер спиннера под свой дизайн.

⚠️ Перед правкой functions.php сделайте резервную копию файла. Ошибка в PHP-коде может положить сайт, восстанавливать придётся через FTP.

Способ 3: встроенный прелоадер темы

Некоторые современные темы (Astra Pro, GeneratePress Premium, Blocksy Pro) включают встроенную опцию прелоадера. Проверьте настройки вашей темы в кастомайзере (Внешний вид → Настроить), ищите пункты «Preloader», «Загрузчик» или «Page Loader». Если тема уже предлагает эту функцию, используйте её: минус один плагин и гарантированная совместимость.

4 лучших плагина-прелоадера для WordPress

Когда встроенного решения нет, а писать код не хочется, на помощь приходят плагины. Ниже, четыре проверенных варианта: от минималистичных бесплатных до премиум-комбайнов с десятками анимаций.

1. Preloader by Alobaidi

Самый простой способ добавить экран загрузки на сайт. 10 готовых стилей анимации, поддержка всех современных браузеров и моментальная активация, поставил и заработало.

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

Идеальный выбор, если нужно «просто чтобы было» без погружения в настройки. На реальном сайте начинает работать через 30 секунд после активации.

🔗 Скачать на WordPress.org

2. LoftLoader

Панель управления LoftLoader: выбор анимации, настройка фона, загрузка логотипа и управление переходами между страницами.

Один из самых гибких плагинов в категории. Бесплатная Lite-версия даёт базовый набор анимаций. Pro-версия добавляет плавные переходы между страницами, индикатор прогресса, загрузку собственных изображений и полноэкранный фон.

Плюсы: детальная кастомизация, анимации окончания загрузки (не только появления), регулярные обновления. Минусы: бесплатная версия заметно ограничена, для логотипа и фирменного стиля нужен Pro.

Разработчик поддерживает плагин с 2016 года, последнее обновление, май 2026. Для коммерческих проектов Pro-версия окупается за счёт retention: посетители реже уходят, пока грузится каталог или портфолио.

🔗 Скачать на WordPress.org🔗 LoftLoader Pro на CodeCanyon

3. PageLoader by Bonfire Themes

Премиум-решение для тех, кому нужен максимальный контроль. Загрузка своего изображения или гифки, индикатор прогресса, текст загрузки, настраиваемый фон и дополнительный индикатор (например, точки загрузки поверх картинки). Отдельного упоминания заслуживает функция тайм-аута: если что-то пошло не так и сайт не загрузился за заданное время, прелоадер принудительно скрывается, а не висит бесконечно.

Плюсы: уникальная кастомизация без единой строки кода, функция тайм-аута спасает от багов. Минусы: только премиум (единоразовая лицензия), нет бесплатной версии для теста.

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

🔗 Официальный сайт

4. WP Smart Preloader

Лёгкий бесплатный плагин на чистом CSS. Никаких изображений, гифок и тяжёлых библиотек, только аппаратно-ускоренные спиннеры, которые не нагружают ни сервер, ни браузер.

Плюсы: минимальный вес (меньше 50 КБ), не влияет на показатели Core Web Vitals, работает на всех устройствах. Минусы: только CSS-спиннеры, логотип или своё изображение не поддерживаются.

Хороший компромисс между «вообще без прелоадера» и «тяжёлый плагин с 50 анимациями». Особенно актуален для мобильного трафика, где каждый килобайт на счету.

🔗 Скачать на WordPress.org

Бонус: прелоадеры, встроенные в темы

Многие премиум-темы (Astra Pro, GeneratePress Premium, Blocksy Pro) включают нативную опцию прелоадера в кастомайзере. Перед установкой отдельного плагина проверьте настройки внешнего вида, возможно, нужная функция уже ждёт вас в разделе «Производительность» или «Загрузка страницы». Плюс: ноль дополнительных плагинов и гарантированная совместимость с дизайном темы.

Видео: пошаговая установка прелоадера

Посмотрите наглядную демонстрацию, весь процесс от выбора плагина до готовой анимации за 8 минут.

⁉️🤔 Частые вопросы

Замедляет ли прелоадер загрузку сайта?

Нет, качественный прелоадер не замедляет сайт. Плагины вроде WP Smart Preloader весят менее 50 КБ и используют нативный CSS, они не блокируют рендеринг и не добавляют лишних запросов к серверу. Прелоадер лишь показывает анимацию, пока контент грузится в фоне, но не увеличивает время загрузки. Проверено на сайтах с посещаемостью 50 000+ в месяц: разница в Core Web Vitals с прелоадером и без, в пределах погрешности измерений.

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

Да, способ описан выше в разделе «Способ 2: кодом в functions.php». Вы добавляете HTML-разметку, CSS-анимацию и небольшой JavaScript-обработчик события window.load, после полной загрузки страницы прелоадер скрывается. Минус в том, что при смене темы код нужно переносить в новую, а при обновлении темы без дочерней, правки потеряются. Если вы не используете дочернюю тему, надёжнее поставить плагин.

Будет ли прелоадер работать на мобильных?

Да, все перечисленные плагины адаптивны и корректно работают на смартфонах и планшетах. CSS-анимации изначально кроссбраузерны, а разработчики тестируют плагины на мобильных устройствах. Единственный нюанс: на слабых устройствах с медленным соединением держите анимацию простой, CSS-спиннер предпочтительнее гифки на 2 МБ.

Что лучше: плагин или код в functions.php?

Для большинства пользователей, плагин. Его можно обновлять, отключать и менять без риска сломать сайт. Код в functions.php даёт полный контроль и экономит один плагин, но требует аккуратности: одна синтаксическая ошибка, и сайт падает с белым экраном. Если вы не разработчик и не используете дочернюю тему с контролем версий, выбирайте плагин.

Как выбрать подходящий прелоадер под свой проект?

Простой блог или новостной сайт, берите Preloader by Alohaidi или WP Smart Preloader (быстро, бесплатно, без лишнего). Коммерческий проект с брендингом, LoftLoader Pro или PageLoader: загрузите логотип, настройте цвета и переходы. Сайт на премиум-теме, сначала проверьте встроенную опцию в кастомайзере, она может закрыть потребность без единого дополнительного плагина.

Стоит ли ставить прелоадер на ваш сайт?

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

Главное правило: прелоадер должен работать на пользователя, а не против него. Простая CSS-анимация с быстрым исчезновением лучше, чем тяжёлая гифка, которая сама грузится дольше страницы. Выбирайте инструмент под задачу, тестируйте на реальных устройствах и не держите посетителя в ожидании дольше 2-3 секунд, иначе смысл теряется.