Kuinka selvittää, mikä WordPress-lisäosa hidastaa sivustoa

WordPressin lisäosat tekevät sivustosta joustavan. Niillä voi lisätä verkkokaupan, yhteydenottolomakkeen, kuvagallerian, välimuistin, hakukoneoptimoinnin, varmuuskopioinnin ja paljon muuta.

Mutta hidastaako suuri lisäosamäärä aina sivustoa?

Ei välttämättä.

Lisäosien määrä ei yksin kerro, onko WordPress-sivusto hidas. Sivustolla voi olla useita hyvin tehtyjä ja kevyitä lisäosia ilman merkittävää vaikutusta nopeuteen. Toisaalta yksi lisäosa voi kuormittaa sivustoa paljon, jos se tekee raskaita tietokantakyselyitä, lataa suuria JavaScript- tai CSS-tiedostoja jokaisella sivulla, käyttää paljon muistia tai hakee jatkuvasti tietoa ulkoisesta palvelusta.

Tässä artikkelissa käydään läpi, miten voit selvittää, hidastaako jokin lisäosa juuri sinun WordPress-sivustoasi, ja mitä voit tehdä tilanteen korjaamiseksi.

Lisäosa ei ole aina sivuston hitauden syy

Ennen kuin syytät lisäosia, kannattaa ymmärtää, että WordPress-sivuston hitaus voi johtua monesta asiasta.

Yleisiä syitä ovat esimerkiksi:

• liian suuret kuvat
• hidas tai alimitoitettu webhotelli
• raskas WordPress-teema
• puuttuva sivuvälimuisti
• suuri määrä ulkoisia skriptejä ja upotuksia
• vanhentunut PHP-versio
• hitaat tietokantakyselyt
• liian suuri määrä automaattisesti ladattavia asetuksia
• verkkokaupan, jäsenalueen tai lomakejärjestelmän suuri kuormitus

WordPressin omissa suorituskykyohjeissa lisäosien vähentäminen ja ongelmallisten lisäosien valikoiva poistaminen käytöstä nostetaan yhdeksi tavaksi parantaa suorituskykyä, mutta lisäosat ovat vain yksi osa kokonaisuutta. (WordPress Developer Resources)

Esimerkiksi huonosti optimoitu kuvamateriaali voi hidastaa sivustoa paljon enemmän kuin tavallinen yhteydenottolomake. Vastaavasti nopea lisäosa voi tuntua hitaalta, jos webhotelli ei tarjoa riittävästi muistia, välimuistia tai suorittimen kapasiteettia.

Millainen lisäosa voi hidastaa sivustoa?

Lisäosa voi hidastaa sivustoa eri tavoilla.

Se voi esimerkiksi:

• tehdä paljon tietokantakyselyitä jokaisella sivulatauksella
• ladata JavaScriptiä tai CSS:ää kaikilla sivuilla, vaikka toimintoa tarvitaan vain yhdellä sivulla
• tehdä hitaita HTTP- tai API-kutsuja ulkoiseen palveluun
• lisätä paljon automaattisesti ladattavia asetuksia tietokantaan
• kasvattaa palvelimen muistinkäyttöä
• käyttää raskaita animaatioita, karttoja, videoita tai sosiaalisen median upotuksia
• olla ristiriidassa teeman tai toisen lisäosan kanssa
• olla vanhentunut tai huonosti ylläpidetty

Yleisiä esimerkkejä mahdollisesti kuormittavista lisäosista ovat verkkokauppa-, jäsenalue-, varauskalenteri-, analytiikka-, chat-, lomake-, varmuuskopio-, kuvagalleria- ja sosiaalisen median syötelisäosat.

Tämä ei tarkoita, että tällaisia lisäosia pitäisi välttää. Ne voivat olla sivuston kannalta välttämättömiä. Tarkoitus on selvittää, ovatko niiden asetukset, käyttö tai toteutus sivustollesi sopivia.

Aloita mittaamalla nykyinen tilanne

Ennen kuin muutat mitään, mittaa sivuston nopeus.

Testaa ainakin:

• etusivu
• tärkein palvelusivu
• yksi tavallinen artikkeli
• verkkokaupan tuotesivu, jos käytössä on WooCommerce
• ostoskori ja kassasivu, jos sivustolla on verkkokauppa
• yhteydenottosivu tai lomakesivu

Hyödyllisiä testityökaluja ovat esimerkiksi:

• Google PageSpeed Insights
• GTmetrix
• Lighthouse
• WebPageTest
• selaimen kehittäjätyökalujen Network-välilehti

Kirjaa ylös ainakin:

• sivun kokonaislatausaika
• sivun koko
• ladattujen tiedostojen määrä
• suurimmat JavaScript- ja CSS-tiedostot
• suurimmat kuvat
• Time to First Byte eli TTFB
• mahdolliset pitkään latautuvat ulkoiset pyynnöt

TTFB kertoo, kuinka nopeasti selain saa palvelimelta ensimmäisen tavun HTML-vastauksesta. Korkea TTFB voi viitata palvelin-, välimuisti-, PHP-, tietokanta- tai taustaprosessiongelmaan. Pelkkä korkea TTFB ei kuitenkaan kerro varmasti, mikä lisäosa on syyllinen.

Tarkista selaimen kehittäjätyökaluilla, mitä sivu lataa

Selaimen kehittäjätyökaluista saat nopeasti hyödyllistä tietoa.

Avaa sivu Chromessa, Firefoxissa tai Edgessä. Paina näppäimistöltä F12 ja avaa Network-välilehti. Lataa sivu uudelleen.

Näet listan kaikista sivun lataamista resursseista:

• kuvista
• JavaScript-tiedostoista
• CSS-tiedostoista
• fonteista
• iframe-upotuksista
• API-kutsuista
• mainos- ja seurantascripteistä

Jos tiedoston nimessä tai polussa näkyy lisäosan nimi, voit usein päätellä, mikä lisäosa sen lataa.

Esimerkiksi tällainen polku voi viitata tiettyyn lisäosaan:

/wp-content/plugins/esimerkkilisäosa/assets/js/script.js

Yksittäinen tiedosto ei silti vielä todista, että lisäosa on ongelma. Tarkista erityisesti:

• latautuuko tiedosto kaikilla sivuilla
• onko tiedosto poikkeuksellisen suuri
• kestääkö sen lataaminen pitkään
• aiheuttaako se JavaScript-virheitä
• ladataanko samankaltaisia kirjastoja useaan kertaan
• tekeekö lisäosa ulkoisia verkkopyyntöjä

Selaimen kehittäjätyökalut näyttävät hyvin sivun selaimessa lataamat resurssit, mutta ne eivät aina paljasta palvelinpuolella tehtäviä PHP- tai tietokantakyselyitä. Niiden selvittämiseen tarvitaan tarkempaa diagnostiikkaa.

Käytä Query Monitoria tarkempaan selvitykseen

Query Monitor on WordPressin kehittäjätyökalu, joka voi näyttää tietoa esimerkiksi tietokantakyselyistä, PHP-virheistä, HTTP API -kutsuista, ladatuista JavaScript- ja CSS-tiedostoista, hookeista sekä siitä, mikä lisäosa tai teema liittyy tiettyyn toimintaan. (WordPress.org)

Query Monitor voi auttaa tunnistamaan esimerkiksi:

• hitaat tietokantakyselyt
• paljon kyselyitä tekevät lisäosat
• PHP-varoitukset ja virheet
• hitaita ulkoisia API-kutsuja
• paljon muistia kuluttavat toiminnot
• lisäosan lataamat skriptit ja tyylitiedostot
• teeman tai lisäosan aiheuttamat virheet

Query Monitor sopii erityisesti silloin, kun haluat selvittää ongelmaa tarkemmin itse tai yhdessä kehittäjän kanssa.

Sitä ei kuitenkaan kannata jättää aktiiviseksi pysyvästi tuotantosivustolle, jos et tarvitse sitä jatkuvasti. Diagnostiikkatyökalun tehtävä on auttaa selvittämään ongelmaa, ei lisätä pysyvää kuormaa sivustolle.

Älä poista kaikkia lisäosia käytöstä julkiselta sivustolta

Monessa ohjeessa neuvotaan poistamaan kaikki lisäosat käytöstä ja ottamaan ne takaisin käyttöön yksi kerrallaan.

Menetelmä voi toimia, mutta sitä ei pidä tehdä sokkona julkisella sivustolla.

Jos poistat kaikki lisäosat käytöstä tuotantosivustolla, voit rikkoa esimerkiksi:

• yhteydenottolomakkeet
• verkkokaupan
• maksutavat
• jäsenalueen
• välimuistin
• SEO-asetukset
• evästebannerin
• tietoturvan
• varmuuskopioinnin
• kieliversiot
• sivunrakentajan toiminnot

Parempi vaihtoehto on tehdä testit staging-ympäristössä eli testikopiossa. Monet webhotellit tarjoavat staging-toiminnon, jossa voit kokeilla lisäosien poistamista tai asetusten muuttamista ilman, että muutos näkyy oikeille kävijöille.

Toinen vaihtoehto on käyttää WordPressin vianmääritystilaa. Troubleshooting Mode -lisäosa mahdollistaa lisäosien ja teeman testaamisen vain omassa istunnossasi siten, että muut kävijät näkevät edelleen normaalin sivuston. WordPress.org suosittelee staging-ympäristöä ensisijaisena ratkaisuna, mutta vianmääritystila voi olla hyödyllinen silloin, kun stagingia ei ole käytettävissä. (WordPress.org)

Näin testaat epäiltyä lisäosaa turvallisesti

Kun käytössä on staging-ympäristö tai vianmääritystila, testaa lisäosia järjestelmällisesti.

1. Ota lähtötilanne talteen

Testaa sama sivu ennen muutoksia.

Kirjaa esimerkiksi:

• latausaika
• TTFB
• sivun kokonaiskoko
• sivun pyynnöt
• JavaScript-tiedostojen määrä
• mahdolliset virheet
• PageSpeed- tai Lighthouse-tulos

Pidä testit mahdollisimman samanlaisina. Käytä samaa sivua, samaa testityökalua ja suunnilleen samaa testisijaintia.

2. Tyhjennä välimuisti tarvittaessa

Jos käytössä on välimuistilisäosa, palvelinvälimuisti tai CDN, testitulokset voivat näyttää vanhaa versiota sivusta.

Tyhjennä välimuisti ennen testejä silloin, kun muutat lisäosaa tai sen asetuksia.

Muista kuitenkin, että ensimmäinen välimuistin tyhjennyksen jälkeinen sivulataus voi olla hitaampi kuin seuraavat lataukset. Testaa siksi useampi kuin yksi lataus.

3. Poista epäilty lisäosa käytöstä

Poista käytöstä yksi lisäosa kerrallaan.

Testaa sen jälkeen sama sivu uudelleen. Jos nopeus paranee selvästi ja muutos toistuu useammassa testissä, lisäosa voi olla osa ongelmaa.

Jos nopeus ei muutu, lisäosa ei välttämättä ole syyllinen. Ongelma voi olla esimerkiksi teemassa, palvelimessa, tietokannassa, ulkoisissa upotuksissa tai välimuistiasetuksissa.

4. Ota lisäosa takaisin käyttöön

Aktivoi lisäosa uudelleen ja testaa sama sivu.

Jos hitaus palaa lisäosan käyttöönoton jälkeen, havainto on vahvempi. Tämä vähentää riskiä, että nopeuden muutos johtui sattumasta, välimuistista tai testityökalun hetkellisestä vaihtelusta.

5. Tarkista lisäosan asetukset

Lisäosa ei välttämättä ole ongelma kokonaan. Ongelmana voi olla jokin yksittäinen toiminto.

Tarkista esimerkiksi:

• ladataanko lisäosan JavaScript kaikilla sivuilla
• voiko lisäosan toimintoja ottaa pois käytöstä
• voiko kuvagallerian, kartan tai syötteen ladata vasta käyttäjän pyynnöstä
• onko lisäosassa oma välimuisti
• tekeekö lisäosa automaattisia ulkoisia kutsuja
• ladataanko paljon dataa sosiaalisesta mediasta
• voiko ominaisuuden rajata vain tietyille sivuille

Esimerkiksi yhteydenottolomakelisäosan ei tarvitse välttämättä ladata omaa JavaScriptiään jokaisella blogiartikkelilla. Vastaavasti Google Maps -karttaa ei tarvitse aina ladata etusivulla, jos kartta tarvitaan vain yhteydenottosivulla.

Miten toimia, jos lisäosa todella hidastaa sivustoa?

Kun olet tunnistanut ongelmallisen lisäosan, sinulla on useita vaihtoehtoja.

Päivitä lisäosa

Tarkista ensin, että käytössä on lisäosan uusin versio.

Päivitykset voivat korjata suorituskykyongelmia, yhteensopivuusvirheitä ja tietoturvahaavoittuvuuksia. WordPress suosittelee pitämään ytimen, teemat ja lisäosat ajan tasalla sekä suosimaan aktiivisesti ylläpidettyjä ratkaisuja. (WordPress Developer Resources)

Ota varmuuskopio ennen suurempia päivityksiä, erityisesti jos sivustolla on verkkokauppa, jäsenalue tai muita kriittisiä toimintoja.

Karsi lisäosan tarpeettomat ominaisuudet

Monissa lisäosissa on asetuksia, joita et tarvitse.

Voit ehkä poistaa käytöstä esimerkiksi:

• automaattisesti latautuvat sosiaalisen median syötteet
• ylimääräiset kuvakarusellit
• animaatiot
• kävijäseurannan lisätoiminnot
• tarpeettomat fontit
• lisäosan omat kuvakkeet
• ulkoiset API-kutsut
• automaattiset taustaskannaukset

Usein lisäosan perustoiminto voidaan säilyttää, vaikka raskaimmat ominaisuudet poistetaan käytöstä.

Etsi kevyempi vaihtoehto

Jos lisäosa on edelleen raskas, vanhentunut tai huonosti ylläpidetty, harkitse vaihtoehtoa.

Kun vertailet vaihtoehtoja, tarkista ainakin:

• onko lisäosaa päivitetty hiljattain
• tukeeko se nykyistä WordPress-versiota
• onko kehittäjä aktiivinen
• onko lisäosalla paljon asennuksia ja uskottavia arvioita
• tarvitseeko lisäosa ulkoista palvelua
• ladataanko sen resursseja kaikilla sivuilla
• voiko toimintoja ottaa valikoivasti käyttöön
• kerääkö lisäosa tarpeettomasti kävijä- tai sivustotietoja

WordPressin virallinen lisäosahakemisto on hyvä lähtöpaikka, mutta asennusmäärä ei yksin todista, että lisäosa sopii juuri sinun sivustollesi.

Poista lisäosa kokonaan

Jos lisäosalle ei ole todellista tarvetta, sen poistaminen on usein paras ratkaisu.

Lisäosan poistaminen käytöstä ei ole sama asia kuin poistaminen kokonaan. Käytöstä poistettu lisäosa ei yleensä suorita toimintojaan normaalisti, mutta se voi silti jäädä palvelimelle ja jättää tietokantaan asetuksia tai tauluja.

Poista lisäosa kokonaan, jos:

• et tarvitse sen toimintoa
• sille ei ole enää tukea
• se ei ole yhteensopiva nykyisen WordPress-version kanssa
• se aiheuttaa jatkuvia suorituskyky- tai tietoturvaongelmia
• sen voi korvata kevyemmällä ratkaisulla
• toiminto voidaan toteuttaa ilman lisäosaa

Tee aina varmuuskopio ennen poistamista, varsinkin jos lisäosa hallitsee esimerkiksi lomakkeita, verkkokauppaa, varauksia tai jäsenalueita.

Tarvitaanko yksi monitoimilisäosa vai useita pieniä lisäosia?

Tähän ei ole yhtä oikeaa vastausta.

Yksi hyvin tehty monitoimilisäosa voi olla hyvä ratkaisu, jos se korvaa useita päällekkäisiä lisäosia. Esimerkiksi SEO-lisäosa voi hoitaa title-otsikot, meta-kuvaukset, XML-sivukartan ja perus-schema-merkinnät samassa paketissa.

Toisaalta suuri monitoimilisäosa voi olla raskas, jos se lataa paljon toimintoja, joita et käytä.

Useampi pieni lisäosa voi olla hyvä ratkaisu, jos ne ovat kevyitä, hyvin ylläpidettyjä ja lataavat resursseja vain tarvittaessa.

Tärkeämpää kuin lisäosien määrä on kysyä:

Mitä tämä lisäosa tekee, millä sivuilla se toimii ja mitä se lataa kävijän selaimeen tai palvelimelle?

CSS- ja JavaScript-optimointi voi auttaa, mutta ei korjaa kaikkea

Joissakin tilanteissa lisäosien lataamia CSS- ja JavaScript-tiedostoja voidaan pienentää, viivästyttää tai ladata vain tietyillä sivuilla.

Tähän voidaan käyttää esimerkiksi välimuisti- tai optimointilisäosaa.

Kaikkia tiedostoja ei kuitenkaan kannata yhdistää yhdeksi suureksi tiedostoksi. HTTP/2- ja HTTP/3-ympäristöissä useiden pienempien tiedostojen lataaminen voi toimia hyvin, ja liian aggressiivinen yhdistäminen voi rikkoa sivuston toimintoja.

Tärkeämpää on:

• poistaa tarpeettomat resurssit
• ladata tiedosto vain siellä, missä sitä tarvitaan
• viivästyttää ei-kriittisiä skriptejä harkiten
• välttää turhia ulkoisia palveluja
• testata sivuston toiminta jokaisen muutoksen jälkeen

Välimuisti on WordPressin omien suorituskykyohjeiden mukaan yksi nopeimmista tavoista parantaa sivuston latautumista. Se ei kuitenkaan korjaa huonosti toteutettua lisäosaa, joka tekee raskasta työtä ennen kuin välimuisti voi auttaa. (WordPress Developer Resources)

Ennaltaehkäise lisäosaongelmia

Paras tapa välttää lisäosien aiheuttamia ongelmia on harkita uusia asennuksia etukäteen.

Ennen uuden lisäosan asentamista kysy:

• Tarvitsenko tätä oikeasti?
• Voiko nykyinen teema, WordPressin oma toiminto tai olemassa oleva lisäosa tehdä saman asian?
• Onko lisäosa aktiivisesti ylläpidetty?
• Onko sillä selkeä käyttötarkoitus?
• Tarvitseeko se ulkoisia palveluja tai API-avaimia?
• Lataako se JavaScriptiä ja CSS:ää koko sivustolla?
• Voiko toimintoja rajata vain tietyille sivuille?
• Miten lisäosa vaikuttaa tietosuojaan, evästeisiin ja kävijätietojen käsittelyyn?
• Miten lisäosan asetukset ja tiedot poistuvat, jos lopetan sen käytön?

Pidä myös säännöllisesti huolta näistä asioista:

• päivitä WordPress, teema ja lisäosat
• poista käyttämättömät lisäosat
• testaa suuret päivitykset staging-ympäristössä
• pidä toimiva varmuuskopiointi käytössä
• tarkista sivuston nopeus ennen ja jälkeen suurten muutosten
• seuraa WordPressin Työkalut → Sivuston kunto -näkymää

WordPressin Sivuston kunto -näkymä voi auttaa tunnistamaan esimerkiksi vanhentuneen PHP-version, tekniset huomautukset ja automaattisesti ladattavien asetusten määrään liittyviä ongelmia. (WordPress.org)

Yhteenveto

Lisäosat eivät automaattisesti tee WordPress-sivustosta hidasta.

Sivuston nopeuteen vaikuttavat myös teema, kuvat, webhotelli, välimuisti, tietokanta, PHP-versio, ulkoiset palvelut ja sivulla ladattava JavaScript.

Jos epäilet lisäosaa, älä arvaa. Mittaa sivusto ensin, testaa muutokset turvallisesti staging-ympäristössä tai vianmääritystilassa ja vertaa tuloksia samoilla sivuilla.

Hyvä toimintajärjestys on tämä:

1. Mittaa sivuston nykyinen nopeus.
2. Tarkista selaimen kehittäjätyökaluista suurimmat resurssit.
3. Selvitä Query Monitorilla hitaat kyselyt, virheet ja ulkoiset kutsut.
4. Testaa epäilty lisäosa staging-ympäristössä.
5. Tyhjennä välimuisti ja mittaa uudelleen.
6. Ota lisäosa takaisin käyttöön ja varmista, palaako ongelma.
7. Päivitä, säädä, korvaa tai poista lisäosa tarpeen mukaan.
8. Tarkista sivusto uudelleen puhelimella ja tietokoneella.

Huolellinen testaus auttaa löytämään todellisen ongelman ilman, että sivuston tärkeitä toimintoja poistetaan turhaan käytöstä.