Internetmarkkinointi blogi

Core Web Vitals – paranna sivustosi suorituskykyä

Core Web Vitals mittaa sivuston latausnopeutta, visuaalista vakautta ja vuorovaikutusvalmiutta. Hyvät tulokset parantavat sekä käyttökokemusta että hakukonenäkyvyyttä.

Kirjoittaja: Sampsa Vainio 6 min lukuaika Julkaistu: Päivitetty:
Core Web Vitals – paranna sivustosi suorituskykyä

Core Web Vitals – mistä on kyse?

Core Web Vitals on Googlen määrittämä mittaristo, joka arvioi verkkosivuston suorituskykyä kolmen laatukriteerin perusteella: Largest Contentful Paint (LCP), Interaction to Next Paint (INP, joka korvasi FID:n maaliskuussa 2024) sekä Cumulative Layout Shift (CLS). Googlen mukaan Core Web Vitals on yksi noin 200 ranking-tekijästä, ja HTTP Archiven (2024) datan perusteella vain 42 % verkkosivustoista läpäisee kaikki kolme Core Web Vitals -kynnysarvoa mobiililaitteilla.

Heikko Core Web Vitals -tulos heikentää mahdollisuuksia rankkautua korkealle hakutuloksissa. Google on vahvistanut, että sivukokemus (page experience) vaikuttaa rankkaukseen, ja Deloitten tutkimuksen mukaan 0,1 sekunnin parannus latausajassa voi nostaa konversioprosenttia jopa 8 prosentilla.

Miten ja missä suorittaa Core Web Vitals -testi?

Core Web Vitals -testin voi suorittaa usealla ilmaisella työkalulla. Suosituimmat vaihtoehdot ovat:

  • PageSpeed Insights: Googlen oma työkalu, joka antaa sekä laboratorio- että kenttädataan perustuvan analyysin. Toimii myös suomeksi.
  • GTmetrix: tarjoaa yksityiskohtaisen analyysin sivuston suorituskyvystä, mukaan lukien vesiputouskaaviota.
  • Google Search Console: antaa yleiskuvan ohella myös spesifiä tietoa yksittäisten URL-osoitteiden suorituskyvystä Chrome User Experience Report -datan perusteella.
  • Lighthouse: visuaalinen työkalu, joka auttaa ymmärtämään ongelmakohtia.

Mitäs sitten, kun testitulokset tulevat?

PageSpeed Insights analysoi verkkosivustosi ja näyttää viimeisten 28 päivän kenttädatan perusteella, miten sivusto suoriutuu. Suorituskyvyn osalta raportissa on kuusi mittaria: LCP, INP (tai FID vanhemmissa raporteissa), CLS, First Contentful Paint (FCP), Interaction to Next Paint (INP) ja Time to First Byte (TTFB).

Ensiluokkaisen tärkeää on saada hyväksytty testitulos sivuston suorituskyvyn arvioinnin osalta. Muista tarkastaa testitulos niin mobiilin kuin tietokoneen osalta. Mikäli saat mobiilisivustosi osalta hyväksytyn tuloksen, suurella todennäköisyydellä myös tietokoneversion tulos on hyväksytty.

Sivuston toimivuus on jaoteltu neljään eri luokkaan: tehokkuus, esteettömyys, parhaat käytännöt ja hakukoneoptimointi. Näistä osioista löytyy yksityiskohtaista tietoa siitä, missä verkkosivustosi on onnistunut ja epäonnistunut, sekä suorat toimenpidesuositukset tärkeysjärjestyksessä.

Mitä Core Web Vitals -raportin eri lyhenteet tarkoittavat?

Core Web Vitals koostuu kolmesta päämetriikasta, joilla kullakin on selkeät kynnysarvot hyvälle, kohtalaiselle ja huonolle tulokselle.

Largest Contentful Paint (LCP)

LCP mittaa, miten pitkään käyttäjä joutuu odottamaan, että sivun pääsisältö (suurin näkyvä elementti, kuten pääkuva tai otsikkolohko) latautuu näkyviin. LCP-kynnysarvot ovat:

  • Hyvä: alle 2,5 sekuntia
  • Kohtalainen: 2,5–4 sekuntia
  • Huono: yli 4 sekuntia

HTTP Archiven (2024) mukaan mediaani-LCP mobiililaitteilla on 3,4 sekuntia, mikä tarkoittaa, että yli puolet verkkosivuista ei saavuta hyvää LCP-tulosta mobiilissa.

Interaction to Next Paint (INP)

INP korvasi First Input Delayn (FID) virallisena Core Web Vitals -mittarina maaliskuussa 2024. Siinä missä FID mittasi vain ensimmäistä vuorovaikutusta, INP mittaa kaikkien vuorovaikutusten (klikkaukset, näppäinpainallukset, kosketukset) vasteaikaa koko sivustovierailun aikana. INP-kynnysarvot ovat:

  • Hyvä: alle 200 millisekuntia
  • Kohtalainen: 200–500 millisekuntia
  • Huono: yli 500 millisekuntia

Cumulative Layout Shift (CLS)

CLS mittaa verkkosivuston visuaalista vakautta eli miten paljon sivuston elementit liikkuvat odottamattomasti latauksen aikana. Tyypillisiä CLS-ongelman aiheuttajia ovat myöhässä latautuvat mainokset, kuvat ilman määriteltyjä mittoja ja dynaamisesti lisättävä sisältö. CLS-kynnysarvot ovat:

  • Hyvä: alle 0,1
  • Kohtalainen: 0,1–0,25
  • Huono: yli 0,25

Core Web Vitals -testi, hakukoneoptimointi ja konversio

Core Web Vitals -tuloksilla on suora yhteys sekä hakukonenäkyvyyteen että konversioprosenttiin. Googlen oman tutkimuksen mukaan sivustot, jotka saavuttavat hyvät Core Web Vitals -tulokset, saavat 24 % vähemmän keskeytyneitä sivulatauksia. Vodafone paransi LCP-tulostaan 31 %, mikä johti 8 % korkeampaan myyntiin (Web.dev case study).

Hakukoneoptimointi – laadukkaasti toteutettuna – tarkoittaa kokonaisuudessaan sivuston rakentamista siten, että sivuston käytettävyys on ensiluokkaisella tasolla. Laadukas käyttökokemus johtaa siihen, että käyttäjäsi viihtyvät verkkosivuillasi paremmin ja palaavat sinne huomattavasti todennäköisemmin takaisin. Tämä puolestaan johtaa siihen, että konversio eli käyttäjältäsi toivoma toimi tapahtuu huomattavasti todennäköisemmin.

Miten tuloksia voi parantaa?

Verkkosivuillasi olevat HTML-, JavaScript- ja CSS-tiedostot vaikuttavat latausaikaan. Kaikkia tiedostoja ei tarvitse ladata heti, kun käyttäjä saapuu sivustolle, vaan niiden lataaminen voidaan viivästyttää (defer/async). Tärkeimmät parannuskeinot ovat:

  • 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: viivyttää valokuvien ja videoiden latausta, kunnes käyttäjä selaa niiden kohdalle.
  • Optimoi verkkosivustosi fontit: rajoita fonttien määrää ja käytä font-display: swap -asetusta.
  • 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ä.
  • Määrittele kuville ja videoille width/height-attribuutit: tämä vähentää CLS-ongelmia, koska selain varaa elementin tilan jo ennen sen latautumista.

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. Erään asiakkaani verkkosivusto sai tässä testissä arvosanaksi desktopin osalta 65 ja mobiiliversion osalta 32. WP Rocketin asennuksen ja optimoinnin jälkeen asiakkaani arvosana desktopin osalta nousi sataan (paras mahdollinen) ja mobiilisivujen osalta 91:een.

Kun olet hankkinut lisäosan, 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, ettei muutettu asetus ole rikkonut mitään verkkosivuillasi.

Ja, jos sitten koet tarvitsevasi apua tässä, älä epäröi ottaa yhteyttä minuun.

Usein kysytyt kysymykset

Onko Core Web Vitals pakollinen hakukonenäkyvyyden kannalta?

Core Web Vitals on yksi Googlen ranking-tekijöistä, mutta ei ainoa. Erinomainen sisältö ja relevantit backlinkit voivat kompensoida keskinkertaista suorituskykyä. Google on kuitenkin vahvistanut, että sivukokemus on ”tiebreaker” tasavertaisten sivujen välillä – hyvät Core Web Vitals -tulokset antavat siis kilpailuedun.

Miten usein Core Web Vitals -testi tulisi suorittaa?

Testi kannattaa suorittaa vähintään kerran kuukaudessa sekä aina, kun sivustolla tehdään merkittäviä muutoksia (uuden lisäosan asennus, teeman vaihto, sisältöpäivitys). Google Search Console seuraa Core Web Vitals -dataa jatkuvasti ja ilmoittaa automaattisesti, jos ongelmia ilmenee.

Miksi mobiili- ja desktop-tulokset eroavat toisistaan?

Mobiilitulokset ovat lähes aina heikompia, koska mobiililaitteiden prosessointiteho on pienempi, verkkoyhteydet hitaampia ja näyttökoot rajoittavat renderöintiä. Google käyttää mobile-first-indeksointia, joten mobiilitulokset ovat ranking-näkökulmasta tärkeämmät.

Mikä on INP ja miten se eroaa FID:stä?

Interaction to Next Paint (INP) korvasi First Input Delayn (FID) maaliskuussa 2024. FID mittasi vain ensimmäisen vuorovaikutuksen viivettä, kun taas INP mittaa kaikkien vuorovaikutusten vasteaikaa koko vierailun ajan. INP antaa siten kattavamman kuvan sivuston vuorovaikutusvalmiudesta. Hyvä INP-tulos on alle 200 millisekuntia.

Kirjoittaja

Sampsa Vainio

Helsinkiläinen digimarkkinoinnin asiantuntija ja Digily Oy:n perustaja. Olen työskennellyt digitaalisen markkinoinnin parissa yli 12 vuotta ja konsultoinut verkkonäkyvyyttä yli 100 yritykselle Suomessa ja kansainvälisesti. Koulutukseltani olen KTM (Åbo Akademi, 2014), pääaineena tietojärjestelmätiede.