Lighthouse ja Core Web Vitals – Tutkimusmatka sivuston suorityskyvyn parantamiseksi

Sivustojen suorituskyvyllä eli sillä, kuinka sulavasti sivustot latautuvat ja toimivat käyttäjälle on suuri merkitys: parempi käyttökokemus on suoraan yhteydessä siihen, miten hyvin käyttäjät viihtyvät sivustolla ja lopulta päätyvät tekemään toimenpiteitä sivustolla. Olennainen osa hyvää UX:ää eli sivuston käyttökokemusta on jo se, että sivut latautuvat nopeasti ja toimivat hyvin. Nopeus on webbimaailman tarvehierarkiassa ensimmäisenä ja hyvin mietityt käyttäjäpolut tai mikrointeraktiot tulevat vasta tämän perusasian jälkeen. Monesti ajatellaan, että suorituskykyasiat koskettavat vain koodareita. Suunnittelulla ja suunnitteluvaiheessa voidaan kuitenkin vaikutetaan isoihin linjoihin ja suoraan myös suorituskykyyn, joten siksi on hyvä tietää aiheen perusperiaatteet.

Core Web Vitals on Googlen kesällä 2021 käyttöönottama sivustojen luokittelukriteeristö. Se koostuu kolmesta mittarista, jotka ovat Largest Contentful Paint, First Input Delay ja Cumulative Layout Shift. Kaikki nämä kolme ovat hyvin teknisiä termejä, joilla mitataan käytännössä sitä, miten nopeasti sivu latautuvat käyttäjälle ja kuinka pian sitä on mahdollista oikeasti selata ja käyttää. Näillä mittareilla pyritään arvioimaan sivuston käyttökokemusta numeerisesti. Lisähuomiona Core Web Vitalseista on, että ne vaikuttavat jo nyt sivuston hakukonenäkyvyyteen Googlessa, joten näihin panostaminen on tärkeää.

Toinen näppärä työkalu suorityskyvyn arvioimiseksi on Googlen Lighthouse, joka löytyy sisäänrakennettuna suoraan myös Chrome-selaimesta. Työkalun tulokset eivät kuitenkaan ole aukottomia totuuksia ja jotkut suosituksista tuntuvat jopa hämmentäviltä, mutta sen antama kokonaiskuva on usein hyödyllinen. Tuntuu siltä, että asiakkaatkin osaavat tänä päivänä tarkastella omaa sivustoaan Lighthousella, joten sen mahdollisesti näyttämät keltaiset ja punaiset varoitukset on hyvä ottaa todesta ja ne nousevatkin syystä toisinaan puheenaiheeksi.

Käytin jälleen aikaa oman sivustoni kehittämiseen, joka on aina oiva tilaisuus tehdä myös pientä hienosäätöä koodipuolelle. Perehtymällä Lighthousen tuloksiin sekä ihan vain googlettamalla sain selville kikkoja, joilla oli tuntuva vaikutus sivuston saamiin pisteisiin. Tässä muutamia havaintoja toimenpiteistä matkan varrelta.

Lähtötilanne

Oman sivustoni pisteet ovat ihan ok, mutta parannettavaakin riittää. Performance 65, Accessibility 91, Best Practices 83 ja SEO 100. Ei yhtään punaista ja kaksia vihreää, joten tulos ei ole kovin huono. Tarkempi silmäily kuitenkin osoittaa, että tulokset herjaavat punaisella erityisesti kahden Core Web Vitalsin kohdalla, joissa näyttäisi olevan parantamisen varaa. Välillä on vaikea tulkita, mihin suosituksilla viitataan täsmälleen, joten parannusehdotuksia on tutkittava ja testailtava ajan kanssa.

Toimenpiteet

1. Otin sivustolleni käyttöön Smush-lisäosan, jolla on mahdollista pakata ja optimoida kuvia WordPressin sisällä entisestään. Tämän lisäksi Smushin avulla voi ottaa käyttöön kuvien lazy loadin, joka nopeuttaa sivuston latautumista tuntuvasti. Ylipäätään on tärkeää, ettei tukota sivuja täyteen liian suuria kuvia tai tee sivuista liian pitkiä ja raskaita.
2. Poistin sivustoltani käytöstä tarpeetonta koodia tutkimalla WordPress-aiheisia ohjeita. Esimerkiksi Gutenberg-editoriin liittyvät tyylit voi ottaa pois käytöstä, jos sivuston teema ei perustu siihen.
3. Käytin sivustollani aiemmin Font Awesome -kirjastoa vain muutaman pienen ikonin lataamiseksi. Tämä vaatii erillisen Javascript koodinpätkän lataamista sekä tyylitiedostojen lataamista, joten päätin siirtää nämä suoraan optimoiduiksi svg-tiedostoiksi osaksi teemaa ja poistaa koko kirjaston käytöstä.

Ylipäätään sivuston suorituskykyyn vaikuttaa ulkopuolisten kirjastojen ja työkalujen määrä. Tänä päivänä sivustot tuntuvat olevan täynnä kaikenlaista tauhkaa; on someseiniä, analytiikkaskriptejä, chatbotteja ja muita upotuksia, jotka vain otetaan käyttöön, koska ei nähdä pinnan alle. On hyvä muistaa, että jokainen näistä tarkoittaa aina lisää ladattavaa sivustolla.

Muutoksen jälkeen

Sivuston saamat pisteet ovat nyt huomattavasti korkeammat. Lighthouse antaa vielä joitain huomautuksia, mutta nämä ovat kohtuullisen pieniä asioita kokonaisuuden kannalta. Koodin latautumista voisi varmasti optimoida vielä pidemmälle, mutta sivusto tuntuu käytössä varsin sähäkältä eikä suuria pullonkauloja ole. Oma maailmansa on palvelimiin liittyvät asiat, joihin en ota kantaa tässä kirjoituksessa. Kyseessä on kaiken kaikkiaan merkittävä parannus varsin pienillä asioilla, joiden vaikutus korostuu erityisesti, mitä suurempi sivusto on kyseessä!