Mitä Core Web Vitals tarkoittaa?

Core Web Vitals ovat Googlen kolme mittaria, jotka kertovat, miltä sivun käyttö tuntuu oikeille kävijöille: kuinka nopeasti sivun pääsisältö tulee näkyviin, kuinka nopeasti sivu reagoi painalluksiin ja pysyykö sisältö paikallaan latautuessaan. Lyhenteinä ne ovat LCP, INP ja CLS. PageSpeed Insights näyttää ne oikeiden kävijöiden datasta, ja sen lisäksi se näyttää erillisen laboratoriotestin pisteet, jotka ovat eri asia.

Tämä ero on koko aiheen tärkein asia, ja siksi se kulkee mukana tämän artikkelin läpi. Suurin osa sekaannuksesta syntyy siitä, että pisteitä luetaan kuin ne olisivat Core Web Vitals, ja pisteiden vaihtelua kuin sivusto olisi muuttunut.

Miksi nopeus ylipäätään maksaa asiakkaita ja mikä sivuja yleensä hidastaa, on käyty läpi artikkelissa Verkkosivujen latausnopeus. Tässä keskitytään siihen, miten mittareita ja raporttia luetaan ja mitä niiden perusteella kannattaa korjata.

Mitä LCP, INP ja CLS mittaavat?

LCP mittaa latausta, INP reagointia ja CLS vakautta. Kullekin on määritelty raja-arvot, ja arvio perustuu siihen, mitä 75 prosenttia käynneistä kokee, erikseen puhelimilla ja tietokoneilla.

MittariMitä se mittaaHyväParannettavaaHeikko
LCPKuinka nopeasti sivun suurin sisältöelementti tulee näkyviinenintään 2,5 s2,5 s ja 4 s välilläyli 4 s
INPKuinka nopeasti sivu reagoi kävijän painalluksiin ja näppäilyihinenintään 200 ms200 ms ja 500 ms välilläyli 500 ms
CLSKuinka paljon sisältö siirtyy odottamatta latauksen aikanaenintään 0,10,1 ja 0,25 välilläyli 0,25

Raja-arvot ovat samat, joita web.dev-sivuston Core Web Vitals -ohje käyttää. INP korvasi aiemman FID-mittarin maaliskuussa 2024. Jos luet vanhempaa ohjetta, jossa puhutaan FID:stä, sen reagointia koskevat neuvot ovat vanhentuneet.

Mittareiden nimet kuulostavat teknisiltä, mutta niiden takana on kolme arkista kysymystä. Näkeekö kävijä nopeasti sen, mitä tuli katsomaan? Tapahtuuko jotain, kun hän painaa nappia? Osuuko sormi siihen, mihin hän tähtäsi?

LCP käytännössä: sivun suurin elementti

LCP:n kohde on se yksittäinen elementti, joka on näkyvän alueen suurin, kun sivu latautuu. Yrityssivustolla se on melkein aina etusivun iso kuva tai pääotsikko. PageSpeed Insights kertoo diagnostiikassaan, mikä elementti sivullasi on kyseessä.

Tavallisimmat syyt hitaaseen LCP:hen ovat liian raskas pääkuva, hitaasti vastaava palvelin ja se, että pääkuva ladataan vasta muun sisällön jälkeen. Viimeinen syntyy usein hyvää tarkoittavasta asetuksesta: kaikkien kuvien viivästetty lataus koskee myös sitä kuvaa, joka pitäisi näyttää ensimmäisenä.

Toinen tavallinen syy on pääkuvan päälle ladattava liukukuvaesitys, joka odottaa skriptiä ennen kuin näyttää mitään. Kävijä katsoo tyhjää aluetta, kunnes skripti on valmis. Yksi staattinen kuva, joka on pakattu oikein ja mitoitettu näytölle, on lähes aina nopeampi. Kuvien pakkaamisesta ja mitoituksesta kerrotaan artikkelissa Verkkosivujen kuvat ja nopeus.

INP käytännössä: kun painallus ei tunnu tekevän mitään

INP mittaa, kuinka kauan kestää painalluksesta siihen, että sivu näyttää reaktion. Se ei mittaa vain ensimmäistä painallusta, vaan käynnin aikana tehtyjä vuorovaikutuksia, ja arvo kuvaa hitaimpien joukosta sitä, jonka kävijä todennäköisesti huomaa.

Huono INP tuntuu kävijästä siltä, että sivu on jumissa. Valikko avautuu viiveellä, lomakkeen kenttään kirjoitettu teksti ilmestyy nykien tai ostoskoripainike ei näytä tekevän mitään, joten kävijä painaa uudelleen.

Syy on melkein aina liian suuri määrä JavaScriptiä, joka varaa selaimen juuri silloin, kun kävijä yrittää tehdä jotain. Pienellä sivustolla tyypillisiä lähteitä ovat raskaat sivunrakennustyökalut, useat seurantakoodit, chat-ikkunat, animaatiokirjastot ja ulkopuoliset upotukset. Jokainen niistä voi olla kevyt yksinään, mutta yhdessä ne vievät selaimen ajan.

CLS käytännössä: hyppivä sisältö

CLS mittaa, kuinka paljon näkyvä sisältö siirtyy odottamatta. Arvo on kerroin eikä aika, ja se kasvaa, kun iso osa näkymästä hyppää pitkän matkan.

Tavallisimmat syyt ovat kuvat ja upotukset ilman varattua tilaa, myöhään latautuvat ilmoituspalkit ja fontit, jotka vaihtuvat kesken latauksen. Erityisen tuttu esimerkki on evästeilmoitus tai tarjousraita, joka ilmestyy sivun yläreunaan sekunnin viiveellä ja työntää koko sisällön alas juuri, kun kävijä on painamassa linkkiä.

CLS on kolmesta mittarista yleensä helpoin korjata, koska korjaus on tilan varaaminen etukäteen. Kun kuvalla on mitat, upotuksella on varattu alue ja ilmoituspalkki tulee sisällön päälle eikä sen yläpuolelle, sisältö pysyy paikallaan.

Miksi PageSpeed Insights näyttää eri tuloksen joka kerta?

PageSpeed Insights näyttää eri pisteet joka kerta, koska pisteet tulevat yksittäisestä laboratoriotestistä, johon vaikuttavat verkon reititys, palvelimen hetkellinen kuorma, sivulla vaihtuvat mainokset ja testit sekä monet muut satunnaiset tekijät. Oikeiden kävijöiden data raportin yläosassa ei muutu testikerrasta toiseen, koska se on koottu 28 päivän ajalta.

Lighthouse-mittauksen pisteytysohje luettelee vaihtelun syiksi muun muassa A/B-testit ja vaihtuvat mainokset, internetliikenteen reitityksen muutokset, eri laitteilla testaamisen, selainlaajennukset ja virustorjuntaohjelmat. Ohjeen mukaan sivuston suorituskykyä kannattaa ajatella pisteiden jakaumana eikä yksittäisenä lukuna.

Käytännössä tämä tarkoittaa kahta asiaa. Laboratoriotesti ajetaan useamman kerran, ja katsotaan vaihteluväliä eikä parasta tai huonointa tulosta. Ja kymmenen pisteen muutos ilman sivustoon tehtyä muutosta ei ole uutinen.

Jos pisteet vaihtelevat hyvin paljon, syy voi olla myös sivustossa. Hitaasti ja epätasaisesti vastaava palvelin, välimuisti, joka tyhjenee ajoittain, tai ulkopuolinen skripti, joka latautuu välillä nopeasti ja välillä hitaasti, näkyvät juuri suurena vaihteluna.

Mitä eroa on kenttädatalla ja laboratoriodatalla?

Kenttädata kertoo, mitä oikeat kävijät ovat kokeneet, ja laboratoriodata kertoo, miten sivu toimi yhdessä simuloidussa testissä. PageSpeed Insightsin kenttädata tulee Chromen käyttäjäkokemusraportista, ja se kattaa edelliset 28 päivää. Laboratoriodata tulee Lighthouse-testistä, joka ajetaan sillä hetkellä, kun painat nappia.

Molemmilla on paikkansa. Googlen PageSpeed Insights -ohjeen mukaan kenttädata kuvaa todellista käyttökokemusta, ja laboratoriodata sopii ongelmien selvittämiseen, koska se kerätään hallitussa ympäristössä. Ohje muistuttaa myös, että hyvä laboratoriotulos ei välttämättä tarkoita, että oikeiden kävijöiden kokemus on hyvä.

Yksi ero yllättää usein. Laboratoriotesti ei voi mitata INP:tä, koska testissä kukaan ei paina mitään. Sen sijaan se mittaa kokonaisestoaikaa eli sitä, kuinka paljon selain on varattuna latauksen aikana. Luku kertoo samasta ongelmasta, mutta se ei ole INP.

OminaisuusKenttädataLaboratoriodata
Mistä se tuleeOikeilta Chrome-käyttäjiltäSimuloidusta testistä
AikajaksoEdelliset 28 päivääYksi testikerta
ReagointimittariINPKokonaisestoaika
Vaihtelee kerrasta toiseenEiKyllä
Mihin se sopiiTilanteen arviointiinSyiden etsimiseen

Kun kenttädataa ei ole

Pienellä sivustolla kenttädataa ei aina ole. Chromen käyttäjäkokemusraporttiin tarvitaan riittävästi käyntejä, ja jos yksittäisellä sivulla niitä ei ole, PageSpeed Insights näyttää koko sivuston yhteiset tiedot. Jos kävijöitä on vähän koko sivustolla, kenttädataa ei näy lainkaan.

Tämä on normaalia eikä merkki viasta. Silloin laboratoriotesti on paras käytettävissä oleva tieto, ja sitä kannattaa täydentää omalla kokeilulla: avaa sivu tavallisella puhelimella mobiiliverkossa, paina valikkoa ja lomakkeen kenttiä ja katso, hyppiikö jokin.

Kun raportti näyttää koko sivuston tiedot, muista, että luku on keskiarvoa kaikista sivuista. Etusivu voi olla nopea ja raskas galleriasivu hidas, ja yhteinen luku kertoo kummastakin vähemmän kuin kummankin oma testi.

Pisteet eivät ole Core Web Vitals

Raportin iso pistemäärä nollasta sataan tulee laboratoriotestistä. Pisteet ovat painotettu keskiarvo testin mittareista, ja 90 tai enemmän on hyvä tulos. Core Web Vitals -arvio on eri asia: se on hyväksytty, kun kaikkien kolmen mittarin 75. persentiili on oikeiden kävijöiden datassa hyvä.

Näistä syntyy tilanteita, jotka näyttävät ristiriitaisilta. Sivu voi saada puhelintestissä 55 pistettä ja silti läpäistä Core Web Vitals -arvion, koska oikeat kävijät käyttävät nopeampia laitteita ja yhteyksiä kuin testin simulointi. Ja toisinpäin: sivu voi saada 95 pistettä ja hylätyn arvion, jos oikeat kävijät törmäävät esimerkiksi hitaaseen reagointiin, jota laboratoriotesti ei mittaa.

Kun joku kertoo sivuston pisteet, kysy siis, puhutaanko laboratoriotestistä vai oikeiden kävijöiden arviosta. Vastaus muuttaa sen, mitä luvusta voi päätellä.

Vaikuttavatko Core Web Vitals Google-sijoituksiin?

Vaikuttavat, mutta vähemmän kuin moni luulee. Google sanoo, että hyvät Core Web Vitals -arvot ovat muiden sivukokemuksen osien ohella linjassa sen kanssa, mitä sen ydinjärjestelmät pyrkivät palkitsemaan, ja suosittelee hyviä arvoja sekä hakunäkyvyyden että käyttäjäkokemuksen vuoksi.

Käytännössä niiden paino on vaatimaton verrattuna siihen, vastaako sivu hakuun. Hidas mutta paras vastaus voittaa yleensä nopean mutta heikon vastauksen. Nopeus ratkaisee lähinnä silloin, kun kilpailevat sivut ovat sisällöltään lähellä toisiaan.

Siksi Core Web Vitals kannattaa korjata ensisijaisesti kävijöiden takia. Sivu, joka latautuu nopeasti, reagoi heti ja pysyy paikallaan, tuottaa enemmän yhteydenottoja riippumatta siitä, mitä se tekee sijoituksille. Hakukonehyöty tulee sen päälle.

Mitkä korjaukset auttavat eniten?

Eniten auttavat yleensä pääkuvan keventäminen ja sen lataaminen ensimmäisenä, ulkopuolisten skriptien karsiminen, tilan varaaminen kuville ja ilmoituksille sekä palvelimen vasteajan parantaminen. Järjestys riippuu siitä, mikä mittari on punaisella.

Heikko mittariTavallisin syyMitä kysyt tekijältä
LCPRaskas pääkuva tai hidas palvelinOnko pääkuva pakattu, mitoitettu ja ladataanko se ensimmäisenä?
INPLiikaa JavaScriptiäMitä skriptejä sivulla ladataan ja tarvitaanko jokaista?
CLSTilaa ei ole varattuOnko kuvilla mitat ja tuleeko ilmoituspalkki sisällön päälle?

Ulkopuolisten skriptien karsiminen on korjauksista se, joka unohtuu useimmin, koska skriptit on lisätty eri aikoina eri syistä. Käy läpi kaikki: seurantakoodit, chat, arvostelujen upotukset, kartat ja somepainikkeet. Moni niistä voidaan ladata vasta, kun kävijä tarvitsee sitä. Esimerkiksi karttaupotus voi latautua vasta klikkauksesta.

Palvelimen vasteaika on korjaus, jota ei tehdä sivulla vaan webhotellissa ja välimuistissa. Jos kaikki sivut ovat hitaita ja kuvat ovat jo kunnossa, syy on todennäköisesti siellä.

Näin luet PageSpeed Insightsin raportin järjestyksessä

  1. Valitse puhelimen näkymä, koska useimmilla yrityssivustoilla suurin osa kävijöistä tulee puhelimella.
  2. Katso ylhäältä, onko kenttädataa ja läpäiseekö sivu Core Web Vitals -arvion.
  3. Tarkista, koskeeko data tätä sivua vai koko sivustoa.
  4. Katso, mikä mittareista on oranssilla tai punaisella. Se kertoo, mistä aloittaa.
  5. Siirry vasta sitten laboratoriotestin diagnostiikkaan ja etsi sieltä sen mittarin syyt.
  6. Aja laboratoriotesti kolme kertaa ja katso vaihteluväliä.

Pisteiden värit ovat laboratoriotestissä punainen nollasta 49:ään, oranssi 50:stä 89:ään ja vihreä 90:stä ylöspäin. Diagnostiikan pitkä lista kannattaa lukea mittarin kautta. Kaikki listan kohdat eivät ole yhtä tärkeitä, ja moni niistä vaikuttaa pisteisiin vain vähän.

Kirjaa tulos ylös ennen korjauksia. Kenttädata kattaa aina edelliset 28 päivää, joten korjauksen vaikutus näkyy oikeiden kävijöiden luvuissa vähitellen useiden viikkojen aikana, ei seuraavana päivänä.

Puhelin ja tietokone erikseen

Core Web Vitals arvioidaan erikseen puhelimille ja tietokoneille, ja tulokset eroavat usein paljon. Puhelinten laitteet ja yhteydet ovat hitaampia, ja laboratoriotesti simuloi puhelimelle tarkoituksella hitaampaa laitetta ja yhteyttä.

Jos suurin osa kävijöistäsi tulee puhelimella, puhelimen tulos on se, jolla on merkitystä. Kävijöiden laitejakauman näet kävijämittarista, ja sen käyttöönotosta kerrotaan artikkelissa Google Analytics 4: käyttöönotto.

Tietokoneella hyvä ja puhelimella heikko tulos kertoo yleensä raskaasta sivusta, jonka tietokone jaksaa käsitellä ja puhelin ei. Korjaus on silloin keventäminen, ei tietokonenäkymän hiominen.

Milloin pisteiden jahtaaminen ei kannata

Sata pistettä ei ole tavoite. Kun oikeiden kävijöiden arvio on hyvä, lisäpisteiden jahtaaminen laboratoriotestissä tuottaa harvoin mitään, mitä asiakas huomaisi.

Pahimmillaan pisteiden perässä poistetaan asioita, jotka tuovat yhteydenottoja. Chat-ikkuna, ajanvarauksen upotus tai asiakasarviot voivat heikentää pisteitä ja silti tuoda enemmän kauppaa kuin ne vievät. Oikea kysymys on, voiko saman toiminnon toteuttaa kevyemmin, ei se, voiko sen poistaa.

Seuraa siis ensisijaisesti kenttädataa ja yhteydenottoja. Jos molemmat ovat kunnossa, sivusto on tältä osin kunnossa, vaikka laboratoriotestin luku olisi oranssi.

Yhteenveto

Core Web Vitals ovat kolme mittaria: LCP mittaa latausta, INP reagointia ja CLS vakautta. Hyvät raja-arvot ovat 2,5 sekuntia, 200 millisekuntia ja 0,1, ja arvio perustuu 75 prosenttiin oikeiden kävijöiden käynneistä. INP korvasi FID-mittarin maaliskuussa 2024.

PageSpeed Insightsin pisteet tulevat laboratoriotestistä ja vaihtelevat joka kerta. Oikeiden kävijöiden kenttädata kattaa 28 päivää, eikä se vaihtele testikerrasta toiseen. Lue raportti siksi ylhäältä alas: ensin kenttädata ja arvio, sitten heikoin mittari ja vasta lopuksi laboratoriotestin diagnostiikka.

Core Web Vitals vaikuttavat sijoituksiin vähemmän kuin sisältö, mutta ne vaikuttavat suoraan siihen, jääkö kävijä ja ottaako hän yhteyttä. Korjaa ensin pääkuva, ulkopuoliset skriptit ja hyppivä sisältö, ja anna tulosten näkyä kenttädatassa muutaman viikon kuluessa.