Core Web Vitals: vinkit sivuston suorituskyvyn parantamiseen
Mitä ovat Googlen Core Web Vitals -arvot, miten niitä pitää ja voi tulkita? Ja tärkeimpänä, miten niiden avulla voidaan parantaa verkkosivuston suorituskykyä? Käydään nämä asiat läpi tässä oppaassa.
Sisällysluettelo
Core Web Vitals on joukko Googlen luomia mittareita, jotka kertovat, kuinka käyttäjäystävällinen verkkosivusto on sen latausajan, visuaalisen vakauden ja interaktiivisuuden perusteella.
Core Web Vitals -mittarit jaetaan kolmeen osa-alueeseen:
- Largest Contentful Paint (LCP) mittaa, kuinka kauan sivun suurimman sisältöelementin lataaminen kestää.
- Cumulative Layout Shift (CLS) kertoo, kuinka paljon sivun asettelu muuttuu odottamattomasti sivun latautuessa.
- Interaction to Next Paint (INP) mittaa, kuinka kauan aikaa kuluu käyttäjän aloittamasta vuorovaikutuksesta seuraavan visuaalisen päivityksen näyttämiseen.
Nämä tulokset otetaan huomioon sivustojen sijoituksia määrittävissä tekijöissä. Mittareiden optimointi voi siis parantaa sivustosi suorituskykyä hakukoneiden tuloksissa ja siten lisätä sivustosi kävijämääriä.
Tutkimusten mukaan jo sekunnin viive latausajassa voi laskea verkkokaupan myyntiä merkittävästi. Näin ollen hyvät mittarit korreloivat suoraan pienemmän välittömän poistumisprosentin kanssa.
Largest Contenful Paint (LCP) kuvaa, kuinka nopeasti käyttäjät näkevät sivusi sisällön. Aika mitataan sekunteina.
- Hyvä LCP-arvo on 2,5 sekuntia tai vähemmän. Tämä tarkoittaa, että sisältösi herokuva, video tai suuri tekstikappale latautuu lähes välittömästi.
- LCP-arvo 2,6–4 sekuntia tarkoittaa, että sivustosi nopeutta on parannettava.
- Huonona LCP-arvona pidetään yli 4 sekunnin latausaikaa; näin pitkä odottelu turhauttaa kävijöitä ja yleensä lisää heidän taipumustaan poistua sivustoltasi.
Cumulative Layout Shift paljastaa, kuinka paljon sivun elementit liikkuvat odottamattomasti sivun latautuessa. Mittari ilmaistaan pisteinä, ja hyvä CLS-pistemäärä on 0,1 tai vähemmän. Nämä luvut tarkoittavat, että sivusi ulkoasu on erittäin vakaa, mikä helpottaa käyttäjien sisällön katselua ilman häiriöitä.
CLS-pisteet välillä 0,1 ja 0,25 tarkoittavat, että sivustosi visuaalista vakautta on parannettava. Siirtymät ovat niin suuria, että käyttäjät huomaavat ne ja käyttökokemus huononee. Huonot CLS-pisteet ovat yli 0,25 ja tarkoittavat, että sivun elementit liikkuvat paljon ja yleensä liikaa. Olet itsekin varmasti törmännyt tähän, kun olet koettanut klikata jotain, mutta oletkin klikannut väärää kohtaa, koska sivu latautui niin hitaasti.
INP on uusin Core Web Vitals -mittari, joka korvasi First Input Delay (FID) -mittarin 12. maaliskuuta 2024. Tämä luku kertoo, kuinka nopeasti sivu reagoi vuorovaikutukseen, ja se mitataan millisekunteina. INP ottaa huomioon ajan aloittamisesta visuaalisen muutoksen ilmestymiseen kaikissa näissä vuorovaikutuksissa ja perustuu siihen, mikä kestää pisimpään, jotta saat tarkemman kuvan sivusi yleisestä vasteajasta.
- Hyvä INP on 200 millisekuntia tai vähemmän.
- INP-arvo 200–500 ms tarkoittaa, että sivustosi vuorovaikutteisuutta on parannettava.
- INP-arvo yli 500 ms tarkoittaa huonoa vuorovaikutteista kokemusta käyttäjille.
Voit tarkistaa Core Web Vitals -luvut Google Search Consolesta. Navigoi vasemmasta menuvalikosta kohtaan “Sivuston suorituskyky”, ja saat alla olevan näkymän.
Mikäli Search Console sanoo, ettei dataa ole kertynyt riittävästi, voit toteuttaa auditoinnin PageSpeed-työkalun avulla. Selaimessa toimiva maksuton sovellus on Googlen oma ja auttaa sinua optimoimaan sivustosi käytettävyyttä.
CrUX Vis on Chrome User Experience Report Visualizer -työkalu, joka on Googlen tarjoama ilmainen verkkotyökalu Core Web Vitals -mittareiden analysointiin. Työkalu visualisoi aitoa käyttäjädataa CrUX-raportista (Chrome User Experience Report), näyttäen sivustosi LCP-, CLS-, INP- ja FCP-arvoja reaaliaikaisesti.
Työkalun toimintatapa perustuu maailmanlaajuisesti Chrome-selaimista haettuun kenttädataan, jota vertaillaan kilpailijoihin ja trendekihin. Kaikilla sivustoilla nämä luvut eivät ole käytössä, mutta voit testata, lyödätkö sivustosi dataa ja nykytilanteen maksuttoman verkkosovelluksen avulla.
Alla olevasta kuvasta näet, miten teknisen hakukoneoptimoinnin toimenpiteet ovat auttaneet sivuston käytettävyyden kasvussa.
LCP:n eli latausnopeuden parantaminen:
- Pakkaa kuvat eli käytä moderneja tiedostomuotoja, kuten WebP tai AVIF.
- Priorisoi kriittinen sisältö; käytä fetchpriority=”high”-attribuuttia sivun suurimmalle kuvalle (esim. herokuva).
- Vähennä palvelimen vastausaikaa (TTFB) vaihtamalla nopeampaan palvelimeen tai sisällönjakeluverkostoon (CDN).
CLS:n eli visuaalisen vakauden parantaminen
- Määritä kuville ja videoille mitat eli aseta aina width ja height, jotta selain osaa varata niille tilaa ennen lataamista.
- Älä sijoita dynaamisia mainoksia tai ponnahdusikkunoita sisällön yläpuolelle niin, että ne pudottavat tekstiä alemmas latautuessaan.
INP:n eli vuorovaikutuksen parantaminen:
- Vähennä JavaScriptin määrää, sillä liian raskas koodi tukkii selaimen pääsäikeen (Main Thread).
- Paloittele pitkät tehtävät ja jaa massiiviset skriptit pienempiin osiin, jotta selain ehtii reagoida klikkauksiin tässä välissä.
Search Consolen ja PageSpeed Insightsin eriävät tiedot voivat toisinaan hämmentää.
Tämä johtuu siitä, että kenttädata (CrUX) perustuu oikeiden käyttäjien kokemuksiin (tämä vaikuttaa hakukonesijoitukseen), kun taas laboratoriodata simuloi latausta puhtaassa ympäristössä (hyvä kehitysvaiheessa, mutta ei aina vastaa todellisuutta).
Core Web Vitalsien optimointi on sivuston laadunvalvontaa parhaimmillaan; kun koodin määrä kasvaa tai kun vaikkapa lisäät uusia kuvia, mittarit voivat heilahtaa. Seuraa tilannetta vähintään kerran kuukaudessa Search Consolesta, jotta varmistat parhaan mahdollisen kokemuksen asiakkaillesi – ja parhaat sijoitukset Googlelle.