Külastaja avab saidi ja näeb valget ekraani. Möödub üks sekund, siis teine, siis kolmas. Leht tundub olevat tardunud, kuigi server lihtsalt töötleb raskeid skripte ja pilte. Tuttav olukord? Kasutajad ei jää ootama: nad sulgevad kaardi ja lahkuvad konkurendi juurde, kelle sait „mõtleb" kiiremini.

Probleem ei ole alati sinu hostingu tegelik kiirus. Mõnikord laeb leht 2-3 sekundiga, kuid need tühjuse sekundid tunduvad igavikuna. Eriti mobiilseadmetes ebastabiilse ühendusega. Lahendus on olemas ja see on lihtsam kui kogu saidi nullist ümberkirjutamine.

Eellaadur (laadimisekraan) lahendab täpselt selle probleemi: tühja valge tausta asemel näevad külastajad animatsiooni, logo või edenemisnäidikut. Sait näeb professionaalne välja ja tajutav ooteaeg väheneb subjektiivselt. Selles juhendis tutvustame kolme toimivat meetodit eellaaduri lisamiseks WordPressi ja anname ülevaate parimatest pluginatest erinevate stsenaariumide jaoks.

💡 Kiirülevaade:

• Paigalda WordPressi kataloogist valmis eellaaduri plugin (võtab vähem kui minuti)
• Kohanda animatsiooni välimust: asenda vaikimisi spinner logo, GIF-i või kohandatud CSS-iga
• Määra, kus eellaadur kuvatakse: ainult avalehel, kogu saidil või kindlatel URL-idel
• Ava sait inkognito režiimis ja testi animatsiooni lauaarvutis ja mobiilis

Mis on eellaadur ja miks seda vaja on

Eellaadur on animatsioon või pilt, mida külastajatele näidatakse sel ajal, kui brauser laeb taustal lehe sisu. Kui sait on täielikult kuvamiseks valmis, animatsioon kaob ja kasutajad näevad valmis lehte. Ei mingit maagiat, lihtsalt visuaalne kiht HTTP-päringu ja renderdamise vahel.

Miks seda vaja on? Esiteks, ootamise psühholoogia. UX-uuringud näitavad, et animeeritud laadimisnäidik vähendab subjektiivselt tajutavat ooteaega võrreldes tühja ekraaniga. Kasutajad näevad liikumist, seega sait töötab, mitte ei ole tardunud. Teiseks, eellaadur kujundab esmamulje. Logo või brändistiiliga animatsioon annab kohe mõista: „See sait on professionaalselt tehtud."

Mõnikord on tegelik saidi kiirus korras ja leht laeb 1,5 sekundiga. Kuid aeglase 3G-ühenduse korral või serveri tippkoormuse ajal võib isegi kerge sait tõrkuda. Eellaadur toimib kindlustusena: ideaalsetes tingimustes on see vaevu märgatav ja probleemsetes tingimustes päästab kasutajakogemuse.

Kuidas lisada eellaadurit WordPressis: 3 meetodit

Valitav meetod sõltub sinu oskustest ja kohandamisvajadustest. Plugin on kõige lihtsam tee. Kood on neile, kes soovivad täielikku kontrolli ilma lisakoormuseta halduspaneelis. Teema sisseehitatud funktsioon töötab, kui see on juba olemas.

1. Meetod: plugina abil (soovitatav)

Kõige kättesaadavam variant igale WordPressi kasutajale. Protsess:

• Mine jaotisse Pluginad → Lisa uus, sisesta otsingusse plugina nimi (näiteks LoftLoader või Preloader by Alobaidi).
• Klõpsa Paigalda, seejärel Aktiveeri.
• Mine plugina seadetesse, mis tavaliselt ilmuvad jaotises Seaded või eraldi menüüpunktina.
• Vali animatsiooni tüüp, laadi üles logo või GIF, seadista värvid ja taust.
• Salvesta muudatused ja ava sait inkognito režiimis: eellaadur peaks ilmuma enne lehe laadimist.

Plussid: pole vaja koodi redigeerida, lihtne keelata või asendada. Miinused: lisab veel ühe plugina sinu seadistusse (kuigi kvaliteetsed eellaadurid kaaluvad alla 100 KB ega mõjuta kiirust).

2. Meetod: kood failis functions.php

Kui sa ei soovi ühe animatsiooni jaoks eraldi pluginat paigaldada, lisa eellaadur käsitsi. Sul on vaja juurdepääsu teemafailidele (halduspaneeli kaudu: Välimus → Teema redaktor või FTP kaudu) ja HTML/CSS-i põhiteadmisi.

1
// Add HTML markup of the preloader right after opening 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
// Add CSS animation and hide the preloader after page load
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
});

Mida see kood teeb: loob poolläbipaistva valge tausta koos pöörleva sinise spinneriga, mis kaob pärast lehe täielikku laadimist. Muuda värvi atribuudis border-top:4px solid #3498db ja spinneri suurust, et need sobiksid sinu kujundusega.

⚠️ Enne functions.php redigeerimist tee failist varukoopia. PHP-koodi viga võib saidi maha võtta ja pead selle FTP kaudu taastama.

3. Meetod: teema sisseehitatud eellaadur

Mõned kaasaegsed teemad (Astra Pro, GeneratePress Premium, Blocksy Pro) sisaldavad sisseehitatud eellaaduri valikut. Kontrolli oma teema seadeid kohandajas (Välimus → Kohanda), otsides üksusi nagu „Preloader", „Loader" või „Page Loader". Kui sinu teema juba pakub seda funktsiooni, kasuta seda: üks plugin vähem ja garanteeritud ühilduvus.

4 Parimat eellaadimispluginat WordPressile

Kui sisseehitatud lahendus puudub ja koodi kirjutada ei soovi, tulevad appi pluginad. Allpool on neli tõestatud valikut: minimalistlikest tasuta variantidest kuni kümnete animatsioonidega premium-jõujaamadeni.

1. Preloader by Alobaidi

Lihtsaim viis laadimisekraani lisamiseks oma saidile. 10 valmis animatsioonistiili, tugi kõigile kaasaegsetele brauseritele ja kohene aktiveerimine: paigalda ja see töötab.

Plussid: alustamiseks pole seadistamist vaja, ei risusta administraatoriliidest lisamenüüdega, ühildub iga teemaga. Miinused: kohandamine piirdub eelseadistatud stiilidega, enda logo üles laadida ei saa.

Ideaalne valik, kui on vaja „lihtsalt, et midagi oleks", ilma seadetesse süvenemata. Reaalsel saidil hakkab see tööle 30 sekundit pärast aktiveerimist.

🔗 Lae alla WordPress.org-ist

2. LoftLoader

LoftLoaderi juhtpaneel: animatsiooni valik, taustaseaded, logo üleslaadimine ja leheüleminekute haldus.

Üks paindlikumaid pluginaid oma kategoorias. Tasuta Lite-versioon pakub põhilist animatsioonide komplekti. Pro-versioon lisab sujuvad leheüleminekud, edenemisnäidiku, kohandatud piltide üleslaadimise ja täisekraani tausta.

Plussid: detailne kohandamine, laadimise lõppemise animatsioonid (mitte ainult ilmumine), regulaarsed uuendused. Miinused: tasuta versioon on märgatavalt piiratud; logode ja brändistiili jaoks on vaja Pro-d.

Arendaja on seda pluginat toetanud alates 2016. aastast, viimane uuendus oli mais 2026. Äriprojektide puhul tasub Pro-versioon end ära tänu hoidmisele: külastajad lahkuvad väiksema tõenäosusega, kuni kataloog või portfoolio laadib.

🔗 Lae alla WordPress.org-ist🔗 LoftLoader Pro CodeCanyonis

3. PageLoader by Bonfire Themes

Premium-lahendus neile, kes vajavad maksimaalset kontrolli. Lae üles oma pilt või GIF, lisa edenemisnäidik, laadimistekst, kohandatav taust ja lisanäidik (näiteks laadimistäpid pildi kohal). Eraldi äramärkimist väärib ajalõpu funktsioon: kui midagi läheb valesti ja sait ei laadi määratud aja jooksul, peidetakse eellaadur sunniviisiliselt, selle asemel et lõputult rippuda.

Plussid: ainulaadne kohandamine ilma ühegi koodireata, ajalõpu funktsioon päästab vigade eest. Miinused: ainult premium (ühekordne litsents), tasuta versiooni testimiseks pole.

Sobib projektidele, kus bränding on oluline: stuudiod, portfooliod, kõrge liidihinnaga maandumislehed. Iga ootamise sekund peaks töötama tuntuse kasvatamise nimel.

🔗 Ametlik veebisait

4. WP Smart Preloader

Kergekaaluline tasuta plugin, mis kasutab puhast CSS-i. Pole pilte, GIF-e ega raskeid teeke, ainult riistvaraliselt kiirendatud spinnerid, mis ei koorma serverit ega brauserit.

Plussid: minimaalne maht (alla 50 KB), ei mõjuta Core Web Vitalsi skoore, töötab kõigis seadmetes. Miinused: ainult CSS-spinnerid; logod või kohandatud pildid ei ole toetatud.

Hea kompromiss „üldse mitte mingi eellaaduri" ja „raske 50 animatsiooniga plugina" vahel. Eriti asjakohane mobiililiikluse puhul, kus iga kilobait loeb.

🔗 Lae alla WordPress.org-ist

Boonus: teemadesse sisseehitatud eellaadurid

Paljud lisatasulised teemad (Astra Pro, GeneratePress Premium, Blocksy Pro) sisaldavad kohandajas eellaaduri valikut. Enne eraldi pluginat kontrolli välimuse seadeid: vajalik funktsioon võib sind juba oodata jaotises „Jõudlus" või „Lehe laadimine". Eelis: null lisaprogrammi ja garanteeritud ühilduvus teema kujundusega.

Video: eellaaduri samm-sammuline paigaldus

Vaata visuaalset demonstratsiooni: kogu protsess pluginavalikust töötava animatsioonini 8 minutiga.

⁉️🤔 Korduma kippuvad küsimused

Kas eellaadur aeglustab saidi laadimist?

Ei, kvaliteetne eellaadur ei aeglusta sinu saiti. Pluginad nagu WP Smart Preloader kaaluvad alla 50 KB ja kasutavad tavalist CSS-i; need ei blokeeri renderdamist ega lisa täiendavaid serveripäringuid. Eellaadur näitab ainult animatsiooni, samal ajal kui sisu taustal laeb, kuid ei suurenda laadimisaega. Testitud saitidel, millel on üle 50 000 külastaja kuus: Core Web Vitalsi erinevus eellaaduriga ja ilma jääb mõõtmisvea piiresse.

Kas eellaadurit saab lisada ilma pluginata?

Jah, meetodit on kirjeldatud ülal jaotises „Meetod 2: kood failis functions.php". Lisad HTML-märgendi, CSS-animatsiooni ja väikese JavaScripti töötleja sündmusele window.load; kui leht on täielikult laadinud, peidetakse eellaadur. Miinuseks on see, et teemat vahetades pead koodi uude teemasse üle viima ning ilma alamteemata teemat uuendades lähevad sinu muudatused kaotsi. Kui sa ei kasuta alamteemat, on plugin usaldusväärsem.

Kas eellaadur töötab mobiilseadmetes?

Jah, kõik loetletud pluginad on responsiivsed ja töötavad korrektselt nutitelefonides ja tahvelarvutites. CSS-animatsioonid on olemuslikult brauseriülesed ning arendajad testivad pluginaid mobiilseadmetel. Ainus nüanss: aeglasematel ja kehva ühendusega seadmetel hoia animatsioon lihtsana; CSS-spinner on eelistatavam kui 2 MB GIF.

Kumb on parem: plugin või kood failis functions.php?

Enamiku kasutajate jaoks plugin. Seda saab uuendada, keelata ja vahetada, ilma et oleks ohtu saiti lõhkuda. Kood failis functions.php annab täieliku kontrolli ja hoiab kokku ühe pluginat, kuid nõuab ettevaatust: üks süntaksiviga ja sait läheb valge ekraaniga maas. Kui sa ei ole arendaja ega kasuta versioonihaldusega alamteemat, vali plugin.

Kuidas valida oma projektile õige eellaadur?

Lihtne blogi või uudistesait: kasuta Preloader by Alobaidi või WP Smart Preloader (kiire, tasuta, ilma lisadeta). Brändinguga äriprojekt: LoftLoader Pro või PageLoader võimaldab üles laadida logo, seadistada värve ja üleminekuid. Lisatasulise teemaga sait: kontrolli esmalt kohandaja sisseehitatud valikut, sest see võib katta sinu vajadused ilma ühegi täiendava pluginata.

Kas peaksid oma saidile eellaaduri lisama?

Eellaadur ei kiirenda sinu saiti; see muudab kiiruse tajumist. Sihtlehe või portfoolio puhul, kus iga hoidmise sekund loeb, on see õigustatud investeering 10 minutit paigaldamiseks. Kergekaaluliste lehtedega blogi puhul on see valikuline: kui laadimisaeg on juba alla 2 sekundi, vilksatab eellaadur liiga kiiresti ja pigem ärritab.

Peamine reegel: eellaadur peaks töötama kasutaja, mitte tema vastu. Lihtne CSS-animatsioon kiire kadumisega on parem kui raske GIF, mille laadimine võtab kauem aega kui leht ise. Vali tööriist vastavalt oma ülesandele, testi päris seadmetel ja ära lase külastajatel oodata kauem kui 2-3 sekundit, muidu kaob kogu mõte.