Core Web Vitals

Net­ti­si­vu­jen vie­rai­li­jois­ta 10% poistuu, jos net­ti­si­vut eivät ole riittävän käy­tet­tä­vät.  40 % poistuu, jos net­ti­si­vu­jen la­taa­mi­nen kestää yli 3 sekuntia. On siis oleel­lis­ta, että net­ti­si­vu­jen käyt­tö­ko­ke­mus on kunnossa.

Mitä Core Web Vitals tar­koit­taa?

Core Web Vitals -mit­ta­rei­den ta­voit­tee­na on mitata net­ti­si­vu­jen käyt­tö­ko­ke­mus­ta. Se koostuu  la­taus­no­peu­den, in­te­rak­tii­vi­suu­den ja vi­su­aa­lis­ta vakauden mit­taa­mi­ses­ta. Core Web Vitals sisältyy Googlen kutsumiin Page Ex­pe­rience -mit­ta­rei­hin. Näitä mit­ta­rei­ta ovat myös mo­bii­liys­tä­väl­li­syys, HTTPS-suojaus sekä häi­rit­se­vät vä­li­ta­pah­tu­mat, kuten pop-upit. Core Web Vitals -mittarit ovat seuraavat:

Largest Con­tent­ful Paint (LCP)

Aika se­kun­tei­na ennen kuin käyttäjä näkee sivun suurimman si­säl­tö­ele­men­tin. Alle 2,5 sekuntia pidetään hyvänä käyt­tä­jä­ko­ke­mus­ta ajatellen.

First Input Delay (FID)

Tällä mitataan käyttäjän in­te­rak­tii­vi­suut­ta (esim. kun käyttäjä klikkaa jotain pai­ni­ket­ta sivulla). Tämän arvon on hyvä olla alle 100 mil­li­se­kun­tia.

Cu­mu­la­ti­ve Layout Shift (CLS)

Sivun vi­su­aa­li­nen vakaus, eli vaih­ta­vat­ko elementit sivulla paikkaa latauksen aikana. Arvon tulisi olla alle 0,1. Mitä isompi arvo, sitä enemmän elementit siirtyvät sivulla latauksen aikana, joka on käyt­tä­jä­ko­ke­muk­sen kannalta huonoa.

Mobiili käyt­tö­ko­ke­mus

Net­ti­si­vu­jen toiminta mo­bii­li­lait­teil­la on tärkeää, sillä yhä useammat ihmiset käyttävät net­ti­si­vu­ja mo­bii­li­lait­teil­la. Tällä työ­ka­lul­la voit tarkistaa, onko verk­ko­si­vus­to mo­bii­liys­tä­väl­li­nen. Core Web Vitals tekee mo­bii­li­suo­ri­tus­ky­vys­tä entistä suuremman tekijän Googlen al­gor­ti­mis­sä. Siksi on tärkeää, että verk­ko­si­vus­tot toimivat erin­omai­ses­ti myös mo­bii­li­lait­teil­la.

Hyvä käyt­tö­ko­ke­mus ei ole vain nopeita la­tausai­ko­ja. Tässä on muutamia asioita, joita voit tehdä itse pa­ran­taak­se­si mo­bii­li­käyt­tö­ko­ke­mus­ta:

Sisältö

Kännykän näytön tila on ra­jal­li­nen, joten sisältö kannattaa pitää yk­sin­ker­tai­se­na. Käytä lyhyitä, yti­mek­käi­tä lauseita ilman li­sä­sa­no­ja, mutta muista, että sisällön tulee olla sama pöy­tä­ko­neil­la ja mo­bii­li­lait­teil­la. Oidom tekee siitä helppoa sillä sivusto op­ti­moi­daan au­to­maat­ti­ses­ti toimimaan kaikilla lait­teil­la.

Fontit

Käytä mah­dol­li­sim­man vähän erilaisia  fontteja. Mitä yh­te­näi­sem­pi kir­ja­sin­tyyp­pi on, sitä helpommin tekstit ovat luet­ta­vis­sa pieniltä näytöiltä. Käytä esi­mer­kik­si yhtä fonttia ot­si­kois­sa ja toista lei­pä­teks­tis­sä. Pienille näytöille suo­si­tel­laan päät­teet­tö­miä fontteja (sans-serif). Oidomilla tehtyjen net­ti­si­vu­jen fonttien vaihto onnistuu helposti teeman ase­tuk­sis­ta.

Core Web Vitals -työkaluja tes­taa­mi­seen

Google tarjoaa useita työkaluja, joilla omien ja muidenkin sivujen Core Web Vitals -arvoja voi testata. 

Google Light­house

Google Light­house on ehkä helpoin tapa mitata,  jos käytät Chrome selainta. Light­house on Googlen kehittämä avoimen läh­de­koo­din työkalu, joka auttaa ko­ti­si­vu­jen nopeuden, ha­ku­ko­neop­ti­moin­nin, käy­tet­tä­vyy­den ja saa­vu­tet­ta­vuu­den op­ti­moin­nis­sa. Light­housen löydät työ­ka­lui­hin pääset joko klik­kaa­mal­la sivua hiiren oikealla pai­nik­keel­la ja va­lit­se­mal­la "Tarkista" tai va­lit­se­mal­la Chromen pää­va­li­kos­ta "Näytä" -> "Ke­hit­tä­jäl­le" -> "Ke­hit­tä­jän työkalut". Raportti ajetaan pai­na­mal­la "Generate Report" -pai­ni­ket­ta. Testin tulokset voivat vaihdella tes­ti­ker­roit­tain, joten testi kannattaa ajaa muutamaan otteeseen. Testaus kannattaa tehdä mo­bii­li­lait­teel­la, niin kuin testissä ole­tuk­se­na onkin valintana. 

Google Pagespeed Insights

Pagespeed Insights on Googlen suoraan netissä toimiva palvelu. Löydät sen osoi­tees­ta: https://pagespeed.web.dev/

Jos net­ti­si­vul­la on tarpeeksi kävijöitä kertoo Pagespeed Insights to­del­lis­ten si­vus­tol­la vie­rail­lei­den käyt­tä­jien  ko­ke­muk­seen pe­rus­ta­vaa tietoa. Jos käyt­tä­jä­da­taa ei ole riit­tä­väs­ti saa­ta­vil­la, ajetaan ta­val­li­nen Light­house-tyyppinen testi sivulle suoraan.

Google Search Console

Jokainen nettisivu kannattaa aina lisätä Google Search Consoleen. Sitä kautta saat arvokasta tietoa sivusi toi­min­nas­ta ja näet helposti jos jossain on ongelmia. Expirence kohdan alta lötyyy myös Core Web Vitals sivu, mikä kertoo kuinka hyviä tuloksia eri sivusi on saanut. Tässäkin kannattaa katsoa lähinnä mobiili-tuloksia.

Oidom ja net­ti­si­vu­jen op­ti­moin­ti

Oidom optimoi jokaisen net­ti­si­vun, jotta ne saisivat hyvät Core Web Vitals -tulokset. Viime aikoina olemme tehneet seuraavia net­ti­si­vu­jen toimintaa no­peut­ta­via pa­ran­nuk­sia Oidom-ko­ti­si­vu­ko­nee­seen:

AVIF - Seuraavan su­ku­pol­ven kuvamuoto

Kuvat ovat yleensä verk­ko­si­vus­ton suurimpia tie­dos­to­ja ja vii­väs­tä­vät sivun la­tau­tu­mis­ta mer­kit­tä­väs­ti niiden la­taa­mi­sen aikana. Kuvat voivat pudottaa Core Web Vitals -arvoja ja siten va­hin­goit­taa tuloksia ha­ku­ko­neis­sa. Uusim­mis­sa päi­vi­tyk­sis­säm­me olemme ottaneet käyttöön tuen AVIF-kuville. Muunnamme jokaisen Oidomissa ladatun kuvan AVIF-ku­va­muo­toon. AVIF on optimoitu kuvamuoto, joka luotiin kuvien pie­nen­tä­mi­sek­si säi­lyt­täen samalla laadun. AVIF-kuvat ovat kooltaan jopa 10 kertaa pienempiä kuin PNG- tai JPG-kuvat. Se­lai­mes­sa, joka ei vielä tue AVIF-kuvia, näytämme kuvat PNG-muodossa.

Fontit ladataan pai­kal­li­ses­ti

Oidomissa voit valita fontteja laajasta Google-fonttien va­li­koi­mas­ta. Google Fontit voivat kuitenkin latautua hieman hitaasti, eikä niiden käyttö ole GDPR-yh­teen­so­pi­vaa. Muutimme fontit la­tau­tu­maan pai­kal­li­ses­ti oman CDN:n kautta. Näin ollen fontit la­tau­tu­vat entistä nopeammin ja tur­val­li­sem­min.

Hyvät Core Web Vitals tulokset helposti Oidomilla

Oidomilla ta­voit­tee­nam­me on tehdä in­ter­ne­tis­tä osaltamme helpompaa. Hyvien Core Web Vitals -tuloksien saa­vut­ta­mi­nen ei yleensä ole niin helppoa ja sivujen op­ti­moin­ti vaatii paljon työtä. Oidomin kanssa se on helppoa. Työs­ken­te­lem­me jat­ku­vas­ti teh­däk­sem­me Oidomilla tehdyistä verk­ko­si­vus­tois­ta en­tis­tä­kin nopeampia. Tu­le­vai­suu­des­sa teemme pa­ran­nuk­sia kolmannen osapuolen skriptien la­tauk­seen, kart­tao­sion la­taa­mi­seen ja Ja­vasc­rip­tin toi­min­taan.