Core Web Vitals – mistä on kyse?
Core Web Vitals viittaa hakukonejätti Googlen määrittämiin laatukriteereihin verkkosivuston suorituskyvyn osalta. Nämä laatukriteerit ovat Largest Contentful Paint (LCP), First Input Delay (FID) sekä Cumulative Layout Shift (CLS), ja niihin perustuen sivustosi saa käyttökokemuspisteet; kaiken keskiössä on isosti verkkosivujesi latausaika. Internetin ihmeellisestä maailmasta löytyy eri paikkoja, joissa voit suorittaa Core Web Vitals -testin eli niin sanotun nopeustestin, saadaksesi käsityksen omien verkkosivujesi suorituskyvystä.
Kyse ei ole missään nimessä mistään vähäpätöisestä testistä, vaan se kertoo hyvin suoralla tavalla totuuden siitä, millaiset verkkosivustosi menestysmahdollisuudet ovat niin Googlessa kuin myös puhtaasti potentiaalisten käyttäjien keskuudessa. Mikäli nimittäin Core Web Vitals -testin tulos on heikko, tällöin sinun voi olla vaikeaa saada sivustoasi rankkautumaan korkealle Googlessa. Tokikaan tässä testissä menestyminen ei missään nimessä automaattisesti johda korkeaan rankingiin hakutuloksissa, sillä Googlen mukaan se on yksi noin 200 vaikuttavasta tekijästä. Mutta mahdollisuudet korkeaan rankingiin kohenevat melkoisesti, mikäli Core Web Vitals -testissä menestyy hyvin.
Ja sama pätee tietenkin käyttäjiin: hieman mutkat suoriksi vetäen, heikko testitulos kertoo sivustosi olevan hidas ja verkkosivuston hitaus on yksi suurimmista syistä sille, miksi käyttäjät eivät enää koskaan palaa takaisin sivustollesi. Tokikaan automaattisesti se ei sitä tarkoita, mutta joka toisen verkkosivustolla käyvän kerrotaan hylkäävän sivuston, mikäli sen latautuminen täyteen valmiuteen kestää yli kuusi sekuntia.
Miten ja missä suorittaa Core Web Vitals -testi?
Itsessään Core Web Vitals -testin suorittaminen on varsin helppoa. Monet käyttävät testin tekemiseen suosittua PageSpeed Insights -sivustoa. Sinun ei tarvitse tehdä mitään muuta kuin mennä osoitteeseen https://pagespeed.web.dev/ ja kirjoittaa nettisivustosi osoite “Lisää verkkosivun URL-osoite” -kenttään. Ja kyllä, nykyisin PageSpeed Insights toimii suomen kielellä, joten se helpottaa varmasti monia käyttäjiä – myös testitulosten ymmärtämisen osalta. Lisäksi kyseessä on täysin ilmainen työkalu.
Toinen todella suosittu työkalu omien verkkosivujesi nopeuden testaamiseen on GTmetrix. Sen kohdalla toimintaperiaatteet ovat käytännössä ottaen samat kuin PageSpeed Insightsin kohdalla eli sinun tarvitsee ainoastaan kirjoittaa verkko-osoitteesi kenttään ja odottaa muutaman sekunnin ajan tuloksien saapumista suoraan silmiesi eteen. Kyseessä on niin ikään ilmainen työkalu, joskaan suomeksi sitä ei ole tarjolla.
Mikäli verkkosivustollasi on käytössä Googlen ilmainen Search Console, tällöin voit suorittaa testin myös siellä. Siinä, missä GTmetrix ja PageSpeed Insights antavat sinulle hyvin yksityiskohtaisen yleiskuvan verkkosivustosi suorituskyvystä, Search Console antaa yleiskuvan ohella myös spesifiä tietoa esimerkiksi yksittäisten URL-osoitteiden osalta, koska se on suoraan linkitettynä verkkosivustoosi; Chrome User Experience Report on heti sellainen asia, johon kannattaa kiinnittää huomiota. Erinomainen työkalu on myös Lighthouse, joka saattaa visuaalisuutensa ansiosta auttaa sinua ymmärtämään mahdollisia ongelmakohtia vieläkin paremmin.
Kaiken kaikkiaan näitä Core Web Vitals -mittaustyökaluja on tarjolla useita erilaisia ja niissä saattaa olla keskenään jonkinasteisia eroja – myös tulosten osalta. Jos kuitenkin turvaudut johonkin edellä mainituista vaihtoehdoista, tällöin voin luvata sinun olevan niin sanotusti hyvissä ja ammattimaisissa käsissä.
Mitäs sitten, kun testitulokset tulevat?
Koska PageSpeed Insights on suomeksi saatavilla oleva työkalu, aion käyttää sitä käydessäni läpi mitä testituloksien saamisen jälkeen tapahtuu. Eli, kun PageSpeed Insights on analysoinut verkkosivustosi, pääset näkemään viimeisten 28 päivän mittaiselta kokeilujaksolta missä sivustosi menee ja mikä on verkkosivujesi suorituskyky. Suorituskyvyn osalta löydät yhteensä kuusi eri kategoriaa. Mainitsin aiemmin niistä jo kolme tärkeintä, jotka ovat siis Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS). Niiden lisäksi tarjolla on kolme muuta kategoriaa, jotka ovat First Contentful Paint (FCP), Interaction to Next Paint (INP) ja Time to First Byte (TTFB).
Luonnollisesti ensiluokkaisen tärkeää on saada hyväksytty testitulos sivuston suorituskyvyn arvioinnin osalta; muista tarkastaa testitulos niin mobiilin kuin tietokoneen osalta, joskin se tulee todeta, että mikäli saat mobiilisivustosi osalta hyväksytyn tuloksen, suurella todennäköisyydellä myös tietokoneversion tulos on hyväksytty. Mutta vaikka suorituskyvyltään homma näyttää vihreältä ja lopputuloksena on hyväksytty suorituskyky, se on vain alkupiste, eikä se suinkaan tarkoita, että sivustollasi ei olisi mitään korjattavaa nopeuden näkökulmasta.
Seuraavana katseet tulee kiinnittää itse sivuston toimivuuteen. Sivuston toimivuus on jaoteltu neljään eri luokkaan: tehokkuus, esteettömyys, parhaat käytännöt ja hakukoneoptimointi. Selatessasi testitulossivua alaspäin, huomaat, että jokaiselle näistä neljästä edellä mainitusta kategoriasta löytyy oma osionsa. Näistä osioista löytyy yksityiskohtaista tietoa siitä, missä verkkosivustosi on onnistunut ja epäonnistunut. Luonnollisesti hyvästä työstä kannattaa taputtaa itseään olalle, mutta päähuomio kannattaa kiinnittää niihin korjauskohtiin. Toisin sanoen, saat Core Web Vitals -testistä suoran ja yksityiskohtaisen palautteen siitä, mitkä elementit kuormittavat verkkosivustoasi eniten ja siten tiedät, mitä lähteä ensimmäisenä korjaamaan – tärkeysjärjestyksessä.
Jos päätät kuitenkin tehdä testin Googlen Search Console -ominaisuutta hyödyntäen, tällöin haluan nostaa esille yhden enemmän kuin mainitsemisen arvoisen seikan: kun URL-ryhmä on kerännyt riittävästi dataa, sen status määrittyy huonoimmin suoriutuneen mittarin mukaan. Toisin sanoen, jos esimerkiksi FIP on hyvällä tasolla, mutta CLS ei, tällöin status määrittyy CLS:n mukaisesti. Mikäli haluat lukea lisää Search Consolen tarjoamasta Core Web Vitals -raportista ja itsessään testistä, voit tehdä sen täältä.
Mitä Core Web Vitals -raportin eri lyhenteet tarkoittavat?
Kun suoritat Core Web Vitals -testin, aukeaa testin valmistuttua eli joidenkin sekuntien päästä eteesi näkymä, jossa saattaa olla sinulle hyvinkin vieraalta kuulostavia sanoja. Näiden sanojen eli testitulosten ymmärtäminen on kuitenkin äärimmäisen tärkeää, sillä ne kertovat sinulle, mitkä asiat ovat ongelmakohtia verkkosivujesi suorituskyvyn osalta; samanaikaisesti ne voivat kertoa myös onnistumisesta.
Largest Contentful Paint (LCP)
Largest Contentful Paint ilmestyy Core Web Vitals -testituloksissa silmiesi eteen ensimmäisenä, eikä syyttä suotta: kyse on äärimmäisen tärkeästä asiasta, mitä tulee verkkosivustosi latausnopeuteen. Käytännössä ottaen LCP tarkoittaa sitä, miten pitkään käyttäjä joutuu verkkosivuillesi saavuttuaan odottamaan, että pääsisältö näkyy eli latautuu käyttäjän nähtäväksi. Se toisin sanoen mittaa, miten nopeasti kaikkein suurimmat elementit, kuten esimerkiksi videot ja kuvat, ottavat aikaa latautuakseen.
Mitä enemmän verkkosivuillasi on niin sanottuja raskaita elementtejä, kuten videoita ja kuvia, sitä pidempään tämä latausprosessi kestää. Siksi optimoitu verkkosivusto on erityisen tärkeää tällaisissa tilanteissa, ja aiemmin mainitsemastani työkalusta, WP Rocketista, on äärimmäisen paljon hyötyä, mikäli et itse halua lähteä kajoamaan koodipuoleen.
Mikäli latausaika on maksimissaan 2,5 sekuntia, tällöin asiat verkkosivustollasi ovat näiltä osin hyvin. Jos latausaika on 2,5 – 4 sekuntia, tarkoittaa se, että parannuksia kannattaa tehdä. Mikäli latausaika on yli neljä sekuntia, tällöin puhutaan jo huonosta tuloksesta. Kun siis verkkosivuston käytettävyys on yhä enenevissä määrin tärkeämpää ja tärkeämpää käyttäjille, teknologian kehityksen mukanaan tuomien mahdollisuuksien myötä, kiinnitä isosti huomiota LCP:hen.
First Input Delay (FID)
First Input Delay viittaa siihen hetkeen, kun käyttäjä tulee verkkosivustollesi ensimmäistä kertaa. Konkreettisesti FID liittyy eri elementtien klikkaamiseen: jos sinulla on esimerkiksi “Lue lisää” -painike jossain, ja käyttäjä klikkaa sitä, FID kertoo, miten pitkään klikkaushetkestä kuluu, että selaimesi vastaa tuohon klikkauspyyntöön ja alkaa prosessoida sitä.
Mikäli haluat tarjota verkkosivujesi käyttäjille mahdollisimman miellyttävän käyttökokemuksen, FID:n kontekstissa, tällöin First Input Delayn tulee olla maksimissaan 100 millisekuntia. Silloin verkkosivustosi käytettävyys on FID:n osalta korkealla tasolla.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift linkittyy isosti käyttäjäkokemukseen, kertoen verkkosivustosi visuaalisesta vakaudesta. Toisin sanoen, se kertoo, miten paljon sivustollasi tapahtuu niin sanottuja odottamattomia muutoksia.
Otetaan esimerkki: käyttäjä saapuu verkkosivuillesi ja hänen käyttämänsä sivu on latautunut täysin. Hän lukee julkaisemaasi artikkelia, ja kesken artikkelin hänen eteensä ilmestyy ponnahdusikkuna, joka on esimerkiksi mainos, ja tuo mainos kaiken kukkuraksi heittää käyttäjän sivun alaosaan eli aiheuttaa monin tavoin odottamattoman muutoksen. Tällöin verkkosivustosi ottaa CLS:n osalta osumaa ja siten vaikuttaa siihen, miten käyttäjä ja Google kokevat verkkosivustosi.
Kun Core Web Vitals -testissä kaikki alle 0,1:n, mitä tulee CLS:ään, sivuston käytettävyys on näiltä osin hyvällä tasolla. 0,1 – 0,25 edellyttää muutoksia ja yli 0,25 tarkoittaa heikkoa tulosta.
Core Web Vitals -testi, hakukoneoptimointi ja konversio
Kuten edellä totesin, PageSpeed Insights jaottelee Core Web Vitals -testitulokset neljään eri luokkaan, ja yksi näistä on hakukoneoptimointi. Haluan kuitenkin todeta tämän jokaiselle ääneen: hakukoneoptimointi keskittyy luokkana testituloksissa siihen, että verkkosivustosi noudattaa siihen liittyviä perusneuvoja. Se ei siis ole kovinkaan merkittävä aspekti mitä tulee testituloksiin; toki, jos siitä saa heikon tuloksen, tällöin SEO-puoli on pahasti pielessä.
Hakukoneoptimointi – laadukkaasti toteutettuna – tarkoittaa kokonaisuudessaan sivuston rakentamista siten, että sivuston käytettävyys on ensiluokkaisella tasolla. Näin ollen esimerkiksi Core Web Vitals -testin tuloksiin, kuten LCP:hen, FID:hen ja CLS:ään reagoiminen on osa hakukoneoptimointia.
Laadukkaasti toteutettu hakukoneoptimointi johtaa siis siihen, että verkkosivujesi käytettävyys on korkealla tasolla. Tällöin käyttäjäsi viihtyvät verkkosivuillasi paremmin ja palaavat sinne huomattavasti todennäköisemmin takaisin. Tämä puolestaan on omiaan johtamaan siihen, että konversio eli käyttäjältäsi toivoma toimi, tapahtuu niin ikään huomattavasti todennäköisemmin. Ja, kuten moni varmasti tietää, konversio on sanana koko liiketoimintasi ydin.
Miten tuloksia voi parantaa?
HTML-, JavaScript- ja CSS-tiedostot ovat verkkosivuillasi olevia tiedostoja, jotka tulevat erilaisten lisäosien ja esimerkiksi Google Analyticsin käytön mukana. Jokainen ylimääräinen verkkosivuillasi oleva tiedosto vaikuttaa latausaikaan ja siten Googlen näkemykseen sivustostasi, kuten myös käyttäjien henkilökohtaisiin kokemuksiin. Kaikkia näitä tiedostoja ei kuitenkaan välttämättä tarvitse ladata heti siinä vaiheessa, kun käyttäjä astelee sivustollesi, vaan niiden lataaminen voidaan suorittaa sitä mukaa, kun käyttäjä etenee eri paikkoihin verkkosivuillasi.
Mikäli osaat toteuttaa tämän puolen manuaalisesti, ei muuta kuin Core Web Vitals -testin paljastamien tietojen kimppuun. Mutta miten sitten muuten testituloksia ja ennen kaikkea käyttäjän kokemusta voidaan parantaa? Seuraavassa nostan esille muutaman esimerkin:
- Ota käyttöön CDN-jakeluverkko: tämä takaa sen, että verkkosivustosi käyttäjä käyttää aina häntä lähimpänä olevaa serveriä – tämä vaikuttaa positiivisesti erityisesti LCP:hen ja TTFB:hen.
- Kompressoi verkkosivuillasi käyttämät valokuvat: voit tehdä tämän esimerkiksi Imagify-työkalulla – sen seurauksena valokuvatiedostojen koot pienenevät merkittävästi.
- Hyödynnä Lazy Loading: mainitsin jo aiemmin, ettei kaikkia verkkosivustollasi olevia tiedostoja tarvitse ladata välittömästi ja samalla kerralla – Lazy Loading viivyttää nimenomaan valokuvien latausta.
- Optimoi verkkosivustosi fontit: käyttämäsi selaimen tulee prosessoida verkkosivuillasi käytössä olevat fontit – aivan, kuten valokuvat – eli pyri rajoittamaan fonttien määrää.
- Päivitä tai vaihda Hosting-palvelu: yksi merkittävimmistä verkkosivuston nopeuteen vaikuttavista seikoista on käyttämäsi Hosting-palvelu ja myös se, millainen paketti sinulla on käytössä.
Kuulostaako koodaus utopialta? Työkalut ja lisäosat ovat erinomainen vaihtoehto
Omaan useita henkilökohtaisia kokemuksia siitä, miten esimerkiksi WordPress-sivustolle saatavilla olevat erilaiset lisäosat voivat ratkaista Core Web Vitals -testissä ilmaantuneet ongelmat.
Yksi tällaisista erinomaisista lisäosista on WP Rocket ja tulenkin käyttämään sitä esimerkkinä. Erään asiakkaani verkkosivusto sai tässä kyseisessä testissä arvosanaksi desktopin eli tietokoneella selattavien sivujen osalta 65 ja mobiiliversion osalta 32. Nämä molemmat ovat huonoja lukuja, joten asialle täytyi ehdottomasti tehdä jotain. Ehdotin asiakkaalleni WP Rocket -lisäosan hankintaa. Asiakas oli välittömästi samaa mieltä, ja optimoituani hänelle oikeanlaiset asetukset, tulokset paranivat roppakaupalla. Nykyisin asiakkaani arvosana desktopin osalta on 100, mikä on paras mahdollinen, ja mobiilisivujen osalta 91.
Mikäli koodaus eli sivustosi korjausten tekeminen omatoimisesti ei ole sinulle vaihtoehto, tällöin voin ehdottomasti suositella sinulle WP Rocketia – kuten myös muita vastaavia laadukkaita lisäosia. Ja, kun sitten olet hankkinut kyseisen lisäosan ja ladannut sen WordPress-sivustollesi, suosittelen käyttämään seuraavaa kaavaa: kokeile muuttaa asetuksia, yksi asetus kerrallaan. Tee Core Web Vitals -testi aina muutoksen jälkeen ja varmista samalla, verkkosivustosi avaamalla, ettei muutettu asetus ole rikkonut mitään verkkosivuillasi. Näin löydät, askel askeleelta, ne optimaaliset asetukset juuri sinun sivustollesi; asian laita, kun on se, etteivät samanlaiset asetukset toimi jokaisen verkkosivuston kohdalla.
Ja, jos sitten koet tarvitsevasi apua tässä, älä epäröi ottaa yhteyttä minuun.
