Відвідувач відкриває сайт, а перед очима, білий екран. Минає секунда, друга, третя. Сторінка ніби зависла, хоча сервер просто обробляє важкі скрипти та зображення. Знайома ситуація? Користувач не чекатиме, він закриє вкладку й піде до конкурента, чий сайт «думає» швидше.

Проблема не завжди в реальній швидкості хостингу. Іноді сторінка завантажується за 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 секунд, інакше сенс втрачається.