WordPress-sivusto on hidas: todelliset syyt ja korjaukset

Miten mittaan, onko sivuni oikeasti hidas?

Avaa Googlen PageSpeed Insights ja syötä sivusi osoite. Tulossivulla on kaksi eri asiaa, jotka kannattaa erottaa toisistaan:

• Todellisten käyttäjien tiedot (Core Web Vitals) näkyvät vain, jos sivulla on tarpeeksi Chrome-käyttäjiä. Pienellä yrityssivulla niitä ei usein ole.
• Laboratoriotesti ja pistemäärä on yksi simuloitu lataus. Pisteet vaihtelevat ajosta toiseen, joten älä tuijota yksittäistä lukua.

Googlen mukaan sivu on hyvällä tasolla, kun nämä raja-arvot täyttyvät:

TTFB on tärkein yksittäinen vihje. Jos palvelimen vastaus vie yli sekunnin, vika on palvelimessa, lisäosissa tai tietokannassa, eikä kuvien pakkaaminen auta. Jos vastaus on nopea mutta sivu latautuu hitaasti, vika on siinä, mitä selaimelle lähetetään. Testaa myös, onko WordPressin hallintapaneeli hidas. Hidas hallintapaneeli viittaa lähes aina palvelimeen tai lisäosiin.

APalvelin vastaa hitaasti

Odotus palvelimelta

Vika on palvelimessa, lisäosissa tai tietokannassa. Kuvien pakkaaminen ei auta.

BPalvelin vastaa nopeasti, sivu silti hidas

Kuvat, skriptit ja fontit

Vika on siinä, mitä selaimelle lähetetään: kuvat, lisäosien skriptit ja ulkoiset palvelut.

Odotus palvelimelta (TTFB)Lataus selaimeenTTFB:n hyvä raja 0,8 s

Mitkä ovat WordPressin hitauden yleisimmät syyt?

01Liian suuret kuvat

Puhelimella otettu kuva on helposti 4–6 megatavua. Jos se ladataan sivulle sellaisenaan ja teema näyttää sen täysikokoisena, yksi kuva voi painaa enemmän kuin koko muu sivu. Pienennä kuvat ennen lataamista noin 2 000 pikselin levyisiksi, pakkaa ne ja käytä WebP-muotoa, jota WordPress tukee. Laiska lataus on WordPressissä oletuksena päällä, mutta sivun yläosan pääkuvan pitää latautua heti. Sitä ei kannata viivästää.

02Lisäosat ja sivurakentaja

Lisäosien määrä ei yksinään kerro paljon. Ratkaisevaa on, mitä ne tekevät. Raskaimpia ovat lisäosat, jotka lataavat omat tyyli- ja skriptitiedostonsa jokaiselle sivulle, vaikka niitä tarvittaisiin vain yhdellä: liukukuvat, sivurakentajien lisäpaketit, somesyötteet ja chat-ikkunat. Hallintapuolen hitauden syyn näkee Query Monitor -lisäosalla, joka näyttää, mikä lisäosa tekee eniten tietokantakyselyjä. Poista lisäosat, joita et käytä ja korvaa raskaat kevyemmillä.

03Ulkoiset skriptit

Upotettu Google-kartta, YouTube-video, chat, mainosseuranta ja ulkoiset fontit hakevat jokainen tiedostoja muilta palvelimilta. Kartan ja videon voi korvata kuvalla, joka avaa varsinaisen upotuksen vasta klikkauksesta. Ylimääräiset seurantakoodit kannattaa poistaa kokonaan.

04Puuttuva välimuisti

Ilman välimuistia WordPress rakentaa jokaisen sivun uudelleen jokaiselle kävijälle. Sivuvälimuisti tallentaa valmiin sivun ja nopeuttaa palvelimen vastausta selvästi. Käytä vain yhtä välimuistilisäosaa kerrallaan. Jos webhotellissa on LiteSpeed-palvelin, sen oma LiteSpeed Cache -lisäosa on yleensä luonteva valinta. Testaa välimuistin käyttöönoton jälkeen lomakkeet, koska välimuisti voi rikkoa ne.

05Palvelin, PHP ja tietokanta

Halvimmissa webhotelleissa sama palvelin jaetaan suuren asiakasmäärän kesken ja se näkyy hitaana vastauksena. Vanha PHP-versio hidastaa ja on tietoturvariski. Katso PHP 8.2:n tuki päättyy. Tietokantaan kertyy vuosien mittaan tallennettuja versioita, väliaikaisia tietoja ja poistettujen lisäosien jäämiä. WordPressin Sivuston eheys -työkalu (Työkalut → Sivuston eheys) varoittaa osasta näistä ongelmista.

Missä järjestyksessä korjaan hitaan sivun?

1. Varmuuskopio. Nopeutus koskee lisäosiin ja asetuksiin ja niiden muutos voi rikkoa jotain.
2. Kirjaa lähtötaso. Mittaa etusivu, tärkein palvelusivu ja yhteystietosivu puhelinnäkymässä. Kirjoita ylös LCP ja TTFB.
3. Kuvat. Pienennä ja pakkaa suurimmat. Tämä vaihe tuo usein suurimman hyödyn pienimmällä riskillä.
4. Lisäosat. Poista käyttämättömät ja korvaa raskaat. Päivitä loput, mutta yksi kerrallaan. Jos päivitys rikkoo sivun, katso WordPress-päivitys rikkoi sivun.
5. Välimuisti ja sen jälkeen testiviesti jokaisesta lomakkeesta.
6. PHP-versio tuettuun versioon. Jos TTFB on edelleen huono, kysy webhotellilta tai harkitse vaihtoa.
7. Mittaa uudestaan samoilta sivuilta ja vertaa lähtötasoon.

Jos hallintapaneeli on niin hidas, että kirjautuminen aikakatkaistaan tai näet valkoisen ruudun, aloita artikkelista WordPress-kirjautuminen ei onnistu. Yleisemmin nopeuden merkityksestä yritykselle kerron artikkelissa verkkosivujen nopeus.

Mitä kannattaa välttää?

• Monta optimointilisäosaa yhtä aikaa. Kaksi välimuistia tai kaksi kuvien pakkaajaa tekevät samaa työtä päällekkäin ja rikkovat helposti toistensa asetukset.
• Kaikki asetukset kerralla päälle. Skriptien viivästys ja tiedostojen yhdistäminen voivat parantaa pisteitä, mutta rikkoa valikon, lomakkeen tai evästebannerin. Kytke asetukset päälle yksi kerrallaan ja testaa sivu jokaisen jälkeen.
• Webhotellin vaihto ennen mittausta. Jos palvelin vastaa jo nopeasti, uusi webhotelli ei korjaa raskaita kuvia tai lisäosia.
• Pisteiden jahtaaminen kävijöiden kustannuksella. Chat-ikkunan tai kartan voi poistaa pisteiden takia, mutta ensin kannattaa miettiä, tuoko se yhteydenottoja.

Milloin nopeutus ei enää riitä?

Joskus sivu on rakennettu niin, että jokainen korjaus on paikkaus. Esimerkiksi raskas teema, sivurakentaja ja kymmeniä lisäosia, joista osa on hylättyjä. Silloin nopeutukseen voi kulua enemmän rahaa kuin hyötyä tulee. Kerron sen suoraan arvion yhteydessä ja silloin uusi, kevyempi sivu voi olla järkevämpi vaihtoehto. Useimmiten kuvat, lisäosien karsinta ja välimuisti riittävät.

Lähteet

1. web.dev: Web Vitals. https://web.dev/articles/vitals
2. web.dev: Time to First Byte (TTFB). https://web.dev/articles/ttfb
3. web.dev: Browser-level image lazy loading for the web. https://web.dev/articles/browser-level-image-lazy-loading
4. Google Search Central: Understanding Core Web Vitals and Google search results. https://developers.google.com/search/docs/appearance/core-web-vitals
5. PageSpeed Insights. https://pagespeed.web.dev/
6. WordPress Advanced Administration: Optimization. https://developer.wordpress.org/advanced-administration/performance/optimization/
7. WordPress Advanced Administration: Cache. https://developer.wordpress.org/advanced-administration/performance/cache/
8. Query Monitor, WordPress.org. https://wordpress.org/plugins/query-monitor/
9. PHP: Supported Versions. https://www.php.net/supported-versions.php