Core Web Vitals -opas: LCP, INP, CLS ja sivuston nopeus

Lyhyesti: Core Web Vitals ovat Googlen kolme mittaria, jotka kertovat, miltä sivuston nopeus ja toimivuus tuntuvat oikeille kävijöille. LCP mittaa, kuinka nopeasti sivun suurin sisältöelementti näkyy, INP sitä, kuinka nopeasti sivu reagoi klikkauksiin, ja CLS sitä, pysyykö sisältö paikallaan. Hyvät raja-arvot ovat 2,5 sekuntia, 200 millisekuntia ja 0,1. Ne vaikuttavat Googlen hakutuloksiin, mutta vähemmän kuin sisällön osuvuus.

Core Web Vitals: kolme mittaria

Core Web Vitals koostuu kolmesta mittarista, ja jokaiselle Google on määrittänyt hyvän tason:

Googlen suositus on, että 75 % käynneistä yltää näihin arvoihin. Mobiili ja tietokone mitataan erikseen (web.dev).

• LCP kertoo, kuinka kauan sivun yläosan suurimman elementin näyttäminen kestää. Se on yleensä kuva, video tai tekstilohko (web.dev).
• INP seuraa kaikkia klikkauksia, napautuksia ja näppäilyjä koko käynnin ajan ja raportoi suunnilleen hitaimman reaktion. Se korvasi 12.3.2024 FID-mittarin, joka mittasi vain ensimmäisen klikkauksen (web.dev, web.dev).
• CLS mittaa suurimman odottamattomien asettelumuutosten sarjan. Tuttu esimerkki: mainos latautuu ja työntää lukemasi tekstin alemmas (web.dev).

Vaikuttavatko Core Web Vitals hakutuloksiin?

Kyllä, mutta ne eivät ole tärkein tekijä. Googlen mukaan sen hakujärjestelmät käyttävät Core Web Vitals -mittareita, mutta mikään yksittäinen signaali ei ratkaise, ja osuvuus menee edelle. Kun useampi sivu vastaa hakuun yhtä hyvin, parempi sivukokemus voi ratkaista järjestyksen (Google Search Central). Google suosittelee silti sivustojen omistajille hyviä arvoja (Google Search Central).

Selvin hyöty näkyy usein kävijöissä eikä sijoituksessa: nopea ja vakaa sivusto pitää useamman kävijän mukana seuraavaan vaiheeseen asti. Jos haluat ymmärtää, missä kohtaa sivuston nopeus asettuu muiden tekijöiden joukossa, lue Miten hakukoneoptimointi toimii?

Näin mittaat sivuston nopeuden

Dataa on kahta lajia. Kenttädata tulee oikeilta Chrome-käyttäjiltä, ja juuri sitä Google käyttää. Laboratoriodata syntyy simuloidussa testissä, ja sillä etsitään syitä. Laboratoriotesti ei pysty mittaamaan INP:tä luotettavasti, joten se käyttää tilalla Total Blocking Time -mittaria (web.dev).

• PageSpeed Insights näyttää viimeisen 28 päivän kenttädatan sekä Lighthousella tehdyn laboratoriotestin (Google).
• Google Search Console sisältää Core Web Vitals -raportin. Se ryhmittelee sivustosi URL-osoitteet tiloihin Hyvä, Parantamisen varaa ja Heikko, mobiilille ja tietokoneelle erikseen (Search Console -ohje). Google Search Console -oppaassamme kerromme, miten työkalu otetaan käyttöön, ja Search Console -palvelussamme hoidamme sen puolestasi.

Jos sivustollasi on vähän liikennettä, kenttädataa ei synny ja Search Consolen raportti jää tyhjäksi. Näin käy monella pk-yrityksen sivustolla. Silloin nojaat laboratoriotestiin.

LCP:n parantaminen

• Pakkaa ja skaalaa yläosan iso kuva oikeaan kokoon ja käytä moderneja formaatteja, kuten WebP tai AVIF.
• Laita kuva suoraan sivun HTML:ään ja anna sille korkea prioriteetti attribuutilla fetchpriority="high".
• Älä käytä viivästettyä latausta (lazy loading) yläosassa näkyvään kuvaan. Sen pitää latautua ensimmäisenä.
• Vähennä renderöinnin estävää CSS:ää ja JavaScriptiä ja lykkää skriptejä, joita ei tarvita heti.
• Nopeuta palvelimen vastausta välimuistilla ja karsimalla uudelleenohjauksia.

Google jakaa LCP:n neljään vaiheeseen: palvelimen vastausaika, viive ennen kuvan latauksen alkua, latauksen kesto ja viive ennen näyttämistä. Näin näet, missä aika kuluu (web.dev).

INP:n parantaminen

• Pilko pitkät JavaScript-tehtävät pienempiin, jotta selain ehtii reagoida klikkauksiin niiden välissä.
• Poista turhat skriptit. Usein syyllisiä ovat vanhat seurantakoodit, chat-widgetit ja lisäosat.
• Pidä HTML kevyenä. Hyvin suuri DOM hidastaa jokaista päivitystä.
• Näytä heti, että klikkaus on rekisteröity, vaikka lopputulos tulisi vasta hetken päästä.

Pääsäiettä tukkivat pitkät tehtävät ovat heikon INP:n yleisin syy (web.dev).

CLS ja evästebanneri

• Anna kaikille kuville ja videoille leveys ja korkeus.
• Varaa tila mainoksille, upotuksille kuten kartoille ja videoille sekä evästebannerille.
• Lataa fontit niin, ettei teksti hypi fontin vaihtuessa.
• Älä lisää uutta sisältöä sen yläpuolelle, mitä kävijä parhaillaan lukee.

Suomessa evästebanneri on tyypillinen kompastuskivi. Evästeistä säädetään sähköisen viestinnän palveluista annetun lain 205 §:ssä: evästeen tallentaminen kävijän laitteelle edellyttää suostumusta, ellei eväste ole välttämätön kävijän pyytämän palvelun tarjoamiseksi (Finlex). Traficomin Kyberturvallisuuskeskus muistuttaa, että muista kuin välttämättömistä evästeistä on voitava kieltäytyä helposti eikä hyväksyntöjä saa olla valmiiksi valittuina (Kyberturvallisuuskeskus). Siksi lähes jokainen yrityssivusto näyttää bannerin heti ensimmäisellä käynnillä. Jos banneri työntää sisältöä alaspäin sen sijaan, että se asettuu sivun päälle, CLS kärsii. Jos skripti lataa sen myöhään, se voi heikentää myös LCP:tä ja INP:tä. Testaa siis sivu aina tilassa, jossa suostumusta ei vielä ole annettu.

Suurin osa tästä työstä on teknistä hakukoneoptimointia. WordPressissä syy löytyy usein teemasta ja lisäosista. Jos haluat tietää, missä sivustosi menee, aloita SEO-analyysista.

Mitä nopea sivusto tuo

Useimmilla sivustoilla on parannettavaa. HTTP Archiven mukaan vuonna 2025 vain 48 % sivustoista läpäisi kaikki kolme mittaria mobiilissa ja 56 % tietokoneella (HTTP Archive Web Almanac). Googlen julkaisemia esimerkkejä:

• Vodafone paransi A/B-testissä LCP:tä 31 % ja sai 8 % enemmän myyntiä (web.dev).
• redBus paransi INP:tä 72 % ja kasvatti myyntiä 7 % (web.dev).

Nopeampi sivusto tukee myös konversioita, kunhan muu kokonaisuus on kunnossa. Lue lisää artikkelista Mikä on hyvä konversioprosentti? tai tutustu konversio-optimointiin. Kuinka nopeasti parannukset näkyvät hakutuloksissa, riippuu monesta muusta tekijästä, kuten kerromme artikkelissa Kuinka kauan SEO kestää? Jos edessä on verkkosivujen uudistus, kirjaa sivuston nopeus vaatimuksiin heti alussa.