Core Web Vitals selitettynä verkkosivuston omistajille

Core Web Vitals on kolme Googlen käyttämää mittausta, jotka kuvaavat, miltä sivu tuntuu oikeasta kävijästä: kuinka nopeasti pääsisältö ilmestyy, kuinka nopeasti sivu reagoi napautukseen tai klikkaukseen ja hyppiikö asettelu latauksen aikana. Ne kuuluvat Googlen sivukokemussignaaleihin, mutta tärkeämpi syy välittää on yksinkertaisempi. Kävijät lähtevät hitailta ja hyppiviltä sivuilta, eivätkä he juuri koskaan kerro miksi.

Tämä opas selittää kolme mittaria selkeästi, Googlen julkaisemat raja-arvot ja miten päätät, mitä korjata ensin tavallisella pienyrityksen sivustolla.

Kolme mittaria yhdellä silmäyksellä

Mittari	Mitä se mittaa	Hyvä	Huono
LCP (Largest Contentful Paint)	Aika, kunnes suurin näkyvä elementti on piirtynyt	2,5 sekuntia tai vähemmän	Yli 4 sekuntia
INP (Interaction to Next Paint)	Kuinka kauan sivulta kestää reagoida visuaalisesti napautukseen, klikkaukseen tai näppäimen painallukseen	200 millisekuntia tai vähemmän	Yli 500 millisekuntia
CLS (Cumulative Layout Shift)	Kuinka paljon näkyvä sisältö liikkuu odottamatta	0,1 tai vähemmän	Yli 0,25

Arvot "hyvän" ja "huonon" välillä kuuluvat "kaipaa parannusta" -alueelle. Google arvioi sivun todellisten vierailujen 75. persentiilissä, mikä tarkoittaa, että kolmen neljänneksen kävijöistäsi pitäisi saada kokemus, joka on raja-arvon tasolla tai parempi. Yksi nopea testi omalla kannettavalla ei todista sivun läpäisevän.

Largest Contentful Paint: ilmestyykö sivu?

LCP katsoo ensimmäisen näytön suurinta kuvaa, videon julistetta tai tekstilohkoa ja kirjaa, milloin sen piirtäminen valmistuu. Useimmilla sivustoilla tämä on pääkuva tai suuri otsikko. Hidas LCP johtuu yleensä yhdestä neljästä syystä: hidas palvelinvaste, raskas tai huonosti muotoiltu kuva, renderöintiä estävä CSS tai JavaScript tai se, että selain löytää avainkuvan liian myöhään.

Interaction to Next Paint: reagoiko sivu?

INP korvasi vanhemman First Input Delay -mittarin maaliskuussa 2024. Siinä missä First Input Delay katsoi vain ensimmäistä vuorovaikutusta ja vain viivettä ennen sen alkua, INP huomioi vuorovaikutukset koko vierailun ajalta ja raportoi yhden hitaimmista, syötteestä seuraavan kuvan piirtämiseen. Sivut, jotka latautuvat nopeasti mutta tuntuvat tahmeilta valikon avaamisessa tai painikkeen painamisessa, kärsivät yleensä JavaScript-ongelmasta: liikaa koodia ajetaan pääsäikeellä kerralla.

Cumulative Layout Shift: pysyykö sivu paikallaan?

CLS laskee yhteen näkyvien elementtien odottamattoman liikkeen. Olet kokenut tämän, kun aiot napauttaa linkkiä ja banneri latautuu sen yläpuolelle työntäen linkin alas. Yleisiä aiheuttajia ovat kuvat ilman leveys- ja korkeusattribuutteja, myöhään latautuvat mainokset ja upotteet, fontit, jotka vaihtuvat ja muuttavat tekstin kokoa, sekä sivun yläosaan lisättävät evästebannerit.

Laboratoriodata vs. kenttädata

Mittauksia on kahta lajia, ja niiden sekoittaminen aiheuttaa hämmennystä.

• Kenttädata tulee oikeilta kävijöiltä, jotka käyttävät oikeita laitteita ja verkkoja. Google kerää sen Chrome-käyttäjiltä ja näyttää sen PageSpeed Insightsissa ja Search Consolessa, kun sivustollasi on tarpeeksi liikennettä. Tämä on se, mikä lasketaan arvioinnissa.
• Laboratoriodata tulee simuloidusta testistä, kuten Lighthouse. Se on toistettavissa, mikä tekee siitä ihanteellisen virheenetsintään, mutta se on yksi laite yhdellä yhteydellä.

Pienellä sivustolla ei välttämättä ole lainkaan kenttädataa. Käytä silloin laboratoriotestejä ongelmien löytämiseen ja pidä tuloksia ohjeena, älä tuomiona.

Mistä korjaaminen kannattaa aloittaa

1. Mittaa tärkeät sivut. Testaa etusivusi, eniten vierailtu laskeutumissivusi ja tyypillinen artikkeli- tai tuotesivu mobiiliprofiililla. Älä keskiarvoista koko sivustoa.
2. Korjaa heikoin mittari ensin. Jos LCP on huono ja CLS kunnossa, keskity LCP:hen.
3. Aloita edullisista voitoista. Pakkaa ja pienennä pääkuva, aseta kuville mitat, ota välimuisti käyttöön, harkitse CDN:ää ja poista lisäosat tai skriptit, joita et enää käytä.
4. Testaa uudelleen jokaisen muutoksen jälkeen. Muuta yhtä asiaa kerrallaan, jotta tiedät, mikä auttoi.
5. Odota kenttädatan päivittymistä. Todelliset luvut kerätään liukuvalla jaksolla, joten parannukset näkyvät täysin vasta muutaman viikon kuluttua.

Mitä hostingilla on tekemistä asian kanssa

Core Web Vitals liittyy enimmäkseen siihen, miten sivu on rakennettu, mutta hosting asettaa lattian. Hidas palvelinvaste viivästyttää kaikkea sen jälkeen tulevaa, mikä vaikuttaa suoraan LCP:hen. Ruuhkaiset palvelimet, vanhentuneet PHP-versiot ja puuttuva palvelinpuolen välimuisti lisäävät kaikki aikaa ennen kuin selain saa ensimmäisen tavun. Hyvä front-end-työ ei voi täysin korvata hidasta taustajärjestelmää.

Realistiset odotukset

Kaikkien kolmen mittarin läpäiseminen on kannattava tavoite, mutta se ei ole taikakytkin sijoituksiin. Sisällön relevanssilla on edelleen paljon enemmän merkitystä. Ajattele Core Web Vitalsia kitkan poistamisena: ne eivät saa heikkoa sivua sijoittumaan hyvin, mutta hidas, hyppivä sivu vaikeuttaa jo ansaittujen kävijöiden pitämistä.

Yleisiä virheitä, joita sivustojen omistajat tekevät

• Täydellisen Lighthouse-pistemäärän tavoittelu. 100 pisteen tulos laboratoriotestissä ei ole tavoite. Tavoite on kolmen raja-arvon läpäiseminen oikeille kävijöille.
• Testaus vain työpöydällä. Suurin osa arvioinnista tehdään mobiilissa, ja mobiililaitteilla on hitaammat suorittimet ja yhteydet.
• Nopeuslisäosan asentaminen ja siihen pysähtyminen. Lisäosat voivat auttaa välimuistissa ja kuvien käsittelyssä, mutta ne eivät voi poistaa 3 Mt:n pääkuvaa tai tusinaa markkinointiskriptiä.
• Sivupohjien sivuuttaminen. Samasta pohjasta rakennetuilla sivuilla on yleensä samat ongelmat, joten pohjan korjaaminen korjaa monta sivua kerralla. Search Console ryhmittelee samankaltaiset URL-osoitteet juuri tästä syystä.

Pidä yksinkertaista lokia siitä, mitä muutit, ja pistemäärästä ennen ja jälkeen. Se säästää arvailulta, kun jokin heikkenee lisäosapäivityksen jälkeen.

Nopeat sivut alkavat palvelimesta

Zebra Hosting Cloudissa jokaiseen pakettiin kuuluu Plesk-hallintapaneeli, jossa voit valita ajantasaiset PHP-versiot, ja Cloudflare CDN on käytettävissä ylläpidetyillä sivustoilla staattisten tiedostojen tarjoiluun lähempää kävijöitä. Yhdessä nämä kattavat yhtälön palvelinpuolen, jotta voit keskittyä itse sivuun. Katso, mitä kukin paketti tarjoaa hosting-yleiskatsauksessa.