Sivuston suorituskyvyn kartoitus
Kun sivuni nyt tuntuvat pysyvän pystyssä omillaan ja palvelevat jo tarkoitusta, on aika jatkaa kehitystyötä. Löysin mielenkiintoisen Googlen tarjoaman työkalun PageSpeed Insighting, jolla jokainen voi tutkia sivustonsa nopeutta sekä suorituskykyä. Päätin siis tehdä sivuilleni alustavan kartoituksen ennen suurempia parannuksia, jotta voin arvioida tekemieni asioiden hyötyjä tai haittoja. Tässä kirjoituksessa siis suoritamme kolme mittausta mainitulla työkalulla ja sen jälkeen aktivoimme Smush image compression and optimization -lisäosan Lazy Load toiminnon, ja arvioimme sen vaikutusta työkalun pisteytykseen.
Tämän kyseisen Lazy Load toiminnon tarkoituksena on lykätä joidenkin asioiden lataamista jolloin sivun vasteaikaa voidaan lyhentään. Esimerkiksi sivun alalaidan kuvaa ei kannata ladata sivun latauksen yhteydessä ennen kuin käyttäjä selaa sivua alaspäin. Tällä tavoin toimittaessa voidaan suorituskykyä ohjata kriittisimpiin osiin ja parantaa sivuston käyttökokemusta. Ei kun mittaamaan.
Alla olevassa taulukossa näkyy Googlen PageSpeedin kolme tulosta sivustolleni. PageSpeed erittelee raportissaan mobiili- ja tietokonekäyttäjän, joten tehtyjen muutoksien vaikutuksia voi arvioida parammin. Tutkittaessa saatuja lukuja voidaan huomata sivustoni saaneen aika hyvät pisteet tietokonepuolella (noin 73/100 pistettä), mutta verrattain heikot mobiilipuolella (vajaa 30 pistettä). Painettuun sanaan on pakko luottaa, mutta tämä tuntuu vähän erikoiselta omasta näkökulmastani – kännykällä sivut ovat aina toimineet nopeasi, mutta tietokoneella sivut vaikuttavat raskaalta ja jotain välkettä esiintyy sivuja ladattaessa. Seuraavaksi aktivoidaan Lazy Load ja tehdään mittauksset uudelleen.
| Mobiili | Tietokone |
| 24 | 72 |
| 31 | 72 |
| 32 | 75 |
Smush image compression and optimization -lisäosa oli helppo ottaa käyttöön ja Lazy load käynnistyi napin painalluksella. Lisäosa näyttää nostaneen tietokoneversion pisteitä, mutta jostain syystä mobiiliversion pisteet ovat laskeneet. En osaa tätä aivan laittaa lazy loadin ja lisäosan piikkiin, mutta niillä saattaa olla vaikutusta. Olisi loogisempaa, että pisteet olisivat nousseet molemmissa versioissa, mutta nyt on tyydyttävä ns. plus minus nollaan. Tutkitaan seuraavaksi Googlen PageSpeedin sanallisia raportteja.
| Mobiili | Tietokone |
| 21 | 89 |
| 19 | 89 |
| 20 | 79 |
PageSpeed tarjoaa varsin kattavan sanallisen raportin sivuston mahdollisista haasteista sekä arvioi saatavan hyödyn, jos nämä haasteet korjataan. Raporttien mukaan, kuvat alla, seuraavia kehityskohteita näyttäisi olevan ylimääräisen CSS:n poistaminen ja kuvien jakaminen seuraavan sukupolven muodossa. Lisäksi pääsisäkkeen työkuormaa pitäisi vähentää. Ohessa vielä tarkemmat Google PageSpeed Insighting antamat suositukset sekä mobiili, että tietokoneversiolle.
Mobiiliversion ongelmat näyttäisi olevan koodauspuoella. Pääsisäkkeen työkuormaa ja JavaScriptiä vähennettävä.
Tietokoneversio alkaisi olla jo hyvällä mallilla, mutta välimuistia kohentamalla ja kuvien muotoa muokkaamalla pisteet nousisivat.
Yhteenveto
Artikkelin tavoitteena oli tallentaa muistiin sivuston suorituskyvyn tila mittaushetkella (2.11.2019), jotta sivustolle tehvävien muutoksien vaikutuksia voidaan arvioida tulevaisuudessa. Halusin myös esitellä tuon mainion Googlen työkalun ominaisuuksia mahdollisille lukijoilleni sekä saada itselleni motivaatiota sivuston parantamiseen. Tarkoituksenani on palata asiaan kevään tai kesän aikana, kun olen saanut diplomotyöni kirjoitettua.
0 kommenttia