Kävijä avaa sivuston ja näkee valkoisen ruudun. Yksi sekunti kuluu, sitten toinen, sitten kolmas. Sivu vaikuttaa jumiutuneelta, vaikka palvelin vain käsittelee raskaita skriptejä ja kuvia. Kuulostaako tutulta? Käyttäjät eivät jää odottamaan: he sulkevat välilehden ja siirtyvät kilpailijalle, jonka sivusto "ajattelee" nopeammin.

Ongelma ei aina ole hosting-palvelusi todellinen nopeus. Joskus sivu latautuu 2-3 sekunnissa, mutta nuo tyhjyyden sekunnit tuntuvat ikuisuudelta. Varsinkin mobiililaitteilla, joissa on epävakaat yhteydet. Ratkaisu on olemassa, ja se on yksinkertaisempi kuin koko sivuston uudelleenkirjoittaminen alusta alkaen.

Esilataaja (latausnäyttö) ratkaisee juuri tämän ongelman: valkoisen tyhjän taustan sijaan kävijät näkevät animaation, logon tai edistymispalkin. Sivusto näyttää ammattimaiselta, ja koettu odotusaika lyhenee subjektiivisesti. Tässä oppaassa käydään läpi kolme toimivaa tapaa lisätä esilataaja WordPressiin ja esitellään parhaat lisäosat eri tilanteisiin.

💡 Pikaopas:

• Asenna valmis esilataajalisäosa WordPressin hakemistosta (vie alle minuutin)
• Mukauta animaation ulkoasu: korvaa oletuspyörivä kuvake logolla, GIF:llä tai omalla CSS:llä
• Määritä, missä esilataaja näkyy: vain etusivulla, koko sivustolla tai tietyissä URL-osoitteissa
• Avaa sivusto incognito-tilassa ja testaa animaatio tietokoneella ja mobiililaitteella

Mikä on esilataaja ja miksi tarvitset sellaisen

Esilataaja on animaatio tai kuva, joka näytetään kävijöille, kun selain lataa sivun sisältöä taustalla. Kun sivusto on täysin valmis näytettäväksi, animaatio katoaa ja käyttäjät näkevät valmiin sivun. Ei mitään taikuutta, vain visuaalinen kerros HTTP-pyynnön ja renderöinnin välissä.

Miksi tätä tarvitaan? Ensinnäkin odottamisen psykologia. UX-tutkimukset osoittavat, että animoitu latausilmaisin lyhentää subjektiivisesti koettua odotusaikaa verrattuna tyhjään ruutuun. Käyttäjät näkevät liikettä, joten sivusto toimii, ei ole jumiutunut. Toiseksi esilataaja muokkaa ensivaikutelmaa. Animaatio, jossa on logo tai brändin tyyli, viestii välittömästi: "Tämä sivusto on tehty ammattimaisesti."

Joskus todellinen sivuston nopeus on hyvä ja sivu latautuu 1,5 sekunnissa. Mutta hitaalla 3G-yhteydellä tai palvelimen ruuhkahuipun aikana kevytkin sivusto voi hidastella. Esilataaja toimii vakuutuksena: ihanteellisissa olosuhteissa se on tuskin havaittava, ja ongelmallisissa olosuhteissa se pelastaa käyttökokemuksen.

Kuinka lisätä esilataaja WordPressissä: 3 tapaa

Valitsemasi tapa riippuu taidoistasi ja mukautustarpeistasi. Lisäosa on yksinkertaisin reitti. Koodi on niille, jotka haluavat täyden hallinnan ilman ylimääräistä kuormaa hallintapaneelissa. Teeman sisäänrakennettu ominaisuus toimii, jos sellainen on jo saatavilla.

Tapa 1: lisäosan avulla (suositeltu)

Helpoin vaihtoehto kenelle tahansa WordPress-käyttäjälle. Prosessi:

• Siirry kohtaan Lisäosat → Lisää uusi, kirjoita lisäosan nimi hakuun (esimerkiksi LoftLoader tai Preloader by Alobaidi).
• Klikkaa Asenna ja sitten Ota käyttöön.
• Siirry lisäosan asetuksiin, jotka yleensä ilmestyvät Asetukset-osioon tai erillisenä valikkokohtana.
• Valitse animaatiotyyppi, lataa logo tai GIF, määritä värit ja tausta.
• Tallenna muutokset ja avaa sivusto incognito-tilassa: esilataajan pitäisi ilmestyä ennen sivun latautumista.

Hyödyt: ei vaadi koodin muokkaamista, helppo poistaa käytöstä tai vaihtaa. Haitat: lisää yhden lisäosan asennukseesi (laadukkaat esilataajat painavat kuitenkin alle 100 kt eivätkä vaikuta nopeuteen).

Tapa 2: koodi functions.php-tiedostossa

Jos et halua asentaa erillistä lisäosaa yhtä animaatiota varten, lisää esilataaja manuaalisesti. Tarvitset pääsyn teematiedostoihin (hallintapaneelin kautta: Ulkoasu → Teemaeditori tai FTP:n kautta) ja HTML/CSS-perusymmärryksen.

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
});

Mitä tämä koodi tekee: luo puoliläpinäkyvän valkoisen taustan, jossa on pyörivä sininen latauskuvake, joka katoaa sivun latauduttua kokonaan. Vaihda väri kohdassa border-top:4px solid #3498db ja latauskuvakkeen koko vastaamaan omaa designiasi.

⚠️ Ennen functions.php-tiedoston muokkaamista tee tiedostosta varmuuskopio. Virhe PHP-koodissa voi kaataa sivuston, ja joudut palauttamaan sen FTP:n kautta.

Tapa 3: teeman sisäänrakennettu esilataaja

Jotkin modernit teemat (Astra Pro, GeneratePress Premium, Blocksy Pro) sisältävät sisäänrakennetun esilataajavaihtoehdon. Tarkista teema-asetuksesi mukauttajasta (Ulkoasu → Mukauta) ja etsi kohtia kuten "Preloader", "Loader" tai "Page Loader". Jos teemasi tarjoaa jo tämän ominaisuuden, käytä sitä: yksi lisäosa vähemmän ja taattu yhteensopivuus.

4 Parasta esilatausliitännäistä WordPressille

Kun sisäänrakennettua ratkaisua ei ole etkä halua kirjoittaa koodia, liitännäiset tulevat apuun. Alla on neljä testattua vaihtoehtoa: minimalistisista ilmaisista aina premium-työkaluihin, joissa on kymmeniä animaatioita.

1. Preloader by Alobaidi

Yksinkertaisin tapa lisätä latausnäyttö sivustollesi. 10 valmista animaatiotyyliä, tuki kaikille moderneille selaimille ja välitön aktivointi: asenna ja se toimii.

Plussat: käynnistyy ilman säätöä, ei täytä hallintapaneelia ylimääräisillä valikoilla, yhteensopiva minkä tahansa teeman kanssa. Miinukset: räätälöinti rajoittuu valmiisiin tyyleihin, omaa logoa ei voi ladata.

Ihanteellinen valinta, jos tarvitset "vain jotain siihen" sukeltamatta asetuksiin. Oikealla sivustolla se alkaa toimia 30 sekuntia aktivoinnin jälkeen.

🔗 Lataa WordPress.orgista

2. LoftLoader

LoftLoaderin hallintapaneeli: animaation valinta, tausta-asetukset, logon lataus ja sivunvaihdon hallinta.

Yksi joustavimmista liitännäisistä kategoriassaan. Ilmainen Lite-versio tarjoaa perusanimaatiot. Pro-versio lisää sulavat sivunvaihdot, edistymispalkin, omien kuvien latauksen ja koko näytön taustan.

Plussat: yksityiskohtainen räätälöinti, latauksen päättymisanimaatiot (ei pelkkä ilmestyminen), säännölliset päivitykset. Miinukset: ilmaisversio on selvästi rajoitettu; logoja ja brändin mukaista tyyliä varten tarvitset Pron.

Kehittäjä on tukenut tätä liitännäistä vuodesta 2016, ja viimeisin päivitys on toukokuulta 2026. Kaupallisissa projekteissa Pro-versio maksaa itsensä takaisin pysyvyyden kautta: kävijät lähtevät epätodennäköisemmin pois, kun katalogi tai portfolio latautuu.

🔗 Lataa WordPress.orgista🔗 LoftLoader Pro CodeCanyonissa

3. PageLoader by Bonfire Themes

Premium-ratkaisu niille, jotka tarvitsevat maksimaalisen hallinnan. Lataa oma kuva tai GIF, lisää edistymispalkki, latausteksti, muokattava tausta ja lisäindikaattori (esimerkiksi latauspisteet kuvan päällä). Erityismaininnan ansaitsee aikakatkaisutoiminto: jos jokin menee pieleen eikä sivusto lataudu asetetussa ajassa, esilataaja piilotetaan pakotetusti sen sijaan, että se jäisi roikkumaan loputtomiin.

Plussat: ainutlaatuinen räätälöinti ilman yhtäkään koodiriviä, aikakatkaisutoiminto pelastaa bugeilta. Miinukset: vain premium (kertalisenssi), ei ilmaisversiota testattavaksi.

Sopii projekteihin, joissa brändäys on tärkeää: studiot, portfoliot, laskeutumissivut, joissa liidikohtainen hinta on korkea. Jokaisen odotussekunnin tulisi toimia tunnistettavuuden hyväksi.

🔗 Virallinen sivusto

4. WP Smart Preloader

Kevyt ilmainen liitännäinen, joka käyttää puhdasta CSS:ää. Ei kuvia, GIF:iä tai raskaita kirjastoja, vain laitteistokiihdytetyt spinnerit, jotka eivät kuormita palvelinta tai selainta.

Plussat: minimaalinen koko (alle 50 kt), ei vaikuta Core Web Vitals -pisteisiin, toimii kaikilla laitteilla. Miinukset: vain CSS-spinnerit; logoja tai omia kuvia ei tueta.

Hyvä kompromissi "ei esilataajaa ollenkaan" ja "raskas liitännäinen 50 animaatiolla" välillä. Erityisen olennainen mobiililiikenteelle, jossa jokainen kilotavu on tärkeä.

🔗 Lataa WordPress.orgista

Bonus: teemoihin sisäänrakennetut esilataimet

Monet premium-teemat (Astra Pro, GeneratePress Premium, Blocksy Pro) sisältävät mukauttajassa valmiin esilataimen. Ennen erillisen lisäosan asentamista tarkista ulkoasuasetukset: tarvitsemasi ominaisuus saattaa odottaa jo "Suorituskyky"- tai "Sivun lataus" -osiossa. Etu: nolla ylimääräistä lisäosaa ja taattu yhteensopivuus teeman ulkoasun kanssa.

Video: esilataimen asennus vaihe vaiheelta

Katso visuaalinen esittely: koko prosessi lisäosan valinnasta toimivaan animaatioon 8 minuutissa.

⁉️🤔 Usein kysytyt kysymykset

Hidastaako esilatain sivuston latautumista?

Ei, laadukas esilatain ei hidasta sivustoasi. WP Smart Preloaderin kaltaiset lisäosat painavat alle 50 kt ja käyttävät natiivia CSS:ää; ne eivät estä renderöintiä eivätkä lisää ylimääräisiä palvelinpyyntöjä. Esilatain näyttää vain animaation sisällön latautuessa taustalla, mutta ei pidennä latausaikaa. Testattu sivustoilla, joilla on yli 50 000 kuukausittaista kävijää: Core Web Vitals -arvojen ero esilataimen kanssa ja ilman sitä mahtuu mittausvirheen sisään.

Voiko esilataimen lisätä ilman lisäosaa?

Kyllä, menetelmä on kuvattu yllä kohdassa "Tapa 2: koodi functions.php-tiedostossa." Lisäät HTML-merkinnän, CSS-animaation ja pienen JavaScript-käsittelijän window.load-tapahtumalle; kun sivu on kokonaan latautunut, esilatain piilotetaan. Huono puoli on, että teemaa vaihtaessasi koodi täytyy siirtää uuteen teemaan, ja kun päivität teemaa ilman lapsiteemaa, muokkauksesi katoavat. Jos et käytä lapsiteemaa, lisäosa on luotettavampi.

Toimiiko esilatain mobiililaitteilla?

Kyllä, kaikki listatut lisäosat ovat responsiivisia ja toimivat oikein älypuhelimilla ja tableteilla. CSS-animaatiot ovat luonnostaan selainriippumattomia, ja kehittäjät testaavat lisäosat mobiililaitteilla. Ainoa huomio: hitaammilla laitteilla ja heikoilla yhteyksillä pidä animaatio yksinkertaisena; CSS-spinneri on parempi kuin 2 Mt:n GIF.

Kumpi on parempi: lisäosa vai koodi functions.php-tiedostossa?

Useimmille käyttäjille lisäosa. Sitä voi päivittää, poistaa käytöstä ja vaihtaa ilman riskiä sivuston rikkoutumisesta. Koodi functions.php-tiedostossa antaa täyden hallinnan ja säästää yhden lisäosan, mutta vaatii varovaisuutta: yksi syntaksivirhe ja sivusto kaatuu valkoiseen ruutuun. Jos et ole kehittäjä etkä käytä lapsiteemaa versionhallinnan kanssa, valitse lisäosa.

Miten valitset oikean esilataimen projektiisi?

Yksinkertainen blogi tai uutissivusto: käytä Preloader by Alobaidi tai WP Smart Preloader (nopea, ilmainen, ei ylimääräistä). Kaupallinen projekti brändäyksellä: LoftLoader Pro tai PageLoader mahdollistaa logon lataamisen, värien ja siirtymien määrittämisen. Premium-teemalla toimiva sivusto: tarkista ensin sisäänrakennettu vaihtoehto mukauttajasta, sillä se saattaa kattaa tarpeesi ilman yhtäkään ylimääräistä lisäosaa.

Kannattaako sivustollesi lisätä esilatain?

Esilatain ei nopeuta sivustoasi; se muuttaa nopeuden kokemusta. Laskeutumissivulle tai portfoliolle, jossa jokainen sekunti pysyvyyttä on tärkeä, se on perusteltu 10 minuutin sijoitus asennukseen. Kevytsivuiselle blogille se on valinnainen: jos latausaika on jo alle 2 sekuntia, esilatain välähtää liian nopeasti ja todennäköisemmin ärsyttää.

Pääsääntö: esilataimen tulee toimia käyttäjän hyväksi, ei häntä vastaan. Yksinkertainen CSS-animaatio nopealla katoamisella on parempi kuin raskas GIF, jonka latautuminen kestää kauemmin kuin itse sivu. Valitse työkalu tehtävääsi varten, testaa oikeilla laitteilla äläkä pidä kävijöitä odottamassa yli 2-3 sekuntia, muuten koko idea menettää merkityksensä.