Odwiedzający otwiera stronę, a przed oczami, biały ekran. Mija sekunda, druga, trzecia. Strona jakby się zawiesiła, choć serwer po prostu przetwarza ciężkie skrypty i obrazy. Znajoma sytuacja? Użytkownik nie będzie czekał, zamknie kartę i przejdzie do konkurencji, której strona „myśli" szybciej.

Problem nie zawsze leży w rzeczywistej szybkości hostingu. Czasem strona ładuje się w 2-3 sekundy, ale te sekundy pustki odbierane są jak wieczność. Szczególnie na urządzeniach mobilnych z niestabilnym połączeniem. Rozwiązanie istnieje i jest prostsze niż przepisywanie całej strony od zera.

Preloader (ekran ładowania) rozwiązuje właśnie ten problem: zamiast pustego białego tła odwiedzający widzi animację, logo lub wskaźnik postępu. Strona wygląda profesjonalnie, a czas oczekiwania subiektywnie się skraca. W tym poradniku: trzy działające sposoby na dodanie preloadera w WordPress oraz przegląd najlepszych wtyczek do różnych scenariuszy.

💡 Szybki przegląd:

• Proszę zainstalować gotową wtyczkę preloadera z katalogu WordPress (zajmuje mniej niż minutę)
• Proszę skonfigurować wygląd animacji: zastąpić standardowy spinner logo, plikiem GIF lub niestandardowym CSS
• Proszę wskazać obszar wyświetlania preloadera: tylko strona główna, cała witryna lub konkretne adresy URL
• Proszę otworzyć stronę w trybie incognito i sprawdzić animację na komputerze i urządzeniu mobilnym

Czym jest preloader i dlaczego jest potrzebny

Preloader, to animacja lub obraz, który jest wyświetlany odwiedzającemu, podczas gdy przeglądarka ładuje zawartość strony w tle. Gdy strona jest w pełni gotowa do wyświetlenia, animacja znika i użytkownik widzi gotową stronę. Żadnej magii, po prostu wizualna warstwa między żądaniem HTTP a renderowaniem.

Dlaczego jest to potrzebne? Po pierwsze, psychologia oczekiwania. Badania UX pokazują: animowany wskaźnik ładowania subiektywnie skraca postrzegany czas oczekiwania w porównaniu z pustym ekranem. Użytkownik widzi ruch, zatem strona działa, a nie jest zawieszona. Po drugie, preloader kształtuje pierwsze wrażenie. Animacja z logo lub identyfikacją wizualną od razu komunikuje: „Ta strona jest zrobiona profesjonalnie".

Bywa i tak, że rzeczywista szybkość strony jest w porządku, strona ładuje się w 1,5 sekundy. Ale na wolnym połączeniu 3G lub przy szczytowym obciążeniu serwera nawet lekka strona może „przycinać". Preloader działa jak zabezpieczenie: w idealnych warunkach jest go prawie nie widać, a w problematycznych, ratuje doświadczenie użytkownika.

Jak dodać preloader w WordPress: 3 sposoby

Wybór metody zależy od Pana/Pani umiejętności i wymagań co do dostosowania. Wtyczka, najprostsza droga. Kod, dla tych, którzy chcą pełnej kontroli bez zbędnego kodu w panelu administracyjnym. Wbudowana funkcja motywu, jeśli jest już pod ręką.

Sposób 1: przez wtyczkę (zalecany)

Najbardziej przystępna opcja dla każdego użytkownika WordPress. Algorytm:

• Proszę przejść do Wtyczki → Dodaj nową, wpisać w wyszukiwarkę nazwę wtyczki (na przykład LoftLoader lub Preloader by Alobaidi).
• Proszę kliknąć Zainstaluj, a następnie Aktywuj.
• Proszę przejść do ustawień wtyczki, zwykle pojawiają się one w sekcji Ustawienia lub jako osobna pozycja menu.
• Proszę wybrać typ animacji, przesłać logo lub plik GIF, skonfigurować kolory i tło.
• Proszę zapisać zmiany i otworzyć stronę w trybie incognito, preloader powinien pojawić się przed załadowaniem strony.

Plusy: nie wymaga edycji kodu, łatwo go wyłączyć lub wymienić. Minusy: dodaje kolejną wtyczkę do zestawu (choć dobrej jakości preloadery ważą mniej niż 100 KB i nie wpływają na szybkość).

Sposób 2: kodem w functions.php

Jeśli nie chce Pan/Pani instalować osobnej wtyczki dla jednej animacji, proszę dodać preloader ręcznie. Potrzebny jest dostęp do plików motywu (przez panel administracyjny: Wygląd → Edytor motywu lub przez FTP) i podstawowa znajomość 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
});

Co robi ten kod: tworzy półprzezroczyste białe tło z obracającym się niebieskim spinnerem, który znika po pełnym załadowaniu strony. Proszę zmienić kolor w border-top:4px solid #3498db i rozmiar spinnera pod swój projekt.

⚠️ Przed edycją functions.php proszę zrobić kopię zapasową pliku. Błąd w kodzie PHP może położyć stronę, a przywracanie trzeba będzie przeprowadzić przez FTP.

Sposób 3: wbudowany preloader motywu

Niektóre nowoczesne motywy (Astra Pro, GeneratePress Premium, Blocksy Pro) zawierają wbudowaną opcję preloadera. Proszę sprawdzić ustawienia swojego motywu w kreatorze (Wygląd → Dostosuj), szukać pozycji „Preloader", „Loader" lub „Page Loader". Jeśli motyw już oferuje tę funkcję, proszę z niej skorzystać: to jeden minus wtyczki i gwarantowana kompatybilność.

4 Najlepsze wtyczki preloaderów dla WordPress

Kiedy nie ma wbudowanego rozwiązania, a nie chce się pisać kodu, z pomocą przychodzą wtyczki. Poniżej cztery sprawdzone opcje: od minimalistycznych bezpłatnych po premium kombajny z dziesiątkami animacji.

1. Preloader by Alobaidi

Najprostszy sposób na dodanie ekranu ładowania do witryny. 10 gotowych stylów animacji, obsługa wszystkich nowoczesnych przeglądarek i natychmiastowa aktywacja: instalujesz i działa.

Zalety: zerowa konfiguracja na start, nie zaśmieca panelu administracyjnego zbędnymi menu, kompatybilny z dowolnymi motywami. Wady: personalizacja ograniczona do predefiniowanych stylów, nie można wgrać własnego logo.

Idealny wybór, jeśli potrzebuje Pan rozwiązania „po prostu żeby było", bez zagłębiania się w ustawienia. Na rzeczywistej stronie zaczyna działać 30 sekund po aktywacji.

🔗 Pobierz z WordPress.org

2. LoftLoader

Panel sterowania LoftLoader: wybór animacji, konfiguracja tła, wgrywanie logo i zarządzanie przejściami między stronami.

Jedna z najbardziej elastycznych wtyczek w tej kategorii. Bezpłatna wersja Lite oferuje podstawowy zestaw animacji. Wersja Pro dodaje płynne przejścia między stronami, wskaźnik postępu, możliwość wgrania własnych obrazów i pełnoekranowe tło.

Zalety: szczegółowa personalizacja, animacje zakończenia ładowania (nie tylko pojawiania się), regularne aktualizacje. Wady: bezpłatna wersja jest wyraźnie ograniczona, do logo i identyfikacji wizualnej potrzebna jest wersja Pro.

Twórca wspiera wtyczkę od 2016 roku, ostatnia aktualizacja: maj 2026. W projektach komercyjnych wersja Pro zwraca się dzięki retencji: odwiedzający rzadziej opuszczają stronę, gdy ładuje się katalog lub portfolio.

🔗 Pobierz z WordPress.org🔗 LoftLoader Pro na CodeCanyon

3. PageLoader by Bonfire Themes

Rozwiązanie premium dla tych, którzy potrzebują maksymalnej kontroli. Wgranie własnego obrazu lub GIF-a, wskaźnik postępu, tekst ładowania, konfigurowalne tło i dodatkowy wskaźnik (na przykład kropki ładowania nałożone na obraz). Na osobną wzmiankę zasługuje funkcja timeoutu: jeśli coś pójdzie nie tak i strona nie załaduje się w określonym czasie, preloader jest wymuszanie ukrywany, zamiast wisieć w nieskończoność.

Zalety: unikalna personalizacja bez ani jednej linii kodu, funkcja timeoutu ratuje przed błędami. Wady: tylko premium (licencja jednorazowa), brak bezpłatnej wersji do testów.

Sprawdzi się w projektach, gdzie branding ma znaczenie: studiach, portfolio, landing page’ach o wysokiej wartości leada. Każda sekunda oczekiwania powinna pracować na rozpoznawalność.

🔗 Oficjalna strona

4. WP Smart Preloader

Lekka bezpłatna wtyczka oparta na czystym CSS. Żadnych obrazów, GIF-ów ani ciężkich bibliotek, tylko sprzętowo przyspieszane spinnery, które nie obciążają ani serwera, ani przeglądarki.

Zalety: minimalna waga (poniżej 50 KB), nie wpływa na wskaźniki Core Web Vitals, działa na wszystkich urządzeniach. Wady: tylko spinnery CSS, logo ani własny obraz nie są obsługiwane.

Dobry kompromis między „całkowitym brakiem preloadera" a „ciężką wtyczką z 50 animacjami". Szczególnie istotny dla ruchu mobilnego, gdzie każdy kilobajt jest na wagę złota.

🔗 Pobierz z WordPress.org

Bonus: preloadery wbudowane w motywy

Wiele motywów premium (Astra Pro, GeneratePress Premium, Blocksy Pro) zawiera natywną opcję preloadera w kreatorze dostosowywania. Zanim zainstaluje Pan/Pani osobną wtyczkę, proszę sprawdzić ustawienia wyglądu: być może potrzebna funkcja już na Pana/Panią czeka w sekcji „Wydajność" lub „Ładowanie strony". Plus: zero dodatkowych wtyczek i gwarantowana zgodność z projektem motywu.

Wideo: instalacja preloadera krok po kroku

Proszę obejrzeć demonstrację wizualną, cały proces od wyboru wtyczki do gotowej animacji w 8 minut.

⁉️🤔 Często zadawane pytania

Czy preloader spowalnia ładowanie strony?

Nie, wysokiej jakości preloader nie spowalnia strony. Wtyczki takie jak WP Smart Preloader ważą mniej niż 50 KB i wykorzystują natywny CSS, nie blokują renderowania i nie dodają zbędnych zapytań do serwera. Preloader jedynie wyświetla animację, podczas gdy treść ładuje się w tle, ale nie wydłuża czasu ładowania. Sprawdzono na stronach z ruchem 50 000+ miesięcznie: różnica we wskaźnikach Core Web Vitals z preloaderem i bez niego mieści się w granicach błędu pomiarowego.

Czy można dodać preloader bez wtyczki?

Tak, sposób opisano powyżej w sekcji „Sposób 2: kodem w functions.php". Dodaje Pan/Pani znacznik HTML, animację CSS i niewielką procedurę obsługi zdarzenia window.load w JavaScript; po pełnym załadowaniu strony preloader znika. Minusem jest to, że przy zmianie motywu kod trzeba przenieść do nowego, a przy aktualizacji motywu bez motywu potomnego zmiany zostaną utracone. Jeśli nie korzysta Pan/Pani z motywu potomnego, bezpieczniej jest zainstalować wtyczkę.

Czy preloader będzie działać na urządzeniach mobilnych?

Tak, wszystkie wymienione wtyczki są responsywne i poprawnie działają na smartfonach i tabletach. Animacje CSS są domyślnie wieloprzeglądarkowe, a twórcy testują wtyczki na urządzeniach mobilnych. Jedyny niuans: na słabszych urządzeniach z wolnym połączeniem proszę stosować prostą animację, spinner CSS jest lepszy niż GIF o wadze 2 MB.

Co jest lepsze: wtyczka czy kod w functions.php?

Dla większości użytkowników: wtyczka. Można ją aktualizować, wyłączać i zmieniać bez ryzyka uszkodzenia strony. Kod w functions.php daje pełną kontrolę i pozwala zaoszczędzić jedną wtyczkę, ale wymaga ostrożności: jeden błąd składniowy i strona pada z białym ekranem. Jeśli nie jest Pan/Pani programistą i nie korzysta z motywu potomnego z kontrolą wersji, proszę wybrać wtyczkę.

Jak wybrać odpowiedni preloader do swojego projektu?

Prosty blog lub strona informacyjna: proszę wziąć Preloader by Alohaidi lub WP Smart Preloader (szybko, bezpłatnie, bez zbędnych elementów). Projekt komercyjny z brandingiem: LoftLoader Pro lub PageLoader: proszę wgrać logo, skonfigurować kolory i przejścia. Strona na motywie premium: najpierw proszę sprawdzić wbudowaną opcję w kreatorze dostosowywania, może ona zaspokoić potrzebę bez żadnej dodatkowej wtyczki.

Czy warto instalować preloader na Pana/Pani stronie?

Preloader nie przyspiesza strony, zmienia postrzeganie szybkości. Dla landing page’a lub portfolio, gdzie liczy się każda sekunda utrzymania uwagi, to uzasadniona inwestycja 10 minut na instalację. Dla bloga z lekkimi stronami: opcjonalnie; jeśli czas ładowania wynosi już mniej niż 2 sekundy, preloader będzie migał zbyt szybko i raczej będzie irytować.

Główna zasada: preloader ma działać na korzyść użytkownika, a nie przeciwko niemu. Prosta animacja CSS z szybkim zanikaniem jest lepsza niż ciężki GIF, który sam ładuje się dłużej niż strona. Proszę dobierać narzędzie do zadania, testować na rzeczywistych urządzeniach i nie kazać odwiedzającemu czekać dłużej niż 2-3 sekundy, w przeciwnym razie traci to sens.