Parhaat keinot nopeuttaa hidasta WoedPress-sivustoa

Hitaasti latautuva WordPress-sivusto on turhauttava sekä kävijälle että sivuston omistajalle.

Jos tärkein sisältö ilmestyy ruudulle hitaasti, kuvat latautuvat pitkään tai sivusto reagoi viiveellä, kävijä voi poistua ennen kuin hän ehtii nähdä, mitä sivustolla on tarjota.

Hyvä uutinen on, että WordPress-sivuston nopeutta voi usein parantaa merkittävästi ilman syvällistä ohjelmointiosaamista.

Useimmat ongelmat liittyvät samoihin asioihin:

• liian suuriin kuviin
• hitaaseen webhotelliin
• puuttuvaan tai väärin toimivaan välimuistiin
• raskaaseen teemaan
• tarpeettomiin lisäosiin
• liialliseen JavaScriptiin
• ulkoisiin skripteihin
• hitaasti latautuviin fontteihin
• huonosti toteutettuun mobiilinäkymään

Tässä oppaassa käydään läpi käytännön keinot, joilla voit nopeuttaa WordPress-sivustoasi hallitusti.

Miksi WordPress-sivuston nopeus on tärkeää?

Nopeus vaikuttaa ennen kaikkea käyttökokemukseen.

Kävijä haluaa nähdä sivun sisällön nopeasti, löytää tarvitsemansa tiedon ilman odottelua ja käyttää sivustoa sujuvasti myös puhelimella.

Hidas sivusto voi tehdä esimerkiksi näistä asioista hankalia:

• palvelun tai tuotteen löytäminen
• blogiartikkelin lukeminen
• yhteydenottolomakkeen täyttäminen
• verkkokaupan ostoskorin käyttö
• kassalle siirtyminen
• kuvagallerian selaaminen
• ajanvarauksen tekeminen

Nopeus voi tukea myös hakukonenäkyvyyttä, koska se on osa hyvää sivukokemusta. Se ei kuitenkaan yksin ratkaise Google-sijoituksia.

Hyvä sisältö, sivun tarkoituksenmukaisuus, tekninen toimivuus, mobiilikäyttö ja sisäinen linkitys ovat edelleen tärkeitä.

Aloita mittaamalla, älä arvailemalla

Ennen kuin alat asentaa lisäosia tai muuttaa asetuksia, selvitä ensin, mikä sivustoa todella hidastaa.

Testaa ainakin:

• etusivu
• tärkein palvelusivu
• suosituin blogiartikkeli
• yhteydenottosivu
• verkkokaupan tuotesivu
• ostoskori ja kassasivu, jos käytössä on WooCommerce
• mobiilinäkymä
• tietokonenäkymä

Hyviä työkaluja ovat esimerkiksi:

• Google PageSpeed Insights
• Lighthouse selaimen kehittäjätyökaluissa
• GTmetrix
• WebPageTest
• Google Search Consolen Core Web Vitals -raportti

Älä tee johtopäätöksiä yhden yksittäisen testin perusteella.

Testituloksiin vaikuttavat esimerkiksi:

• testipalvelimen sijainti
• käytetty selain
• välimuistin tila
• verkkoyhteys
• sivun senhetkinen kuormitus
• ulkoisten palveluiden vasteajat

Tärkeintä on tunnistaa toistuvat ongelmat ja korjata suurimmat pullonkaulat ensin.

1. Valitse WordPressille sopiva webhotelli

Webhotelli vaikuttaa siihen, kuinka nopeasti WordPress pystyy muodostamaan sivun ennen kuin selain alkaa ladata kuvia, CSS-tiedostoja ja JavaScriptiä.

Halpa webhotelli ei ole aina huono. Ongelma syntyy silloin, jos palvelimella on liian vähän resursseja, sivusto on samalla palvelimella hyvin kuormitettujen muiden sivustojen kanssa tai WordPressin välimuisti ei toimi kunnolla.

Hyvä WordPress-webhotelli tarjoaa yleensä:

• riittävät suorituskykyresurssit
• nykyaikaisen PHP-version
• palvelintasoisen välimuistin tai selkeän tuen välimuistilisäosalle
• HTTPS-tuen
• automaattiset varmuuskopiot
• toimivan asiakastuen
• mahdollisuuden käyttää staging-ympäristöä
• hyvän suorituskyvyn kohdeyleisön sijaintiin nähden

Jos suurin osa asiakkaistasi on Suomessa, Suomessa tai Euroopassa sijaitseva palvelin voi pienentää viivettä. Jos kävijöitä tulee paljon useista maista, CDN-palvelu voi auttaa toimittamaan staattisia tiedostoja lähempää kävijää.

Älä vaihda webhotellia vain testituloksen vuoksi. Selvitä ensin, johtuuko ongelma palvelimesta, liian suurista kuvista, raskaasta teemasta vai lisäosista.

2. Käytä kevyttä teemaa ja karsi tarpeeton

Teema vaikuttaa merkittävästi siihen, kuinka paljon CSS:ää, JavaScriptiä, fontteja ja muita resursseja sivu lataa.

Hyvin monipuolinen teema voi sisältää paljon ominaisuuksia, joita sivusto ei koskaan käytä.

Raskaita voivat olla esimerkiksi:

• suuret kuvakarusellit
• automaattisesti käynnistyvät videot
• animaatiot
• useat fonttiperheet
• sivunrakentajan laajat ominaisuudet
• useat kuvakekirjastot
• useat ponnahdusikkunat
• sosiaalisen median syötteet
• tarpeettomat ulkoiset skriptit

Kevyt teema ei tarkoita tylsää ulkoasua.

Tärkeintä on, että teema lataa vain tarvittavia toimintoja ja että sivuston yläosassa näkyvä sisältö muodostuu nopeasti.

Jos käytät sivunrakentajaa, vältä rakentamasta jokaista sivua useilla päällekkäisillä elementeillä. Usein yksinkertaisempi rakenne on sekä nopeampi että helpompi käyttää.

3. Optimoi kuvat ennen ja jälkeen lataamisen

Kuvat ovat yksi yleisimmistä WordPress-sivuston nopeusongelmista.

Hyvälaatuinen kuva ei tarkoita sitä, että sivustolle pitäisi ladata kamerasta suoraan tullut monen megatavun alkuperäistiedosto.

Ennen kuvan lataamista kannattaa tarkistaa:

• mikä on kuvan todellinen näyttökoko sivulla
• onko kuva tarpeettoman leveä tai korkea
• onko tiedosto pakattu
• onko kuvasuhde sopiva
• tarvitaanko läpinäkyvyyttä
• onko kuvan tiedostomuoto oikea
• näkyykö kuva heti sivun yläosassa vai vasta alempana

Käytä sopivaa tiedostomuotoa

Valokuviin sopivat usein:

• WebP
• AVIF
• JPEG

PNG sopii erityisesti logoihin, kuvakkeisiin ja grafiikkaan, joissa tarvitaan läpinäkyvyyttä tai tarkkoja värialueita.

WebP ja AVIF voivat pienentää tiedostokokoa verrattuna JPEG- ja PNG-kuviin, mutta tiedostomuoto ei yksin ratkaise ongelmaa.

Liian suuri WebP-kuva voi olla edelleen raskas.

Hyödynnä WordPressin responsiivisia kuvia

Kun kuva lisätään WordPressin Mediakirjastosta tavallisella Kuva-lohkolla, WordPress luo yleensä eri kokoisia kuvaversioita ja lisää srcset– sekä sizes-attribuutit.

Selain voi tällöin valita laitteen näytölle sopivan version.

Tämä on tärkeää erityisesti mobiilissa, jossa ei kannata ladata yhtä suurta kuvaa kuin leveälle työpöytänäytölle.

Määritä kuvan leveys ja korkeus

Kuvan leveys- ja korkeusmitat auttavat selainta varaamaan kuvalle tilan jo ennen lataamista.

Tämä vähentää sivun elementtien hyppimistä latauksen aikana.

Esimerkiksi:

<img src="vaellusreppu.webp" width="1200" height="800" alt="Vaellusreppu tunturimaisemassa">

Älä lazy-loadtaa sivun tärkeintä kuvaa

Lazy loading sopii sivun alempana oleville kuville.

Sitä ei pidä käyttää kuvalle, joka näkyy heti sivun yläosassa ja on todennäköisesti sivun Largest Contentful Paint -elementti eli LCP-kuva.

Huono esimerkki pääkuvasta:

<img src="hero-kuva.webp" loading="lazy" alt="Yrityksen palvelu">

Jos pääkuva latautuu lazy loadingilla, selain voi aloittaa sen lataamisen liian myöhään.

Tärkeimmän kuvan pitäisi yleensä latautua normaalisti heti sivun alussa.

Käytä korkeaa latausprioriteettia harkiten

Jos tiedät varmasti, että tietty kuva on sivun tärkein yläosan kuva, sille voidaan antaa korkea latausprioriteetti:

<img src="hero-kuva.webp" fetchpriority="high" alt="Vaellusreppu tunturimaisemassa">

Tätä ei pidä lisätä kaikille kuville.

Jos usealle kuvalle annetaan korkea prioriteetti, selain ei enää tiedä, mikä resurssi pitäisi ladata ensin.

4. Käytä välimuistia oikein

Välimuisti on yksi tehokkaimmista tavoista nopeuttaa WordPress-sivustoa.

Sivuvälimuisti tallentaa sivusta valmiin version, joka voidaan näyttää kävijälle ilman, että WordPress rakentaa saman sivun alusta asti jokaisella vierailulla.

Välimuistiratkaisu voi sisältää esimerkiksi:

• sivuvälimuistin
• selaimen välimuistin
• objektivälimuistin
• CDN-välimuistin
• kuvien välimuistin
• palvelintasoisen välimuistin

Hyvä lähtökohta on käyttää ensisijaisesti webhotellin omaa välimuistiratkaisua, jos sellainen on tarjolla.

Jos webhotelli ei tarjoa sitä, yksi hyvä välimuistilisäosa voi olla hyödyllinen.

Älä käytä useaa päällekkäistä välimuisti- tai optimointilisäosaa samaan aikaan ilman selkeää syytä.

Päällekkäiset asetukset voivat aiheuttaa esimerkiksi:

• rikkinäisen mobiilivalikon
• toimimattoman lomakkeen
• väärin toimivan ostoskorin
• ongelmia kassasivulla
• JavaScript-virheitä
• kuvagallerian rikkoutumista
• kirjautumisongelmia
• vanhentuneen sisällön näkymistä kävijöille

Jos käytät WooCommercea, varmista, ettei ostoskoria, kassaa tai Oma tili -sivua välimuistita samalla tavalla kuin tavallista blogiartikkelia.

Näiden sivujen sisältö voi olla käyttäjäkohtaista.

5. Älä yhdistä CSS- ja JavaScript-tiedostoja automaattisesti

Aiemmin CSS- ja JavaScript-tiedostojen yhdistämistä pidettiin lähes aina hyvänä nopeustoimena.

Nykyisillä HTTP/2- ja HTTP/3-yhteyksillä useiden pienten tiedostojen lataaminen ei ole aina ongelma.

Tiedostojen yhdistäminen voi joissakin tilanteissa:

• parantaa nopeutta
• heikentää nopeutta
• vaikeuttaa välimuistin hyödyntämistä
• rikkoa JavaScript-toimintoja
• aiheuttaa CSS-ongelmia
• vaikeuttaa virheiden selvittämistä

Siksi yhdistäminen pitää testata sivustokohtaisesti.

Turvallisempi lähtökohta on:

• pienennä tiedostoja tarvittaessa
• poista käyttämätön CSS ja JavaScript
• lataa tarpeettomat skriptit myöhemmin
• vältä raskaita toimintoja sivun yläosassa
• testaa jokainen muutos erikseen

6. Lataa JavaScript harkiten

JavaScript voi estää selainta näyttämästä sivun sisältöä nopeasti, jos sitä ladataan ja suoritetaan paljon heti sivun alussa.

Tämä on tavallista erityisesti silloin, kun sivustolla on:

• useita sivunrakentajan lisäosia
• chat-palvelu
• kartta
• video-upotuksia
• mainostunnisteita
• sosiaalisen median syötteitä
• evästebanneri
• analytiikka
• useita markkinointipikseleitä
• raskas kuvakaruselli
• monimutkaisia lomakkeita

defer-attribuutti sopii usein skripteille, jotka voivat odottaa HTML-sisällön jäsentymistä.

async sopii yleensä skripteille, joiden suoritusjärjestyksellä ei ole väliä.

Näitä ei kuitenkaan kannata ottaa käyttöön sokkona.

Esimerkiksi verkkokaupan ostoskoriin, lomakkeisiin tai mobiilivalikkoon liittyvän JavaScriptin viivästyttäminen voi rikkoa toimintoja.

Tee muutos yksi kerrallaan ja testaa aina ainakin:

• valikot
• lomakkeet
• kuvagalleriat
• hakutoiminto
• mobiilinäkymä
• ostoskori
• kassa
• kirjautuminen
• välimuistin tyhjennyksen jälkeinen sivu

7. Hallitse ulkoisia skriptejä

Kolmannen osapuolen skriptit voivat hidastaa sivua merkittävästi.

Tällaisia voivat olla esimerkiksi:

• Google Analytics
• Google Tag Manager
• Meta Pixel
• TikTok Pixel
• YouTube-upotukset
• kartat
• chat-palvelut
• arvostelupalvelut
• sosiaalisen median syötteet
• mainosverkostot
• ajanvarausjärjestelmät
• evästesuostumusratkaisut

Google Tag Manager voi helpottaa tunnisteiden hallintaa, mutta se ei itsessään nopeuta sivustoa.

Jos Tag Manageriin lisätään paljon tunnisteita, sivusto voi myös hidastua.

Kysy jokaisesta ulkoisesta palvelusta:

Tarvitaanko tämä heti sivun latauksen alussa?

Mahdollisia ratkaisuja ovat esimerkiksi:

• videon lataaminen vasta, kun kävijä painaa toistopainiketta
• kartan lataaminen kävijän pyynnöstä
• chatin avaaminen vasta myöhemmin
• sosiaalisen median syötteen poistaminen etusivulta
• tarpeettomien tagien poistaminen
• mainosskriptien viivästetty lataus
• analytiikan käynnistäminen vasta tarvittavan evästesuostumuksen jälkeen

8. Optimoi fontit

Fontit voivat tehdä sivusta näyttävän, mutta liian monet fonttiperheet, fonttipaksuudet ja ulkoiset fonttipalvelut voivat hidastaa sivun alkuvaihetta.

Hyviä käytäntöjä ovat:

• käytä mahdollisimman vähän fonttiperheitä
• käytä vain tarvittavia fonttipaksuuksia
• suosi WOFF2-muotoa
• lataa vain sivulla tarvittavat fonttitiedostot
• harkitse fonttien paikallista tallennusta
• esilataa korkeintaan yksi tai kaksi aidosti kriittistä fonttia
• käytä font-display: swap -asetusta harkiten

font-display: swap voi auttaa näyttämään tekstin nopeasti varafontilla ennen varsinaisen fontin latautumista.

Testaa kuitenkin lopputulos, koska hyvin erilainen varafontti voi aiheuttaa tekstin koon tai rivien vaihtumista latauksen aikana.

9. Käytä CDN-palvelua tarvittaessa

CDN eli Content Delivery Network voi nopeuttaa erityisesti kuvia, CSS-tiedostoja, JavaScriptiä ja muita staattisia resursseja.

CDN tallentaa sivuston tiedostoja useille palvelimille eri puolille maailmaa. Käyttäjä voi saada staattiset tiedostot lähempää kuin alkuperäiseltä palvelimelta.

CDN voi olla hyödyllinen erityisesti silloin, kun:

• sivustolla on kävijöitä useista maista
• sivustolla on paljon kuvia
• tuotteita tai artikkeleita katsellaan paljon
• palvelimen kuormaa halutaan vähentää
• tarvitaan myös DDoS-suojausta tai liikenteen suodatusta

Pienelle paikalliselle sivustolle CDN ei aina ole ensimmäinen ratkaisu.

Jos pääongelma on liian suuri pääkuva, hidas webhotelli tai raskas teema, nämä kannattaa korjata ensin.

10. Pidä tietokanta kunnossa, mutta älä aloita siitä

WordPress-tietokantaan voi ajan myötä kertyä esimerkiksi:

• vanhoja revisioita
• automaattisia luonnoksia
• roskakoriin siirrettyjä kommentteja
• roskapostikommentteja
• vanhentuneita transientteja
• käyttämättömien lisäosien asetuksia
• turhaa metatietoa

Tietokannan siivoaminen voi auttaa, mutta se ei yleensä ole ensimmäinen eikä suurin nopeusparannus tavallisella sivustolla.

Aloita mieluummin näistä:

1. suuret kuvat
2. välimuisti
3. hidas palvelin
4. raskas teema
5. tarpeettomat lisäosat
6. ulkoiset skriptit
7. LCP-kuva
8. renderöintiä estävä CSS ja JavaScript

Tee tietokantasiivous vasta sen jälkeen tai silloin, kun tietokanta on selvästi paisunut.

Ota aina varmuuskopio ennen tietokannan optimointia.

Revisioiden hallinta

WordPress tallentaa sivuista ja artikkeleista revisioita, jotta vanhempiin versioihin voidaan tarvittaessa palata.

Revisioita ei yleensä kannata poistaa kokonaan käytöstä. Niistä voi olla paljon hyötyä, jos sisältöä muokataan vahingossa väärin.

Tarvittaessa revisioiden määrää voidaan rajoittaa, mutta asetusta ei pidä muuttaa ilman varmuuskopiota ja ymmärrystä siitä, mitä sivustolla tarvitaan.

11. Käytä tuettua PHP-versiota

WordPress toimii PHP:llä, joten palvelimen PHP-versio vaikuttaa sivuston suorituskykyyn ja tietoturvaan.

Vanha PHP-versio voi olla hitaampi, haavoittuvampi ja yhteensopimaton uusien lisäosien tai teemojen kanssa.

Tarkista webhotellin hallinnasta:

• mikä PHP-versio sivustolla on käytössä
• mitkä PHP-versiot ovat palvelimella saatavilla
• tukeeko nykyinen WordPress-teema ja lisäosat uudempaa versiota
• onko palveluntarjoaja antanut päivityssuosituksia

Älä vaihda PHP-versiota suoraan tuotantosivustolla testaamatta.

Turvallinen tapa on:

1. Ota varmuuskopio.
2. Testaa uusi PHP-versio staging-ympäristössä.
3. Tarkista tärkeät sivut ja toiminnot.
4. Päivitä tarvittaessa teema ja lisäosat.
5. Tee muutos tuotantosivustolle vasta testauksen jälkeen.

12. Päivitä WordPress, teema ja lisäosat

Päivitykset eivät aina tee sivustosta nopeampaa, mutta ne voivat korjata virheitä, parantaa yhteensopivuutta ja paikata tietoturva-aukkoja.

Pidä ajan tasalla:

• WordPressin ydin
• aktiivinen teema
• käytössä olevat lisäosat
• WooCommerce ja sen lisäosat
• PHP-versio
• tietoturva- ja varmuuskopiointiratkaisut

Poista käyttämättömät lisäosat ja teemat.

Käytöstä poistettu lisäosa ei välttämättä hidasta sivustoa, mutta se voi silti jäädä tarpeettomaksi tietoturvariskiksi.

13. Testaa erityisesti sivun tärkein sisältö

Nopeusoptimoinnissa kannattaa kiinnittää huomiota siihen, mitä kävijä näkee heti sivun avauduttua.

Tärkein mittari on usein Largest Contentful Paint eli LCP.

LCP tarkoittaa aikaa, joka kuluu siihen, että sivun suurin näkyvällä alueella oleva kuva- tai tekstielementti tulee näkyviin.

LCP-elementti voi olla esimerkiksi:

• hero-kuva
• artikkelin pääkuva
• verkkokaupan tuotekuva
• suuri otsikko
• tekstialue
• videon esikatselukuva

Jos LCP on hidas, tarkista erityisesti:

• onko pääkuva liian suuri
• onko pääkuva lazy-loadattu
• löytyykö pääkuva selaimelle tarpeeksi nopeasti
• onko palvelimen vastausaika hidas
• latautuuko liikaa JavaScriptiä ennen pääsisältöä
• estääkö CSS sivun piirtymistä
• latautuuko liian monta fonttia
• onko hero-alueella raskas video tai karuselli

Usein yksinkertaisempi hero-alue parantaa sekä nopeutta että selkeyttä.

14. Vältä liian raskaita videoita ja upotuksia

Video voi tehdä sivusta kiinnostavamman, mutta se voi myös tehdä siitä raskaan.

Älä lataa videota suoraan WordPressin mediakirjastoon, jos kyseessä on pitkä tai suuri videotiedosto.

Käytä mieluummin videopalvelua, kuten YouTubea tai Vimeota, mutta optimoi upotus.

Hyviä käytäntöjä ovat esimerkiksi:

• näytä ensin kevyt esikatselukuva
• lataa varsinainen video vasta, kun kävijä painaa toistoa
• vältä automaattisesti käynnistyviä taustavideoita sivun yläosassa
• vältä useita videoita samalla sivulla
• älä käytä GIF-animaatioita suurina taustaelementteinä
• testaa videon vaikutus mobiilin latausnopeuteen

15. Seuraa muutoksia ja tee niitä yksi kerrallaan

Nopeusoptimointi ei ole kertaluonteinen projekti.

Sivusto muuttuu, kun lisäät uusia kuvia, artikkeleita, lisäosia, seurantoja, verkkokaupan toimintoja tai ulkoisia palveluja.

Tee muutokset hallitusti:

1. Ota varmuuskopio ennen suurempia muutoksia.
2. Testaa muutos staging-ympäristössä, jos mahdollista.
3. Tee yksi muutos kerrallaan.
4. Tyhjennä välimuisti.
5. Testaa sivusto mobiilissa ja tietokoneella.
6. Tarkista PageSpeed Insights tai Lighthouse.
7. Varmista, että tärkeät toiminnot toimivat edelleen.
8. Kirjaa ylös, mitä muutettiin.

Tämä helpottaa ongelmien selvittämistä, jos jokin toiminto rikkoutuu.

WordPress-sivuston nopeutuksen tarkistuslista

Käy nämä kohdat läpi järjestyksessä:

1. Testaa tärkeimmät sivut PageSpeed Insightsilla.
2. Selvitä, mikä sivun LCP-elementti on.
3. Optimoi tärkein pääkuva.
4. Varmista, ettei LCP-kuvaa lazy-loadata.
5. Käytä responsiivisia kuvia.
6. Pakkaa kuvat ja käytä sopivaa tiedostomuotoa.
7. Tarkista webhotellin suorituskyky.
8. Ota käyttöön yksi toimiva välimuistiratkaisu.
9. Vältä päällekkäisiä välimuistilisäosia.
10. Karsi tarpeettomat lisäosat.
11. Vähennä raskaita ulkoisia skriptejä.
12. Optimoi fontit.
13. Tarkista JavaScriptin ja CSS:n vaikutus.
14. Älä yhdistä tiedostoja automaattisesti ilman testausta.
15. Varmista, että mobiilinäkymä toimii hyvin.
16. Tarkista WooCommerce-kaupassa ostoskori ja kassa.
17. Siivoa tietokantaa harkiten.
18. Käytä tuettua PHP-versiota.
19. Päivitä WordPress, teema ja lisäosat.
20. Testaa jokainen muutos ennen ja jälkeen.

Yhteenveto

WordPress-sivuston nopeuttaminen ei vaadi yleensä yhtä suurta korjausta, vaan useiden pienempien asioiden parantamista.

Useimmilla sivustoilla suurin hyöty saadaan näistä:

• sopiva webhotelli
• välimuisti
• optimoidut kuvat
• kevyt teema
• tarpeettomien lisäosien poistaminen
• hallittu JavaScript ja ulkoiset skriptit
• optimoidut fontit
• toimiva mobiilinäkymä
• sivun tärkeimmän kuvan nopea latautuminen

Aloita suurimmista ongelmista, tee yksi muutos kerrallaan ja testaa vaikutus.

Kun sivusto latautuu nopeasti, kävijä löytää tarvitsemansa tiedon helpommin, verkkokaupan ostaminen tuntuu sujuvammalta ja sivuston ylläpito pysyy hallittavana.