12 yleistä syytä ja ratkaisut WordPress-sivuston hidastumiseen

Onko WordPress-sivustosi alkanut tuntua tahmealta? Latautuvatko sivut hitaasti, näkyvätkö kuvat viiveellä tai kestääkö hallintapaneelin käyttö aiempaa kauemmin?

WordPress-sivuston hitaus johtuu harvoin vain yhdestä asiasta. Tavallisesti kyse on usean tekijän yhdistelmästä: liian suurista kuvista, raskaasta teemasta, kuormittavista lisäosista, puuttuvasta välimuistista, hitaasta webhotellista tai ulkoisista palveluista, jotka latautuvat sivun mukana.

Hyvä uutinen on, että useimmat ongelmat voidaan tunnistaa ja korjata ilman suurta teknistä remonttia. Tässä artikkelissa käydään läpi 12 tavallisinta syytä, miksi WordPress-sivusto hidastuu, sekä käytännön keinot tilanteen parantamiseen.

1. Kuvat ovat liian suuria tai väärässä muodossa

Kuvat ovat yksi yleisimmistä WordPress-sivuston hitauden syistä. Kamerasta, puhelimesta tai kuvapankista ladattu alkuperäinen tiedosto voi olla moninkertaisesti suurempi kuin sivustolla tarvitaan.

Jos esimerkiksi artikkelissa näkyvä kuva on enintään 900 pikseliä leveä, 5000 pikseliä leveän alkuperäiskuvan lataaminen on yleensä turhaa. Selain joutuu lataamaan suuren tiedoston ja pienentämään sen näytölle sopivaksi.

Kuvien optimoinnissa kannattaa kiinnittää huomiota kolmeen asiaan:

• kuvan mittoihin
• tiedostomuotoon
• tiedostokokoon

Valokuvat kannattaa tallentaa yleensä JPEG-, WebP- tai AVIF-muotoon. PNG sopii paremmin logoihin, kuvakkeisiin ja grafiikkaan, jossa tarvitaan läpinäkyvyyttä tai tarkkoja reunoja.

WordPress luo Mediakirjastoon lisätyistä kuvista useita eri kokoversioita. Selain voi valita srcset– ja sizes-attribuuttien avulla laitteelle sopivimman kuvan, kun kuvat lisätään WordPressin omilla työkaluilla. (WordPress Developer Resources)

Kuvien optimointiin voit käyttää esimerkiksi:

• kuvankäsittelyohjelmaa ennen lataamista
• kuvien pakkauspalvelua
• WordPress-lisäosaa, kuten Imagifyä, EWWW Image Optimizeria, ShortPixeliä tai Smushia
• WebP- tai AVIF-muunnosta tukevaa optimointipalvelua

Tarkista aina lopputulos. Liian voimakas pakkaus voi tehdä kuvasta epätarkan tai aiheuttaa häiritseviä pakkausjälkiä.

2. Webhotelli ei vastaa sivuston tarpeita

Webhotelli on WordPress-sivuston perusta. Vaikka teema, kuvat ja lisäosat olisivat kunnossa, hidas tai liian pienillä resursseilla toimiva palvelin voi tehdä sivustosta tahmean.

Halvin mahdollinen jaettu webhotelli voi riittää pienelle sivustolle, mutta ongelmia voi syntyä, jos:

• sivustolla on paljon kävijöitä samanaikaisesti
• käytössä on verkkokauppa
• sivustolla on paljon tuotteita, lomakkeita tai jäsenalueita
• tietokanta on suuri
• palvelin jakaa resursseja liian monen muun sivuston kanssa
• PHP-, välimuisti- tai tietokanta-asetukset ovat puutteelliset

Webhotellia valitessa kannattaa tarkistaa ainakin:

• käytössä oleva PHP-versio
• palvelimen sijainti suhteessa kävijöihin
• palvelinpuolen välimuisti
• mahdollinen Redis- tai objektivälimuistituki
• CDN-yhteensopivuus
• varmuuskopiointi
• teknisen tuen laatu

Jos suurin osa kävijöistä on Suomessa, palvelin Suomessa tai lähialueella voi pienentää viivettä. Vielä tärkeämpää on kuitenkin se, että palvelinympäristö on hyvin ylläpidetty ja sivustolle sopivasti mitoitettu.

CDN-palvelu voi auttaa erityisesti silloin, kun kävijöitä on eri maista. CDN tallentaa staattisia tiedostoja, kuten kuvia, CSS-tiedostoja ja JavaScriptiä, palvelimille lähempänä käyttäjää. (web.dev)

3. Teema on liian raskas

WordPress-teema ei ole vain sivuston ulkoasu. Se määrittää myös, kuinka paljon CSS:ää, JavaScriptiä, fontteja, animaatioita ja muita resursseja sivuilla ladataan.

Raskas teema voi sisältää esimerkiksi:

• paljon valmiita animaatioita
• useita eri fontteja ja fonttipainoja
• suuria sivunrakentajakirjastoja
• tarpeettomia kuvakaruselleja
• useita ikonikirjastoja
• ominaisuuksia, joita et käytä koskaan
• JavaScriptiä jokaisella sivulla, vaikka toiminto näkyisi vain yhdellä sivulla

Kaikki monipuoliset teemat eivät ole automaattisesti huonoja. Ongelmia syntyy silloin, kun sivusto lataa paljon sellaista koodia, jota kävijä ei tarvitse.

Jos epäilet teeman olevan hidas, voit kokeilla tilapäisesti kevyttä oletusteemaa testiympäristössä. Jos sivusto nopeutuu selvästi, nykyisessä teemassa tai sen asetuksissa voi olla ongelma.

Kevyiksi ja suosituiksi tunnettuja WordPress-teemoja ovat esimerkiksi:

• GeneratePress
• Kadence
• Astra
• Blocksy
• WordPressin oletusteemat
• hyvin toteutetut lohkoteemat

Teeman vaihtaminen kannattaa tehdä hallitusti. Testaa uusi teema ensin testiympäristössä tai tee varmuuskopio ennen suuria muutoksia.

4. Lisäosia on liikaa tai jokin niistä kuormittaa sivustoa

Lisäosien määrä ei yksin kerro, onko WordPress-sivusto hidas. Sivustolla voi olla kymmeniä kevyitä ja hyvin tehtyjä lisäosia ilman suuria ongelmia. Toisaalta yksi huonosti toteutettu lisäosa voi hidastaa sivustoa merkittävästi.

Lisäosa voi kuormittaa sivustoa esimerkiksi silloin, kun se:

• tekee raskaita tietokantakyselyitä jokaisella sivulatauksella
• lataa suuren JavaScript- tai CSS-tiedoston kaikilla sivuilla
• tarkistaa ulkoista palvelua jatkuvasti
• käyttää paljon palvelimen muistia tai suorittimen aikaa
• lisää tarpeettomia taustaprosesseja
• tekee paljon automaattisia API-kutsuja
• ei ole yhteensopiva muun teeman tai lisäosan kanssa

WordPressin omissa suorituskykyohjeissa suositellaan käymään lisäosat läpi, poistamaan tarpeettomat lisäosat ja testaamaan epäiltyjen lisäosien vaikutusta. (WordPress Developer Resources)

Tee lisäosakatsaus näin:

1. Kirjaa ylös sivuston nopeus ennen muutoksia.
2. Poista käytöstä yksi epäilty lisäosa kerrallaan.
3. Testaa sivuston nopeus ja toiminnot uudelleen.
4. Tarkista, muuttuuko palvelimen kuormitus tai sivun lataus.
5. Korvaa ongelmallinen lisäosa kevyemmällä vaihtoehdolla, jos mahdollista.

Älä jätä käyttämättömiä lisäosia vain pois käytöstä. Jos et tarvitse niitä, poista ne kokonaan. Tämä vähentää tietoturvariskiä ja helpottaa sivuston ylläpitoa.

5. Tietokanta on kasvanut tai tietokantakyselyt ovat hitaita

WordPress tallentaa sivujen, artikkeleiden, asetusten, kommenttien, tuotteiden ja käyttäjätietojen tiedot tietokantaan.

Tietokanta voi kasvaa ajan mittaan esimerkiksi seuraavista syistä:

• paljon artikkelien vanhoja versioita
• roskapostikommentit
• poistettujen lisäosien jättämät asetukset
• vanhat luonnokset
• WooCommerce-tuotteet ja tilaukset
• lomakevastaukset
• välimuistitaulut
• lokitiedot
• automaattisesti tallennetut tiedot

Pelkkä suuri tietokanta ei aina tee sivustosta hidasta. Ongelma syntyy yleensä silloin, kun tietokantakyselyt ovat tehottomia, tietoa on paljon tai lisäosa tekee raskaita kyselyitä jokaisella sivulatauksella.

Tietokannan siivoukseen voi käyttää esimerkiksi WP-Optimizea tai Advanced Database Cleaneria. Ole kuitenkin varovainen: älä poista tietoja, joiden tarkoitusta et tiedä.

Varmuuskopioi sivusto aina ennen tietokannan puhdistamista.

Artikkelien versioiden määrää voi tarvittaessa rajoittaa wp-config.php-tiedostossa, mutta tavallisella sivustolla tämä ei yleensä ole ensimmäinen nopeusongelma, johon kannattaa tarttua. Kuvien optimointi, välimuisti ja raskaat lisäosat tuovat usein näkyvämpiä hyötyjä.

6. PHP-versio tai PHP-asetukset eivät ole kunnossa

WordPress toimii PHP-ohjelmointikielellä. Jos sivusto käyttää vanhaa PHP-versiota, suorituskyky, yhteensopivuus ja tietoturva voivat heikentyä.

Tarkista webhotellin hallinnasta:

• mitä PHP-versiota sivusto käyttää
• onko PHP-versio edelleen tuettu
• onko OPCache käytössä
• onko muistiraja sivustolle riittävä
• näkyykö palvelimen virhelokeissa virheitä

OPCache tallentaa PHP-koodin valmiiksi käsiteltynä palvelimen muistiin. Näin palvelimen ei tarvitse tulkita samoja PHP-tiedostoja alusta jokaisella sivulatauksella.

Useimmilla laadukkailla webhotelleilla OPCache on käytössä oletuksena, mutta asia kannattaa tarkistaa.

Älä päivitä PHP-versiota suoraan tuotantosivustolla ilman varmuuskopiota. Vanhat lisäosat tai teemat voivat aiheuttaa virheitä uuden PHP-version kanssa. Testaa sivusto aina päivityksen jälkeen.

7. Sivustolta puuttuu toimiva välimuisti

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

WordPress rakentaa sivun normaalisti dynaamisesti: palvelin hakee tietoja tietokannasta, suorittaa PHP-koodia, käyttää teemaa ja lisäosia sekä muodostaa lopuksi HTML-sivun selaimelle.

Sivuvälimuisti voi tallentaa tästä valmiin HTML-version. Seuraavalla käynnillä palvelin voi näyttää kävijälle valmiin sivun sen sijaan, että se rakentaisi kaiken uudelleen.

WordPressin dokumentaatio kuvaa välimuistin yhdeksi nopeimmista tavoista parantaa suorituskykyä. (WordPress Developer Resources)

WordPress-sivustolla voi olla useita välimuistikerroksia:

• selaimen välimuisti
• sivuvälimuisti
• palvelinpuolen välimuisti
• objektivälimuisti, kuten Redis tai Memcached
• CDN-välimuisti
• PHP OPCache

Yleisiä WordPress-välimuistilisäosia ovat esimerkiksi:

• LiteSpeed Cache
• WP Super Cache
• W3 Total Cache
• Cache Enabler
• WP Rocket

Paras ratkaisu riippuu webhotellista. Jos palvelin käyttää LiteSpeediä, LiteSpeed Cache voi olla hyvä vaihtoehto. Jos webhotelli tarjoaa oman välimuistiratkaisun, sitä kannattaa yleensä käyttää ennen uuden lisäosan asentamista.

Verkkokaupoissa, jäsenalueilla ja kirjautuneiden käyttäjien sivuilla välimuisti pitää määrittää huolellisesti. Esimerkiksi ostoskoria, kassaa tai käyttäjäkohtaista sisältöä ei saa välimuistittaa samalla tavalla kuin tavallista artikkelisivua.

8. Animaatioita, efektejä ja lazy loadingia käytetään väärin

Animaatiot, kuvakarusellit, taustavideot ja vieritysefektit voivat näyttää näyttäviltä, mutta ne voivat myös lisätä selaimen kuormitusta.

Erityisesti mobiililaitteilla ongelmia voivat aiheuttaa:

• jatkuvasti liikkuvat taustaelementit
• raskaat videotaustat
• useat kuvakarusellit
• parallax-efektit
• JavaScript-pohjaiset animaatiot
• liian monta samaan aikaan käynnistyvää tehostetta

Lazy loading ei tarkoita latausanimaatiota. Se tarkoittaa sitä, että sivun alempana olevat kuvat ja iframe-upotukset ladataan vasta, kun kävijä vierittää lähelle niitä.

Lazy loading voi nopeuttaa sivun ensimmäistä latausta, mutta sitä ei pitäisi käyttää sivun tärkeimmässä yläosan kuvassa. Hero-kuva tai ensimmäinen suuri sisältökuva voi latautua liian myöhään, jos se asetetaan lazy load -tilaan.

WordPressin latausoptimoinnin logiikka voi lisätä kuville muun muassa loading="lazy", fetchpriority="high" ja decoding="async" -attribuutteja tilanteen mukaan. (WordPress Developer Resources)

Tarkista ainakin nämä asiat:

• latautuuko hero-kuva heti
• ovatko pitkän sivun alemmat kuvat lazy load -tilassa
• näkyykö sivulla liikaa animaatioita
• toimivatko efektit järkevästi puhelimella
• tarvitseeko sivulla todella olla taustavideoita tai automaattisesti pyöriviä karuselleja

9. Ulkoiset skriptit ja upotukset viivästyttävät sivua

Tavallinen ulkoinen linkki ei hidasta omaa sivuasi. Linkki ei lataa kohdesivua ennen kuin kävijä klikkaa sitä.

Sen sijaan ulkoiset skriptit, fontit, mainokset, videot, seuranta- ja chatpalvelut voivat vaikuttaa latausnopeuteen, koska ne lataavat tiedostoja jo silloin, kun oma sivusi avautuu.

Tyypillisiä ulkoisia kuormittajia ovat:

• YouTube- ja Vimeo-upotukset
• Google Maps -kartat
• Facebook-, Instagram- ja TikTok-upotukset
• mainosverkostot
• chat-palvelut
• kävijäseuranta
• ulkoiset fonttipalvelut
• varauskalenterit
• arvostelupalveluiden widgetit
• sosiaalisen median jakopainikkeet

YouTube-video kannattaa usein ladata vasta, kun kävijä painaa videon esikatselukuvaa. Tämä vähentää sivun alkuperäisiä verkkopyyntöjä.

Google Maps -kartta voidaan usein korvata kevyellä kuvalla tai painikkeella, joka avaa kartan vasta käyttäjän pyynnöstä.

Jos sivustolla on paljon ulkoisia palveluja, tarkista selaimen kehittäjätyökaluista verkkopyynnöt. Näet, mitkä palvelut lataavat eniten tiedostoja ja kestävät pisimpään.

TTFB eli Time To First Byte kertoo, kuinka nopeasti selain saa palvelimelta ensimmäisen tavun HTML-vastauksesta. Korkea TTFB voi viitata palvelin-, välimuisti-, PHP- tai tietokantaongelmaan. Selaimen myöhemmin lataamat ulkoiset skriptit eivät yleensä suoraan selitä korkeaa TTFB-arvoa, vaikka ne voivat hidastaa sivun kokonaislatausta.

10. JavaScript estää sivun piirtymisen

JavaScript voi tehdä sivustosta toimivan ja näyttävän, mutta liiallinen tai väärin ladattu JavaScript voi viivästyttää sisällön näkymistä.

Ongelmallista JavaScriptiä voi syntyä esimerkiksi:

• sivunrakentajista
• analytiikka- ja markkinointipalveluista
• chat- ja varauswidgeteistä
• kuvakaruselleista
• lomakkeista
• verkkokaupan lisäosista
• sosiaalisen median upotuksista
• tarpeettomista teemaominaisuuksista

JavaScriptin osalta tärkeintä ei ole pelkästään tiedostojen määrä. HTTP/2 mahdollistaa useiden pyyntöjen käsittelyn samalla yhteydellä, joten kaikkien JavaScript-tiedostojen yhdistäminen yhdeksi jättitiedostoksi ei ole enää automaattisesti paras ratkaisu. (web.dev)

Parempi lähtökohta on:

• poista tarpeettomat skriptit
• lataa skripti vain niillä sivuilla, joilla sitä tarvitaan
• viivästytä ei-kriittisiä skriptejä tarvittaessa
• tarkista, rikkovatko optimointiasetukset lomakkeita, valikoita tai verkkokauppaa
• seuraa todellisia vaikutuksia PageSpeed Insightsilla tai selaimen verkkopyyntönäkymässä

defer-attribuutti lataa ulkoisen JavaScript-tiedoston sivun HTML:n käsittelyn rinnalla, mutta suorittaa sen vasta HTML:n jäsentämisen jälkeen. async taas suorittaa skriptin heti, kun se valmistuu lataamaan, eikä suoritusjärjestystä muiden skriptien kanssa taata. (MDN Web Docs)

Siksi JavaScriptin viivästystä tai asynkronista latausta ei pidä ottaa käyttöön kaikille tiedostoille yhdellä kertaa. Testaa sivusto aina muutoksen jälkeen.

11. Palvelin käyttää vanhaa verkkoprotokollaa

HTTP/2 ja HTTP/3 voivat parantaa sivuston lataamista verrattuna vanhempaan HTTP/1.1-protokollaan.

HTTP/2 mahdollistaa useiden resurssien siirtämisen saman yhteyden kautta tehokkaammin kuin HTTP/1.1. HTTP/3 käyttää QUIC-protokollaa ja voi hyödyttää erityisesti mobiili- tai epävakaissa verkkoyhteyksissä. (web.dev)

Tämä ei kuitenkaan ole ensimmäinen asia, johon hitaalla WordPress-sivustolla kannattaa keskittyä. Yleensä suuremmat hyödyt tulevat kuvien optimoinnista, välimuistista, lisäosien karsimisesta ja ulkoisten skriptien vähentämisestä.

Tarkista webhotellilta tai CDN-palvelusta:

• tukeeko palvelin HTTP/2:ta
• tukeeko se HTTP/3:a
• onko HTTPS käytössä
• onko CDN-palvelussa HTTP/3-tuki
• onko välimuisti määritetty oikein

HTTP/2 Server Pushia ei kannata enää pitää nopeutuskeinona. Chrome poisti sen käytöstä oletuksena jo vuonna 2022, koska siitä ei ollut käytännössä riittävää hyötyä ja se saattoi aiheuttaa tarpeettomia latauksia. (Chrome for Developers)

12. Sosiaalisen median painikkeet, fontit ja muut pienet lisät kuormittavat yhdessä

Yksittäinen sosiaalisen median jakopainike tai ulkoinen fontti ei välttämättä aiheuta suurta ongelmaa. Kun pieniä lisäyksiä kertyy paljon, niiden yhteisvaikutus voi kuitenkin olla merkittävä.

Sivustolla voi olla samanaikaisesti esimerkiksi:

• Google Fonts -fontteja useilla painoilla
• Font Awesome- tai muita ikonikirjastoja
• Facebook Pixel
• Google Tag Manager
• Google Analytics
• evästebanneri
• chat-palvelu
• Instagram-upotus
• YouTube-upotus
• kartta
• arvosteluwidget
• sosiaalisen median jakopainikkeet
• useita lomakkeita tai uutiskirjepalveluja

Kaikkia näitä ei tarvitse poistaa. Tarkoitus on selvittää, tuoko jokainen lisäys aidosti hyötyä kävijälle tai liiketoiminnalle.

Hyvä kysymys on:

Tarvitseeko tämä toiminto latautua jokaisella sivulla ja jokaiselle kävijälle?

Esimerkiksi yhteydenottosivulla kartta voi olla hyödyllinen. Blogiartikkelissa se voi olla täysin tarpeeton.

Samoin chat-palvelu voi olla hyödyllinen verkkokaupassa, mutta pienellä palvelusivustolla yhteydenottolomake tai selkeä puhelinnumero voi riittää.

Näin selvität, mikä WordPress-sivustoasi hidastaa

Nopeusongelmia ei kannata ratkaista arvaamalla. Testaa sivusto ennen muutoksia ja niiden jälkeen.

Hyödyllisiä työkaluja ovat esimerkiksi:

• Google PageSpeed Insights
• Lighthouse
• GTmetrix
• WebPageTest
• selaimen kehittäjätyökalujen Network-välilehti
• WordPressin Sivuston kunto -toiminto
• palvelimen virhelokit
• webhotellin suorituskykyraportit

Aloita tärkeimmistä sivuista:

• etusivu
• palvelusivut
• suosituimmat artikkelit
• verkkokaupan tuotesivut
• ostoskori ja kassa
• yhteydenottosivu

Älä tavoittele täydellistä pistemäärää vain testityökalun vuoksi. Tärkeämpää on, että sivusto avautuu nopeasti oikeille kävijöille, sisältö näkyy ilman häiritsevää viivettä ja tärkeät toiminnot toimivat luotettavasti.

Käytännön toimintajärjestys

Jos WordPress-sivusto on hidas, etene tässä järjestyksessä:

1. Optimoi suurimmat kuvat.
2. Tarkista, että sivuvälimuisti toimii.
3. Karsi tarpeettomat lisäosat.
4. Selvitä, lataako teema tarpeettomia ominaisuuksia.
5. Tarkista ulkoiset skriptit, upotukset ja fontit.
6. Varmista, että PHP-versio ja OPCache ovat kunnossa.
7. Testaa sivusto puhelimella.
8. Tarkista, tarvitsetko CDN-palvelua.
9. Tutki tietokantaa ja hitaita lisäosia, jos ongelma jatkuu.
10. Harkitse webhotellin vaihtamista, jos palvelin on jatkuvasti pullonkaula.

Yhteenveto

WordPress-sivuston hitaus johtuu tavallisesti kuvista, lisäosista, teemasta, puuttuvasta välimuistista, palvelinympäristöstä tai liian monista ulkoisista palveluista.

Nopein ja järkevin tapa parantaa sivustoa on aloittaa suurimmista ongelmista: kuvista, välimuistista ja tarpeettomista lisäosista. Sen jälkeen kannattaa tutkia teemaa, JavaScriptiä, ulkoisia upotuksia ja webhotellin suorituskykyä.

Kun sivusto latautuu nopeasti, se tuntuu paremmalta käyttää, toimii sujuvammin mobiilissa ja antaa kävijälle paremman ensivaikutelman.