Latautuuko wordpress sivustosi hitaasti?

WordPress latausnopeuden parantaminen aloitetaan tekemällä latausnopeus testi, itse suosittelen googlen pagespeed insights ja webpagetest palvelua, googlen oma latausnopeus testi on suoraan rinnastettavissa siihen kuinka hyvin kotisivusi on hakukoneoptimoitu. Webpagetest mittaa taas paremmin latautumiseen kuluvaa aikaa (eli milloin kävijä näkee ensimmäisen kerran wordpress sivustoltasi sisältöä ja milloin wordpress sivustosi on ladattu kokonaan tätä kutsutaan myös waterfalliksi eli vesiputoukseksi. Vesiputousta katsottessa tulisi kiinnittää huomiota että kaikki resurssit ladataan kerralla, tällöin webhotellissasi on käytössä HTTP/2 tai HTTP/3 protokolla. Perinteinen HTTP protokolla lataa yhden resurssin kerrallaan kun taas HTTP/2 ja HTTP/3 protokollat lataavat useamman resurssin samanaikaisesti.

Kokeile tällä työkalulla onko kotisivusi HTTP/2 protokollan takana vai ei, jos ei ole suosittelen vaihtamaan webhotellia. Tässä meidän webhotellit.

AXN Data Oy:n blogi esimerkkinä tälle kirjoitukselle, tarkoituksena on nopeuttaa blogimme latautumista muutamalla ilmaisella wordpress lisäosalla.

Wordpress latausnopeuden parantaminen

Vasemmalla mobiilin latautuminen ja oikealla tietokoneen latautuminen. Eli tästä lähdetään nostamaan tulosta (huom katso artikkelin kuvasta kokonaisuudessaan lähtökohta)

Ensimmäiseksi esittelen teille lisäosat joilla me parannamme latausnopeuksia omassa blogissamme:

  1. Autoptimize
  2. Speed booster pack
  3. webP express
  4. A3 Laxy load

Autoptimize lisäosan avulla saat pakattua CSS, Java ja HTML tiedostot pienemmäksi. Lisäksi voit määrittää ladataanko CSS ja Javascriptit header osiossa vai vasta footer osiossa.

Autooptimize asetukset

Autoptimizen asetuksista laita päälle CSS, JS ja HTML optimointi (älä vielä säädä asetuksia, tee ensiksi nopeustesti ja katso vaikuttaako se latausnopeuteen)

Wordpress latausnopeuden parantaminen osa 1

Muutos oli hieman pieni tässäkohtaan, mutta jatketaan seuraavaan lisäosaan. Speed booster pack. Tämän lisäosan avulla voit ottaa pois käytöstä wordpressin omia asetuksia jotka hidastavat sivuston latautumista.

Speed booster pack asetukset

Laitan asetukset näin ja tehdäänpä seuraavaksi uusi testi pagespeed insightissa. Tässäkohtaa kannattaa myös seurata miltä kotisivu näyttää, jos kotisivu hajoaa niin ota aina yksi asetus kerrallaan pois ja katso auttaako se kotisivun latautumiseen oikein vai ei.

wordpress latausnopeuden parantaminen

Tässä tulos, odotetusti mobiili puolella latausnopeus putosi pykälän alas ja tietokone puolella pykälän ylös. Siirytään seuraavaan lisäosaan jonka avulla kuvat tarjoillaa webp muodossa kävijöille, jos kävijän selain ei tue webp kuvia näytetään hänelle kuvat normaali muodossa.

webp express asetukset

Ensimmäiseksi asetuksissa Alter HTML kohdasta <img> tagi kannattaa muuttaa <picture> tagiksi ja laittaa tuo java script filu lataamaan kuvia. Tämän jälkeen tehdään bulk convert ja muunnetaan kaikki kuvat webp muotoon (voit määrittää kuvan laadun hieman ylempänä asetuksissa) kun olet saanut kuvat muunnettua klikkaa oikeassa yläkulmassa  ”Save settings and force news .htacces rules” tällöin kuvat latautuvat oikeasti webp muodossa eikä tavallisina .jpg tai .png muotoisina.

Wordpress latausnopeuden parannus

Nyt siirytään tekemään testi pagespeed insights puolelle ja katsotaan miten kävi (kuvat ovat isoin wordpressiä hidastava tekijä, itseasiassa kuvat hidastaa kotisivua aina vaikka ne olisi pienennetty) Tulos ei ollut vieläkään odetettu joten meidän pitää jatkaa nopeus optimointia.

Seuraavaksi ladataan ja otetaan käyttöön A3 lazy load joka lataa kuvat, videot ja iframet vasta kun kävijä on kohdalla tätä kutsutaan pagespeed insightissa ”Lykkää kuvien lataamista” A3 lazy load lisäosa on suoraan käytössäsi joten sen asetuksia ei tarvitse käydä tässäkohtaa vielä lävitse. Tässä tulos pagespeedissä:

Wordpress latausnopeuden parantaminen

Nyt meillä on lisäosat millä me voidaan parantaa wordpressin latausnopeus, nyt on aika tutkia mikä hidastaa sivuston latautumista. Tässä kohtaa ei kannata kiinittää kuin mobiili puolen ongelmiin. Tässä meidän blogiamme hidastavat tekijät:
Wordpressiä hidastavat tekijät

Ihan ensimmäiseksi mennään tekemään meille kriittinen CSS tiedosto, joka siis laitetaan sivuston yläosaan. Tätä varten meidän tulee vierailla täällä saamme nyt tietää mikä on sivustomme kriittinen css joka tarvitaan sivuston luomiseen eli renderöintiin.

Renderäinnin estävät resurssit

HUOMIO: Tässä CSS:ässä on edessä <style> ja lopussa </style> jotka tulee poistaa ennenkuin kriittinen CSS asetetaan autoptimizeen

Renderöinnin estävät resurssit wordpress

Ja nyt mennään taas kokeilemaan pagespeed insightia, muista katsoa miltä sivusto näyttää nyt. Jos jokin on rikki tämä ei sovellu silloin sivustollesi.
Wordpressin nopeus optimointi

Meillä tämä ei vielä auttanut tarpeeksi, nyt keskitytään fontteihin ja niiden latautumiseen. Nämäkin löytyvät autoptimizen kautta:

Fonttien lataaminen wordpressissä

Ja nyt mennään tekemään uudelleen pagespeed testiä, muista tyhjentää välimuisti!

Wordpressin latausnopeus

Tässä vaiheessa aletaan tarkkailemaan mitkä seikat hidastaa sivustoamme edelleen, ja jatketaan eteenpäin.

Sosiaallinen-media-hidastava-tekijä

Nyt me huomataan että sosiaallinen media on hidastava tekijä, facebook lisäosa hidastaa meidän sivustoamme. Mutta mikä olisi tähän avuksi? Muistatteko hieman ylempänä kun asensimme ”A3 Lazy load” lisäosan? Siinähän oli että iframe ladataan myös myöhemmin, eli etsitään facebookin upostuskoodi vimpaimista ja laitetaan siihen eteen <iframe> ja loppuun </iframe> jolloin lazy load lataa tuon osion vasta kun kävijä osuu kohdalle. Auttaisikohan tämä sivustoamme latautumaan nopeammin? Katsotaan 🙂

Facebook iframeen

Jos sulla on myös instagram, twitter tai muita some upotuksia suosittelen laittamaan ne iframen sisälle jotta ne latautuvat vasta sitten kun ne täytyy ladata. Tässä tulos tämän jälkeen:

Wordpressin latautuminen

En ole vieläkään tyytyväinen lopputulokseen ja pitää tutustua tarkemmin mikä hidastaa. Jquery scripti tiedosto hidastaa hieman:

Jquery hidastaa wordpressiä

Tätä ei kannata ainakaan poistaa, koska tätä tarvitaan esimerksi kuva karuselleihin ja moneen muuhun toimintoon. Tämä voidana kuitenkin siirtää footeriin autoptimizen asetuksissa:

Wordpressin nopeuttaminen

Ja sitten huomataan ettei jqueryä pienennetty missään vaiheessa, eli tiedoston koko on suuri. Otetaanpa pois jquery ”älä optimoi” kohdasta ja katsotaan myös speed booster pack (tässä kohtaa jquery oli ristiriidassa, kun poistimme sen speed booster packissa ja silti autoptimize lataa sen väkisin) speed booster packin advanced osiossa on kohta lataa scriptit footerissa, laitetaan se päälle:

Wordpress speed booster pack

Nyt mennään tekemään pagespeediin testi, samalla tehdään webpagetest.org:in kautta nopeus testi (pagespeedi saattaa ladata välimuistissa olevia tiedostoja, tässä kohtana huomasin muutaman kohdan jotka olisi pitänyt olla jo optimoituna mutta pagespeed näytti että ne tulisi tehdä)

Nopeus optimoinnin lopputulos

Kuten aiemmin sanoin googlen pagespeedissä näkyy edelleen kohtia jotka korjattiin tässä artikkelissa. Joten nyt pitää tehdä webpagetest.orgin kautta testi jotta saadaan totuus nopeus optimoinnista. Muista että kaikki alle 2 sekunnin latausnopeudet on hyviä yli 2 sekunttia mutta alle 5 sekunttia on normaali ja yli 5 sekunttia on todella huono!

webpagetest wordpressin latautuminen

Vielä voisin parantaa tuota First Byteä, eli ensimmäistä tavua edeltävää aikaa. Mutta mielestäni tuo alle 2 sekunttia latautumiseen on riittävä ja sillä pitäisi pystyä pienentämään muunmuassa bounce ratea ja kävijöiden tyytyväisyyttä. Samalla google rakastaa nopeasti latautuvia kotisivuja joten tämä autaa myös hakukoneoptimoinnissa. Muista vinkata myös kaverille jos pidät oppaastani, tämä on täysin ilmainen tee se itse opas wordpressin latausnopeuden parantamiseksi.

Ja nyt jos kysyt auttaako cloudflare tässä kohtaa, niin koko tämän kirjoituksen ajan minulla oli cloudflare käytössä ja ei pelkästään cloudflare ei nopeuta kotisivuasi 🙂

VINKKI: katso yläpalkista autoptimize ja klikkaa tyhjennä välimuisti joka kerta ennenkuin teet uuden pagespeed testin

Lisätään vielä GT Metrixin tulos (tätä testiä moni käyttää, mutta se ei ole paras mahdollinen nopeutta mittamaan)
GT metrix nopeus