Core Web Vitals: mitä ne ovat ja miten niitä parannetaan

Core Web Vitals ovat Googlen määrittelemät mittarit, joilla arvioidaan sivuston käyttökokemuksen laatua – ja ne vaikuttavat suoraan hakusijoituksiin. Jos et ole vielä tutustunut niihin, nyt on korkea aika. Tässä oppaassa käymme läpi, mitä core web vitals tarkoittavat, mitkä ovat tavoitearvot ja ennen kaikkea, miten parannat niitä käytännössä.

Mitä ovat Core Web Vitals?

Core Web Vitals on kolmen mittarin joukko, jonka Google julkisti vuonna 2020 osana laajempaa Page Experience -signaalia. Ne mittaavat käyttäjän kokemaa suorituskykyä kolmesta näkökulmasta: latausnopeutta, interaktiivisuutta ja visuaalista vakautta. Google otti mittarit virallisesti ranking-tekijäksi toukokuussa 2021, ja niiden merkitys on kasvanut sen jälkeen. Huomionarvoista on, että Google painottaa mittareissa kenttädataa – siis oikeiden käyttäjien kokemuksia – eikä pelkästään laboratoriotestien tuloksia.

Mittarit ovat:

• LCP (Largest Contentful Paint) – sisällön latausnopeus
• INP (Interaction to Next Paint) – sivun reagointikyky
• CLS (Cumulative Layout Shift) – visuaalinen vakaus

Vuonna 2024 Google korvasi vanhan FID-mittarin (First Input Delay) uudella INP-mittarilla, joka mittaa käyttäjäkokemusta kattavammin koko sivuvierailun ajalta.

LCP – suurimman sisältöelementin latausaika

LCP mittaa, kuinka kauan kestää, ennen kuin sivun suurin näkyvä elementti – tyypillisesti hero-kuva, otsikko tai video – on kokonaan ladattu. Se kuvaa siis sitä hetkeä, jolloin käyttäjä kokee sivun olevan ladattu. Kello käynnistyy navigaation alusta ja pysähtyy, kun suurin viewport-alueella näkyvä elementti on renderöity. Yleisiä LCP-elementtejä ovat <img>-tagit, CSS-taustakuvat, <video>-elementit sekä suuret tekstiblokit.

LCP:n tavoitearvot

• Hyvä: alle 2,5 sekuntia
• Parannusta vaatii: 2,5–4,0 sekuntia
• Huono: yli 4,0 sekuntia

Miten parantaa LCP:tä?

• Optimoi kuvat: pakkaa, muuta WebP-muotoon ja määritä oikea koko
• Käytä loading="eager" ja fetchpriority="high" hero-kuvalle
• Hyödynnä selainvälimuistia ja CDN:ää staattisille resursseille
• Vähennä palvelimen vasteaikaa (TTFB alle 800 ms)
• Poista render-blocking JavaScript ja CSS
• Esitä kriittinen CSS suoraan HTML:ssä (inline critical CSS)

INP – reagointikyky vuorovaikutukseen

INP (Interaction to Next Paint) mittaa, kuinka nopeasti sivu reagoi käyttäjän toimiin kuten klikkauksiin, kosketuksiin ja näppäimistönsyötteisiin. Toisin kuin vanha FID, INP tarkastelee kaikkia vuorovaikutuksia sivuvierailun aikana ja raportoi hitaimman – joten yksittäinenkin hidas toiminto voi nostaa arvoa. Käytännössä INP-ongelmat ovat usein JavaScriptin aiheuttamia: pääsäie on jumissa raskaan laskutoimituksen tai kolmannen osapuolen skriptin takia, eikä ehdi käsitellä käyttäjän syötettä riittävän nopeasti.

INP:n tavoitearvot

• Hyvä: alle 200 millisekuntia
• Parannusta vaatii: 200–500 millisekuntia
• Huono: yli 500 millisekuntia

Miten parantaa INP:tä?

• Optimoi JavaScript: pienennä, lataa asynkronisesti, halkaise pitkät tehtävät
• Siirä raskaat laskutoimitukset Web Workereihin
• Vältä kolmannen osapuolen skriptejä (analytiikka, chat-widgetit) lataamasta synkronisesti
• Hyödynnä requestAnimationFrame ja requestIdleCallback
• Tarkista ja optimoi React/Vue/Angular -komponenttien renderöinti

CLS – kumulatiivinen asemoitumisvaihtelu

CLS mittaa, kuinka paljon sivun elementit siirtyvät ladatessa ilman käyttäjän toimia. Kaikki varmaan tuntevat tilanteen: olet klikkaamassa linkkiä, kun mainos latautuu yläpuolelle ja klikkauskin menee väärään paikkaan. CLS kuvaa juuri tätä ilmiötä numeerisesti. Mittariarvo lasketaan kertomalla siirtyneen elementin osuus näkymäalueesta ja sen liikkeen suuruus – mitä suurempi elementti ja pidempi siirtymä, sitä korkeampi CLS-arvo.

CLS:n tavoitearvot

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

Miten parantaa CLS:ää?

• Määritä aina kuvien ja videoiden width ja height -attribuutit
• Varaa tilaa mainoksille ja dynaamiselle sisällölle CSS:llä etukäteen
• Lataa fontit font-display: swap tai optional -arvolla
• Käytä CSS aspect-ratio -ominaisuutta mediaelementeille
• Vältä lisäämästä sisältöä olemassa olevan sisällön yläpuolelle latauksen aikana

Miten mitata Core Web Vitals?

Core Web Vitals -mittarit voidaan mitata kahdella tavalla: kenttädatana (oikeat käyttäjät, Field Data) ja laboratoriotesteinä (simuloitu ympäristö, Lab Data). Google painottaa kenttädataa ranking-laskennassa, koska se kuvaa todellisia käyttäjäkokemuksia eri laitteilla ja verkkoyhteyksillä. Laboratoriotestit ovat silti kehitystyössä korvaamattomia: ne mahdollistavat nopean iteraation ja toistettavan testaamisen ennen julkaisua.

Kenttädata (Field Data)

• Google Search Console – Core Web Vitals -raportti URL-tasolla
• Chrome User Experience Report (CrUX) – koostedata oikeista käyttäjistä
• PageSpeed Insights – yhdistää kenttädatan ja laboratoriotestin

Laboratoriotyökalut

• PageSpeed Insights – nopein tapa testata yksittäinen sivu
• Google Lighthouse – syvällisempi analyysi Chrome DevToolsissa
• WebPageTest – edistynyt testi useilla selaimilla ja sijainneilla
• GTmetrix – selkeä raportti parannusehdotuksineen

Muista tarkistaa mittaukset myös mobiililaitteilla – Google arvioi sivustosi mobiiliversion perusteella. Tarkemmasta sivunopeuden testauksesta ja optimoinnista löydät käytännön vinkit sivunopeuden optimointi -oppaastamme.

Core Web Vitals osana teknistä SEO:ta

Core Web Vitals eivät ole irrallinen saareke vaan kiinteä osa sivustosi teknistä kokonaiskuntoa. Google käyttää niitä yhtenä hakusijoitusten tekijänä erityisesti silloin, kun muut sivut ovat sisällöltään tasavertaisia. Heikot mittariarvot voivat siis painaa sijoitustasi alaspäin, vaikka sisältösi olisi erinomaista. Käytännössä ero Hyvä– ja Parannusta vaatii -tason välillä voi tarkoittaa useamman prosentin eroa klikkausprosentissa, koska Google voi merkitä hakutuloksia sivun kokemuksen perusteella. Hyvät Core Web Vitals -arvot kertovat myös käyttäjälle, että sivustosi on nopea ja luotettava – se lisää suoraan konversioita.

Käy läpi koko teknisen SEO:n kokonaisuus teknisen SEO:n tarkistuslistamme avulla – sieltä löydät Core Web Vitalsin lisäksi kaikki muut kriittiset osa-alueet indeksoinnista rakenteiseen dataan.

Käytännön muistilista Core Web Vitals -parannukseen

• Tarkista nykytilanne PageSpeed Insightsin tai Search Consolen avulla
• Priorisoi LCP: optimoi hero-kuva ja palvelimen vasteaika ensin
• Tarkista CLS: lisää kuville koot ja varaa tila dynaamiselle sisällölle
• Tutki INP: profiloi JavaScript DevToolsissa ja poista pitkät tehtävät
• Testaa mobiililla – Google arvioi mobiiliversion
• Mittaa uudelleen 2–4 viikon kuluttua: kenttädata päivittyy viiveellä
• Toista sykli säännöllisesti – sivuston kehitys voi heikentää mittareita

Core Web Vitals eivät ole tekninen kuriositeetti – ne heijastavat suoraan sitä, millaisen käyttökokemuksen sivustosi tarjoaa. Kun panostat niihin, parannat samalla sekä hakusijoituksia että konversioita. Aloita mittaamisesta ja etene parannuksiin yksi mittari kerrallaan.

Yleisimmät virheet ja miten ne vältetään

Käytännön työssä törmää toistuvasti samoihin ongelmiin, jotka heikentävät Core Web Vitals -arvoja. Tuntemalla nämä sudenkuopat pääset suoraan asiaan ilman turhaa kokeilemista.

• Optimoimattomat kuvat: suuret PNG- tai JPEG-tiedostot ovat yleisin LCP-ongelman syy. Muunna kuvat WebP-muotoon ja hyödynnä srcset-attribuuttia eri näyttökoille.
• Puuttuvat kuva-attribuutit: jos width ja height puuttuvat, selain ei osaa varata tilaa etukäteen ja elementit hyppivät ladatessa – tämä nostaa CLS-arvoa.
• Painavat JavaScript-bundlet: yksi suuri JS-tiedosto, joka blokeeraa pääsäikeen, on INP-ongelmien pääsyy. Jaottele koodi pienempiin osiin (code splitting).
• Kolmannen osapuolen skriptit: chat-widgetit, analytiikkakirjastot ja mainostagit latautuvat usein synkronisesti. Lataa ne async– tai defer-attribuutilla.
• Hitaat fontit: web-fontit, jotka ladataan ulkoiselta palvelimelta ilman esialatusta, voivat aiheuttaa sekä LCP-viivettä että CLS-hyppyjä.

Monet näistä ongelmista löytyvät suoraan PageSpeed Insightsin tai Lighthouse-raportin “Opportunities”- ja “Diagnostics”-osioista. Käy raportti läpi järjestelmällisesti ja korjaa ensin ne kohdat, joilla on suurin arvioitu vaikutus.

Lue myös

• Tekninen SEO: täydellinen tarkistuslista
• Sivunopeuden optimointi: näin nopeutat verkkosivut

Analysoi oman sivustosi SEO ilmaiseksi

Haluatko tietää, miten oma verkkosivustosi pärjää hakukoneissa? Tee maksuton analyysi WebSEO Auditor -työkalulla ja saat heti konkreettiset kehityskohteet näkyvyytesi parantamiseksi. Voit myös pyytää ilmaisen SEO-auditoinnin asiantuntijaltamme.

Usein kysytyt kysymykset