Mikä on Core Web Vitals? LCP, INP ja CLS

01Mitä Core Web Vitals on?

Sivun “nopeutta” ei voi kuvata yhdellä luvulla. Käyttäjälle on tärkeää, kuinka pian sisältö tulee näkyviin, kuinka nopeasti sivu reagoi painikkeen napautukseen ja pysyykö sisältö paikallaan lukemisen aikana. Core Web Vitals koostuu mittareista, jotka arvioivat näitä kolmea kokemusta erikseen.

Google käyttää näitä mittareita osana sivukokemussignaaleja. Ne eivät yksin ratkaise sijoitusta, mutta kahdesta sisällöltään vahvasta sivusta paremman käyttökokemuksen tarjoava voi nousta edelle. Suurin vaikutus kohdistuu kuitenkin käyttäjien käyttäytymiseen: nopeilla ja vakailla sivuilla kävijä viipyy pidempään ja tekee useammin ostoksen tai yhteydenoton.

Mittarit kehittyvät ajan myötä. Esimerkiksi vuorovaikutusten mittaamiseen aiemmin käytetyn FID-mittarin on korvannut INP, joka kuvaa kaikkia vuorovaikutuksia paremmin. Siksi ajantasaiset määritelmät kannattaa tarkistaa viralliselta web.dev-dokumentaatiosivustolta.

02Raja-arvotaulukko

Google määrittelee jokaiselle mittarille kolme aluetta: hyvä, parannettavaa ja heikko. Jotta sivu katsotaan “hyväksi”, arvon on oltava hyvällä alueella vähintään 75 prosentissa käynneistä. Mobiili ja työpöytä arvioidaan erikseen.

03Mitä LCP on?

LCP (Largest Contentful Paint) on aika sivun avautumisesta siihen hetkeen, kun suurin näkyvä sisältöelementti (yleensä pääkuva, videon kansikuva tai suuri otsikkolohko) on latautunut ja piirretty ruudulle. Se on mittareista lähinnä käyttäjän tunnetta siitä, että “sivu on auki”.

LCP:tä huonontavat tekijät

• Hidas palvelimen vaste (pitkä TTFB)
• Suurikokoinen, pakkaamaton tai vanhanaikaisessa tiedostomuodossa oleva pääkuva
• Pääkuvan asettaminen viivästetysti ladattavaksi (lazy)
• Sivun näkymisen estävät CSS- ja JavaScript-tiedostot
• Pääsisällön luominen vasta JavaScriptillä

Miten LCP:tä parannetaan?

Tarjoa pääkuva WebP- tai AVIF-muodossa oikeassa koossa, poista se viivästetystä latauksesta ja anna sille tarvittaessa korkea latausprioriteetti. Lyhennä palvelimen vasteaikaa välimuistilla ja CDN:llä sekä lykkää ei-kriittiset skriptit.

<img src="/img/hero.webp" alt="Pääkuva" width="1200" height="630" fetchpriority="high">

04Mitä INP on?

INP (Interaction to Next Paint) mittaa, kuinka nopeasti sivu vastaa visuaalisesti käyttäjän klikkauksiin, napautuksiin ja näppäimistötoimintoihin koko käynnin aikana. Raportoitavaksi valitaan yksi käynnin hitaimmista vuorovaikutuksista, eli arvioitavana on kokonaisvaste, ei yksittäinen nopea klikkaus.

Jos valikkopainiketta napauttaessasi ei hetkeen tapahdu mitään ja valikko aukeaa vasta sitten yhtäkkiä, viive näkyy INP-arvossa. Ongelma johtuu yleensä JavaScript-koodista, joka kuormittaa selaimen pääsäiettä pitkään.

Miten INP:tä parannetaan?

• Pilko pitkään kestävät JavaScript-tehtävät pieniin osiin.
• Poista käyttämättömät ja tarpeettomat skriptit ja vähennä kolmannen osapuolen koodia.
• Lykkää vuorovaikutuksen jälkeen tehtävät raskaat työt (kuten analytiikkatietojen lähetys).
• Vältä hyvin suurta ja monimutkaista sivurakennetta (DOM).
• Anna käyttäjälle heti visuaalinen vahvistus ja tee raskas työ vasta sen jälkeen.

05Mitä CLS on?

CLS (Cumulative Layout Shift) mittaa, kuinka paljon sivun sisältö siirtyy odottamattomasti. Tyypillisiä esimerkkejä korkeasta CLS:stä ovat teksti, joka hyppää alaspäin lukiessa, koska yläpuolelle latautuu myöhässä mainos, tai painike, joka liikkuu juuri ennen klikkausta.

CLS ei ole aikaa vaan yksikötön pistemäärä. Siinä huomioidaan siirtyvän elementin koko ja siirtymän pituus. Käyttäjän omasta toiminnasta (esimerkiksi haitarin avaamisesta) johtuvia muutoksia ei lasketa mukaan.

Miten CLS:ää parannetaan?

• Määritä kaikille kuville ja videoille leveys ja korkeus tai kuvasuhde.
• Varaa tila etukäteen mainoksille, kartoille ja upotetuille sisällöille.
• Älä lisää nauhoja tai ilmoituksia olemassa olevan sisällön päälle jälkikäteen.
• Lataa verkkofontit font-display: swap -asetuksella ja pidä varafontin mitat lähellä alkuperäistä.
• Käytä animaatioissa sijainnin sijaan transform-ominaisuutta.

06Kenttädata ja laboratoriodata

Core Web Vitals -arviointi perustuu oikeilta Chrome-käyttäjiltä kerättyyn kenttädataan. Tieto tarjotaan Chrome-käyttökokemusraportin (CrUX) kautta viimeisten 28 päivän keskiarvona. Sivuille, joilla ei ole riittävästi liikennettä, kenttädataa ei välttämättä näy.

Laboratoriodata puolestaan on tulosta, jonka esimerkiksi Lighthouse tuottaa yhdellä testillä kontrolloidussa ympäristössä. Se on erittäin hyödyllinen ongelmien löytämiseen ja korjausten välittömään kokeiluun, mutta ei kuvaa täysin oikeiden käyttäjien laite- ja yhteysvaihtelua. Todelliseen vuorovaikutukseen perustuvia mittareita, kuten INP:tä, ei voi mitata suoraan laboratoriossa; sen sijaan suuntaa antavana indikaattorina käytetään kokonaisestoaikaa (TBT).

import { onLCP, onINP, onCLS } from 'web-vitals';

function gonder(metrik) {
  console.log(metrik.name, metrik.value);
  // Tässä voit lähettää arvon omaan analytiikkatyökaluusi
}

onLCP(gonder);
onINP(gonder);
onCLS(gonder);

07Tiekartta parannuksiin

Kun korjaat Core Web Vitals -ongelmia, järjestelmällinen eteneminen satunnaisten muutosten sijaan estää työn valumisen hukkaan.

1. Avaa Search Consolen Core Web Vitals -raportti ja tunnista ongelmalliset sivuryhmät.
2. Testaa yksi esimerkkisivu jokaisesta ryhmästä PageSpeed Insightsilla ja merkitse muistiin, mikä mittari on heikko.
3. Toteuta Lighthouse-suositukset suurimman hyödyn tuovasta alkaen.
4. Julkaise muutos ja käynnistä korjauksen vahvistusprosessi Search Consolessa.
5. Odota muutama viikko, että kenttädata päivittyy, ja vertaa tuloksia.

08Core Web Vitals ja SEO-strategia

Core Web Vitals ei korvaa SEO:ta vaan tukee sitä. Hakuaikomuksen täyttävä, omaperäinen ja luotettava sisältö on edelleen ratkaisevin tekijä. Kun sisällön laatu on kahdella sivulla lähellä toisiaan, käyttökokemuksen ero voi nousta esiin, ja hyvä kokemus lisää todennäköisyyttä, että saavutettu kävijä päätyy konversioon.

Tehokkain tapa on huomioida suorituskyky jo suunnitteluvaiheessa. Kun kevyet komponentit, oikea kuvasommittelu ja selkeä koodirakenne on rakennettu alusta asti, jälkikäteen tehtäviä korjauksia tarvitaan vähemmän. Sovellamme tätä lähestymistapaa hakukoneystävällisten verkkosivujen ja mobiiliystävällisen suunnittelun prosesseissamme; suunnitteluvaiheen tarkistuslistan löydät artikkelistamme hakukoneystävälliset verkkosivut.

Käytännön nopeutuskeinot olemme käsitelleet oppaassamme sivuston nopeuden parantaminen ja säännöllisen seurannan rutiinin artikkelissamme verkkosivuston ylläpito. Jos haluat raportoida mittaustulokset säännöllisesti yhdessä hakusuorituksen kanssa, voit hyödyntää SEO- ja analytiikkapalveluamme.