Kuinka testata nettisivusi ja nopeuttaa niitä testitulosten perusteella

Esittelen tässä kirjoituksessa Webpagetest -työkalun toimintaa, minkä avulla pystyt selvittämään kätevästi mitkä osuudet vievät eniten aikaa sivujasi avattaessa. Kyseinen työkalu löytyy osoitteesta http://www.webpagetest.org ja sen käyttäminen ei vaadi rekisteröitymistä sivuille.

Voit käynnistää testin antamalla halutun sivuston osoitteen, valitsemalla Test location:in, eli sen maan mistä sivuja avataan (Suomi ei ole valitettavasti listalla mukana) ja käytettävän selaimen. Yllä olevassa kuvassa olen antanut esimerkkinä oman sivustoni www.jkankkunen.com, Test locationiksi Amsterdam ja selaimeki Chromen.

Klikkaa tämän jälkeen START TEST -painiketta, niin sivusto lähtee analysoimaan annettua nettisivua:

Analysoinnissa kestää yleensä noin 30 sekuntia. Analysoinnin valmistuttua saat tarkan raportin siitä miten kauan minkäkin osuuden lataaminen sivuilla kesti. Raportin yläosassa on yleiskatsaus, mistä selviää sivujen ensimmäiseen avaukseen mennyt aika (First view), sekä toiseen avaukseen mennyt aika (milloin osa ladattavasta materiaalista on jo selaimen välimuistissa = lataus onnistuu nopeammin) :

Tästä taulukosta selviää, että omien sivujeni avaaminen Amsterdamista käsin vei ensimmäisellä kerralla 10.9 sekuntia ja toisella kerralla n. 6.7 sekuntia.

Seuraavana on vesiputousnäkymä sivujen eri osuuksien lataamiseen menneestä ajasta (alla olevassa kuvassa on vain osa sivun tarjoamasta listauksesta):

Tältä näytöltä saat hyödyllistä tietoa siitä, mikä osa sivuista (esim kuva, tyylitiedosto, tms) vie paljon aikaa latautuakseen.

Listalla näkyvät siis kaikki resurssit joita kutsutaan kyseistä sivua avattaessa. Ensimmäisenä listalla on etusivun lähdekoodin avaamiseen mennyt aika (eli index.php, index.html, tms), toisena ensimmäiseksi kutsuttu tyylitiedosto ”style.css” jne..

Voit klikata haluamasi rivin auki, milloin näet siitä vielä tarkempia tietoja:

Lisäksi saat testin tuloksena havainnollistavan graafin siitä minkä verran eri tyyppiset tiedostot vievät latausaikaa:

Esimerkiksi omilla sivuillani Javascript-tiedostot vaativat selkeästi eniten aikaa latautuakseen. Tämä on hyvin tyypillistä WordPress -sivustoille, eli lähtökohtaisesti en olisi tuosta huolissani, ellei vesiputous -listauksessa näkynyt mitään yksittäisiä, paljon aikaa vaativia js-osuuksia.

 

Sivujen nopeuden parantaminen testitulosten perusteella

Testin antamasta listauksesta kannattaa siis tutkia etenkin niitä rivejä joiden lataamisen kohdalla on kestänyt selvästi muita pidempään. Ensimmäisen rivin kohdalla kestää yleensä aina jokunen sekunti, esimerkiksi omassa tapauksessani tuo 2.4 sekuntia ei ole mitenkään huolestuttavan pitkä aika. Tyypillisiä listalta löytyviä ongelmia ovat esimerkiksi turhan suurikokoiset kuvat, jotka kannattaa  muuttaa nettisivuille sopivaan kokoon, milloin niiden lataaminen nopeutuu huomattavasti. Lisäksi listalla voi olla turhaan ladattavia tiedostoja, esimerkiksi tyylitiedostoja joita ei oikeasti tarvita juuri kyseisen sivun kohdalla. Nämä kannattaa karsia lähdekoodeista pois.

Itse olen optimoinut sivujani jo aikaisemmin, niin omassa esimerkissäni en löytänyt mitään pahempaa resurssisyöppöä listalta. Mutta sen sijaan huomasin listalla uuden varoituksen:

Tuloksissa näkyy kaksi punaista riviä (kuvassa toinen on klikattuna aktiiviseksi ruskeana), mikä kertoo siitä, että kyseisiä tiedostoja ei ole löytynyt palvelimelta. Ylemmän rivin tapauksessa kyseessä on tiedosto nimeltä ”guy-with-tablet.jpg”. Rivin auki klikatessa näkyy koko tiedostopolku mistä tuota tiedostoa on yritetty avata: http://www.jkankkunen.com/UUSI/wp-content/uploads/2015/06/guy-with-tablet.jpg”. Kyseinen polku on väärä, koska tuo ”/UUSI” -osuus oli itselläni käytössä aikaisemmin kun olin vasta kehittelemässä uusia sivujani  UUSI-hakemiston sisälle. Nämä virheelliset tiedostoviittaukset vaativat paljon latausaikaa ja on syytä poistaa käytöstä. Seuraavana on siis selvitettävä mikä osuus etusivusta yrittää käyttää tuota tiedostoa. Tämä selviää tutkimalla sivun lähdekoodia. Hetken asiaa ihmeteltyäni löysin kyseisen osion:

Yllä olevassa kuvassa näkyy se osuus sivusta (<section> – elementti ) missä tuota ongelmakuvaa yritetään käyttää + sen lähdekoodi. Kyseessä oleva ”guy-with-tablet.jpg” -kuva on sivuillani käytössä olevan teeman oletuskuvia mitä en halua edes käyttää ja se yritetään tuoda tuon <section> -elementin taustakuvaksi. Ongelman paikallistettuani, oli se helppo korjata poistamalla koko tiedosto sivujen lähdekoodista. Toisen punaisen rivin kohdalla oli kyseessä aivan vastaavanlainen ongelma, eli oletuskuva mitä yritettiin ladata väärästä osoitteesta. Poistin myös tämän viittauksen sivulta.

Nuo kaksi tiedostoa poistettuani ajoin testin uudestaan; ja kyllä vaan, sivujen lataaminen nopeutui heti noin 1,5 sekunnilla:

Lisäksi huomasin listalta turhan tyylitiedoston ”layerslider.css”:

Kyseinen tyylitiedosto tulee Layerslider WP -lisäosan mukana. Tuolle lisäosalle ei ole omilla sivuillani käyttöä, joten tämän testin tuloksena päädyin poistamaan sen käytöstä. Tämäkin nopeutti taas sivujen latautumista:

Layerslider lisää muutakin kuin vain tuon layerslider.css -tyylitiedoston, eli vaikka tyylitiedosto itsessään varasi vain 0.5 sekuntia lataukseen, nopeutui sivut enemmän lisäosan poistamisen jälkeen, koska Layerslider lisää myös mm. js-tiedostoja sivun latauksen yhteyteen.

Huom. Testituloksia analysoidessa kannattaa huomioida, että koska netin nopeus heilahtelee jatkuvasti, niin tulokset eivät ole aina suoraan verrannollisia keskenään. Esimerkiksi yhdessä vaiheessa testiajon tehdessäni sain sivujen latausajaksi 26 sekuntia.

 

Menikö turhan tekniseksi?

Mikäli koet, että sivujasi olisi syytä optimoida, mutta koet testin tulosten tulkitsemisen ja korjausten tekemisen vaikeaksi (tai sinulla ei vaan ole käyttää aikaa sivujesi optimointiin), niin ota yhteyttä!