Verkkosivuston suorituskyky on muutakin kuin sitä, kuinka nopeasti sivu latautuu. Vaikka sisältö ilmestyisi sekunneissa, painikkeiden hitaat reaktiot tai odottamattomat asettelun siirtymät voivat turhauttaa kävijöitä ja heikentää heidän kokemustaan. Miten siis voit selvittää, toimiiko verkkosivustosi hyvin? Core Web Vitals ovat Googlen keskeisiä suorituskykymittareita, jotka mittaavat latausnopeutta, interaktiivisuutta ja visuaalista vakautta. Tässä oppaassa tutustut kolmeen Core Web Vitals -mittariin, niiden suositeltuihin raja-arvoihin sekä työkaluihin, joilla voit mitata ja parantaa verkkosivustosi suorituskykyä.
Mitä ovat Core Web Vitals?
Core Web Vitals ovat Googlen käyttöön ottamia suorituskykymittareita, jotka mittaavat verkkosivuston käyttökokemuksen tärkeitä osa-alueita. Mittarit keskittyvät kolmeen päätekijään: lataussuorituskykyyn, interaktiivisuuteen ja visuaaliseen vakauteen. Toisin sanoen ne auttavat sivuston omistajia ymmärtämään, kuinka nopeasti sivu latautuu, kuinka sujuvasti käyttäjät voivat olla vuorovaikutuksessa sen kanssa ja pysyykö sen sisältö vakaana latauksen aikana.
Verkkosivuston suorituskyky ei riipu pelkästään siitä, kuinka nopeasti sivu avautuu. Sivusto voi ladata sisältönsä lyhyessä ajassa, mutta jos käyttäjien täytyy odottaa ennen kuin he voivat napsauttaa painiketta tai jos sivun asettelu muuttuu odottamatta, kokonaiskokemus voi silti olla huono. Core Web Vitals auttavat tunnistamaan nämä ongelmat ja tarjoavat mitattavia tavoitteita sivuston suorituskyvyn parantamiseen.
Google käyttää tällä hetkellä kolmea Core Web Vitals -mittaria: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ja Cumulative Layout Shift (CLS). Jokainen mittari mittaa käyttökokemuksen eri osa-aluetta, joten yhden mittarin parantuminen ei välttämättä tarkoita, että kaksi muuta paranisivat samalla.
Miksi Core Web Vitals ovat tärkeitä?
Verkkosivuston tulisi tarjota kävijöilleen sujuva ja luotettava kokemus. Kun sivun lataaminen kestää liian kauan, käyttäjät saattavat poistua ennen kuin pääsevät tarvitsemaansa tietoon. Samoin jos painikkeet reagoivat hitaasti tai sivun elementit liikkuvat odottamatta, kävijät voivat turhautua ja heidän voi olla vaikea suorittaa tehtäviään loppuun.
Core Web Vitals auttavat sivuston omistajia tunnistamaan nämä ongelmat mitattavan suorituskykydatan avulla sen sijaan, että he luottaisivat pelkkiin henkilökohtaisiin vaikutelmiin. Kehittäjä voi esimerkiksi testata sivustoa tehokkaalla tietokoneella ja todeta sen latautuvan nopeasti. Vanhemmilla mobiililaitteilla tai hitaammilla internetyhteyksillä selaavat kävijät voivat kuitenkin kokea huomattavasti pidempiä latausaikoja.
Näiden erojen vuoksi suorituskyvyn seuranta on tärkeää. Analysoimalla Core Web Vitals -dataa kehittäjät voivat tunnistaa, mitkä sivuston osat kaipaavat parannusta, ja arvioida, tuottavatko optimointitoimet odotettuja tuloksia.
Core Web Vitals ovat merkityksellisiä myös hakukoneoptimoinnin (SEO) kannalta. Google käyttää sivukokemukseen liittyviä signaaleja sijoitusjärjestelmissään, mutta hyvät Core Web Vitals -tulokset eivät takaa parempia sijoituksia. Relevantti sisältö ja monet muut tekijät ovat edelleen tärkeitä. Siksi näiden mittareiden parantamista kannattaa pitää osana laajempaa strategiaa hyödyllisen, saavutettavan ja luotettavan verkkosivuston rakentamiseksi.
Mitkä ovat kolme Core Web Vitals -mittaria?
Jokainen Core Web Vitals -mittari keskittyy tiettyyn verkkosivuston suorituskyvyn osa-alueeseen. Kun ymmärrät, miten ne toimivat, suorituskykyongelmien tunnistaminen ja oikeiden optimointikeinojen valitseminen helpottuu.
Mikä on Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) mittaa, kuinka kauan kestää, että suurin alkuperäisessä näkymässä näkyvä kuva tai tekstilohko ilmestyy näkyviin. Mittarin avulla voidaan arvioida, milloin sivun pääsisältö tulee käyttäjälle näkyviin.
Kuvitellaan esimerkiksi, että kävijä avaa blogiartikkelin. Sivun tausta ja navigointivalikko voivat ilmestyä lähes välittömästi, mutta pääotsikon tai artikkelikuvan lataaminen voi kestää useita sekunteja. Tällaisessa tilanteessa kävijästä voi tuntua, että sivu latautuu yhä, vaikka osa sen elementeistä on jo näkyvissä. Hyvä LCP-arvo on enintään 2,5 sekuntia. Jos arvo on 2,5–4 sekuntia, sivu kaipaa parannusta. Yli 4 sekunnin LCP-arvoa pidetään huonona.
LCP:hen voivat vaikuttaa useat tekijät, kuten palvelimen hitaat vasteajat, suuret kuvat, renderöinnin estävät CSS- ja JavaScript-tiedostot sekä viiveet pääsisällön löytämisessä.
LCP:n parantamiseksi sivuston omistajat voivat toimia seuraavasti:
- Optimoi kuvat: Pienennä kuvatiedostojen kokoa ja käytä tarvittaessa moderneja formaatteja, kuten WebP tai AVIF.
- Paranna palvelimen vasteaikoja: Käytä tehokkaita hosting-resursseja, välimuistia ja sisällönjakeluverkkoa (CDN), kun ne sopivat sivustolle.
- Priorisoi pääsisältö: Varmista, että selain löytää tärkeät kuvat suoraan HTML-lähdekoodista, ja priorisoi niiden lataus tarvittaessa.
- Vähennä renderöinnin estäviä resursseja: Optimoi CSS- ja JavaScript-tiedostot, jotka estävät selainta näyttämästä pääsisältöä.
- Vältä LCP-kuvan laiskaa latausta: Jos kuva todennäköisesti on LCP-elementti, sen latauksen viivästäminen voi saada sivun näyttämään hitaammalta.
Näillä keinoilla voidaan lyhentää aikaa, jonka käyttäjät joutuvat odottamaan pääsisällön ilmestymistä. Tehokkain ratkaisu riippuu kuitenkin viiveen syystä, joten sivu on tärkeää mitata ennen muutosten tekemistä.
Mikä on Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) mittaa, kuinka responsiiviselta verkkosivusto tuntuu, kun käyttäjät ovat vuorovaikutuksessa sen kanssa. Se arvioi viivettä käyttäjän toiminnon, kuten painikkeen napsauttamisen tai näppäimen painamisen, ja selaimen seuraavan visuaalisen päivityksen välillä.
Ajatellaan verkkokauppaa, jossa kävijä napsauttaa Lisää ostoskoriin -painiketta. Jos ostoskorin päivittyminen kestää selaimelta huomattavan kauan, kävijä saattaa luulla, ettei painike toiminut, ja napsauttaa sitä uudelleen. Tämä voi aiheuttaa hämmennystä ja jopa johtaa päällekkäisiin toimintoihin.
INP auttaa tunnistamaan tällaisia ongelmia mittaamalla sivun responsiivisuutta koko käyttäjän vierailun ajan. Toisin kuin First Input Delay (FID), joka mittasi vain viivettä ennen kuin selain aloitti ensimmäisen vuorovaikutuksen käsittelyn, INP huomioi laajemmin vuorovaikutuskokemuksen sivun koko elinkaaren ajalta. Hyvä INP-arvo on enintään 200 millisekuntia. Yli 200 ja enintään 500 millisekunnin arvot kaipaavat parannusta, kun taas yli 500 millisekunnin arvoja pidetään huonoina.
JavaScript on yleinen syy heikkoon INP-arvoon, koska selaimen voi olla suoritettava skriptejä ennen kuin se pystyy reagoimaan käyttäjän syötteeseen ja näyttämään päivityksen. Pitkäkestoiset tehtävät voivat estää selainta käsittelemästä vuorovaikutuksia viipymättä.
INP:n parantamiseksi kehittäjät voivat käyttää useita keinoja:
- Vähennä tarpeetonta JavaScriptiä: Poista käyttämätön koodi ja vältä lataamasta skriptejä, joita nykyinen sivu ei tarvitse.
- Pilko pitkät tehtävät: Jaa suuret JavaScript-tehtävät pienempiin osiin, jotta selaimella on enemmän tilaisuuksia käsitellä käyttäjän vuorovaikutuksia.
- Optimoi tapahtumankäsittelijät: Pidä vuorovaikutukseen liittyvät funktiot mahdollisimman yksinkertaisina ja tehokkaina.
- Vältä tarpeettomia DOM-päivityksiä: Liian monen elementin päivittäminen kerralla voi pidentää renderöintiaikaa ja viivästyttää seuraavaa visuaalista päivitystä.
- Vähennä kolmannen osapuolen skriptejä: Analytiikkatyökalut, mainosskriptit ja upotetut palvelut voivat kuluttaa käsittelyresursseja ja heikentää responsiivisuutta.
INP:n parantaminen vaatii muutakin kuin JavaScript-tiedostojen kokonaiskoon pienentämistä. Kehittäjien on myös ymmärrettävä, milloin skriptit suoritetaan ja kuinka paljon työtä selaimen on tehtävä vuorovaikutuksen jälkeen.
Mikä on Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) mittaa verkkosivun visuaalista vakautta. Se keskittyy näkyvien elementtien odottamattomiin sijainnin muutoksiin sivun näyttämisen aikana.
Kuvitellaan esimerkiksi, että kävijä lukee artikkelia ja yhtäkkiä teksti siirtyy alaspäin, koska sen yläpuolelle ilmestyy mainos. Jos kävijä oli juuri napsauttamassa linkkiä, odottamaton liike voi saada hänet napsauttamaan eri elementtiä. Tällaiset asettelun muutokset voivat tehdä sivustosta vaikeakäyttöisen, erityisesti mobiililaitteilla, joissa näkyvä alue on rajallinen. Hyvä CLS-arvo on enintään 0,1. Yli 0,1 ja enintään 0,25 arvot kaipaavat parannusta, kun taas yli 0,25 arvoja pidetään huonoina.
Odottamattomia asettelun siirtymiä voivat aiheuttaa monet yleiset ongelmat. Kuvat ilman määriteltyjä mittoja, dynaamisesti lisätyt mainokset, myöhään latautuva sisältö ja tekstin ulkoasua muuttavat verkkofontit voivat kaikki heikentää visuaalista vakautta.
Seuraavat keinot voivat auttaa parantamaan CLS-arvoa:
- Määritä kuvien mitat: Määritä kuvien leveys ja korkeus tai käytä CSS:n kuvasuhteita varataksesi tarvittavan tilan ennen kuvan latautumista.
- Varaa tilaa mainoksille: Varaa mainossäiliöille riittävästi tilaa, jotta ympäröivä sisältö ei siirry mainosten ilmestyessä.
- Vältä sisällön lisäämistä olemassa olevan sisällön yläpuolelle: Jos uusia elementtejä on näytettävä, sijoita ne niin, etteivät ne yllättäen siirrä sisältöä, jota käyttäjät jo katselevat.
- Optimoi fonttien lataus: Käytä sopivia fonttien latausstrategioita ja varafontteja vähentääksesi tekstin asettelun odottamattomia muutoksia.
- Käytä sopivia CSS-animaatioita: Suosi mahdollisuuksien mukaan animaatioita, jotka perustuvat ominaisuuksiin kuten transform ja opacity, asettelun muutoksia aiheuttavien ominaisuuksien sijaan.
On tärkeää ymmärtää, ettei jokainen asettelun siirtymä ole haitallinen. Suoraan käyttäjän toiminnon seurauksena tapahtuva muutos voi olla odotettu. CLS keskittyy odottamattomaan visuaaliseen epävakauteen ja käyttää pisteytystapaa, joka perustuu asettelun siirtymän vaikutukseen ja etäisyyteen.
Mitkä ovat Core Web Vitals -mittareiden suositellut raja-arvot?
Google tarjoaa tarkat raja-arvot, joiden avulla sivuston omistajat voivat arvioida, tarjoavatko heidän sivunsa hyvän käyttökokemuksen. Raja-arvot jakavat suorituskyvyn kolmeen luokkaan: hyvä, kaipaa parannusta ja huono.
Näiden raja-arvojen avulla kehittäjät voivat arvioida jokaista mittaria erikseen. Yksittäinen testi ei kuitenkaan riitä osoittamaan, tarjoaako sivusto johdonmukaisesti hyvän kokemuksen.
Google suosittelee Core Web Vitals -mittareiden arvioimista sivukäyntien 75. persentiilin perusteella siten, että mobiili- ja tietokonetulokset tarkastellaan erikseen. Tämä tarkoittaa, että vähintään 75 % mitatuista käynneistä tulisi täyttää kunkin mittarin hyvä raja-arvo.
Oletetaan esimerkiksi, että sivuston LCP-arvo 75. persentiilillä on 2 sekuntia. Tämä tarkoittaa, että 75 %:lla mitatuista sivukäynneistä LCP on enintään 2 sekuntia, mikä täyttää suositellun raja-arvon.
Sivuston tulisi pyrkiä saavuttamaan hyvät raja-arvot kaikissa kolmessa mittarissa sen sijaan, että se keskittyisi vain vahvimpaan tulokseensa.
Millä työkaluilla Core Web Vitals -mittareita mitataan?
Core Web Vitals -mittareita voidaan mitata useilla Googlen tarjoamilla työkaluilla. Ne auttavat kehittäjiä ymmärtämään sivuston suorituskykyä ja tunnistamaan parannusta kaipaavat osa-alueet.
PageSpeed Insights
PageSpeed Insights on yksi hyödyllisimmistä työkaluista Core Web Vitals -mittareiden tarkistamiseen. Se tarjoaa sekä todellisten käyttäjien dataa, kun sitä on saatavilla, että simuloidulla testillä kerättyä laboratoriodataa. Lisäksi se antaa ehdotuksia sivun suorituskyvyn parantamiseksi.
Google Search Console
Google Search Consolessa on Core Web Vitals -raportti, joka näyttää, mitkä sivuryhmät tarjoavat hyvän käyttökokemuksen ja mitkä kaipaavat parannusta. Se käyttää todellista käyttödataa auttaakseen sivuston omistajia tunnistamaan suorituskykyongelmat useilla sivuilla.
Chrome DevTools ja Lighthouse
Chrome DevTools ja Lighthouse auttavat kehittäjiä testaamaan sivun suorituskykyä hallitussa ympäristössä. Niillä voidaan tunnistaa ongelmia, jotka liittyvät JavaScriptin suorittamiseen, kuvien lataamiseen, asettelun siirtymiin ja muihin Core Web Vitals -mittareihin vaikuttaviin tekijöihin.
Mitä eroa on kenttädatalla ja laboratoriodatalla?
Core Web Vitals -mittareita voidaan arvioida kahdenlaisen datan avulla: kenttädatan ja laboratoriodatan. Eron ymmärtäminen auttaa kehittäjiä tulkitsemaan testituloksia ja valitsemaan oikean lähestymistavan sivuston suorituskyvyn parantamiseen.
Kenttädata
Kenttädata kerätään todellisilta käyttäjiltä heidän selatessaan sivustoa. Se kuvastaa todellisia selausolosuhteita, mukaan lukien erilaiset laitteet, verkkoyhteydet ja käyttäjien vuorovaikutukset.
Tämä data on erityisen hyödyllistä, kun halutaan selvittää, täyttääkö sivusto Googlen suosittelemat Core Web Vitals -raja-arvot todellisissa tilanteissa.
Laboratoriodata
Laboratoriodata kerätään hallitussa testiympäristössä esimerkiksi Lighthousen kaltaisilla työkaluilla. Se auttaa kehittäjiä toistamaan suorituskykyongelmia ja selvittämään niiden mahdollisia syitä.
Toisin kuin kenttädata, laboratoriodata ei edusta jokaista todellista käyttökokemusta. Siksi sivusto voi saada erilaisia tuloksia laboratoriotesteistä ja todellisten käyttäjien mittauksista.
Miten Core Web Vitals -tuloksia voi parantaa
Core Web Vitals -tulosten parantaminen edellyttää latausnopeuteen, interaktiivisuuteen ja visuaaliseen vakauteen vaikuttavien ongelmien tunnistamista. Oikea ratkaisu riippuu siitä, mikä mittari antaa heikon tuloksen.
Paranna Largest Contentful Paint -arvoa (LCP)
LCP:n parantamiseksi kehittäjien tulisi keskittyä lataamaan suurin näkyvä sisältöelementti mahdollisimman nopeasti. Yleisiä parannuksia ovat kuvien optimointi, luotettavan webhotellipalvelun valitseminen, palvelimen vasteaikojen lyhentäminen, välimuistin käyttöönotto sekä tarpeettomien viiveiden välttäminen tärkeiden resurssien latauksessa.
Paranna Interaction to Next Paint -arvoa (INP)
INP-arvoa voidaan parantaa vähentämällä pitkäkestoisia JavaScript-tehtäviä ja minimoimalla tarpeetonta työtä pääsäikeessä. Kehittäjien tulisi myös optimoida tapahtumankäsittelijät ja välttää kuormittamasta selainta liialla työllä sen jälkeen, kun käyttäjä napsauttaa, napauttaa tai kirjoittaa.
Paranna Cumulative Layout Shift -arvoa (CLS)
CLS-arvon pienentämiseksi kehittäjien tulisi varata tilaa kuville, videoille, mainoksille ja muille elementeille ennen niiden latautumista. Vältä lisäämästä uutta sisältöä odottamatta olemassa olevan sisällön yläpuolelle ja käytä visuaalisille elementeille aina kun mahdollista johdonmukaisia mittoja.
Lopuksi
Core Web Vitals auttavat kehittäjiä ymmärtämään, miten käyttäjät kokevat verkkosivuston lataussuorituskyvyn, interaktiivisuuden ja visuaalisen vakauden osalta. Mittaamalla LCP-, INP- ja CLS-arvoja sivuston omistajat voivat tunnistaa suorituskykyongelmia ja priorisoida parannuksia, jotka tekevät sivuista helppokäyttöisempiä.
Säännöllinen seuranta, todellisten käyttäjien data ja kohdennettu optimointi voivat auttaa sivustoja säilyttämään hyvät Core Web Vitals -tulokset pitkällä aikavälillä
Usein kysytyt kysymykset
1. Mitä eroa on kenttädatalla ja laboratoriodatalla?
Kenttädata tulee sivustolla vierailevilta todellisilta käyttäjiltä, kun taas laboratoriodata kerätään hallitussa testiympäristössä. Kenttädata kuvastaa todellisia käyttökokemuksia, kun taas laboratoriodata auttaa kehittäjiä toistamaan ja diagnosoimaan suorituskykyongelmia.
2. Miten voin parantaa Core Web Vitals -tuloksiani?
Voit parantaa Core Web Vitals -tuloksia optimoimalla kuvat, vähentämällä tarpeetonta JavaScriptiä, lyhentämällä palvelimen vasteaikoja, ottamalla välimuistin käyttöön ja estämällä odottamattomat asettelun siirtymät.
