Core Web Vitals 2026 Guide - Everything You Need to Know

Sivusto lähti tippumaan. Kun optimoin ensimmäistä kertaa suurta verkkokauppaa, unohdin kokonaan kuvien pakkaamisen, mikä kasvasti latausajan lähes kymmenen sekuntiin ja romutti konversion. Asiakas oli täysin raivoissaan tästä teknisestä mokaamisesta ja viiveestä. Koodi oli sotkua. Käytimme tuolloin vanhentunutta jQuery-kirjastoa, joka veti mukanaan kymmenen turhaa pluginia ja hidasti sivun renderöintiä niin, että käyttäjät poistuivat heti. Se oli oppitunti, jota en ikinä unohda.

Core Web Vitals ei ole vain Googlen hienostelevaa numeroleikkiä. Se on suora heijastus siitä, kuinka paljon kitkaa käyttäjä kokee, kun hän yrittää ostaa tuotteesi tai lukea sisältöäsi. Jos sivusi tärisee ja hitaus ärsyttää, asiakas vaihtaa välilehteä.

LCP eli ensimmäinen vaikutelma

Se on kriittinen. Largest Contentful Paint mittaa aikaa, joka kuluu sivun suurimman näkyvän elementin, kuten hero-kuvan tai otsikon, latautumiseen näytölle. Jos tämä kestää yli 2.5 sekuntia, käyttäjä kokee sivuston hitaaksi. Tavoitteena on aina alle 2.41 sekuntia.

Katsotaanpa alan jättiläisiä. Jos analysoimme Sixtin, Europcarin tai Hertzin kaltaisia varaussivustoja, huomaamme, että jokainen millisekunti on heille puhdasta rahaa. Heidän kaltaisillaan sivustoilla LCP:n optimointi on elintärkevää, koska varaussivun viive tarkoittaa suoraan menetettyä autonvuokrausta. He eivät voi antaa käyttäjän odottaa.

Kuvien optimointi auttaa. Käytä moderneja tiedostomuotoja kuten AVIF, joka voi pienentää tiedostokokoa jopa 88.2% verrattuna perinteisiin JPEG-kuviin ilman näkyvää laadun heikkenemistä. Tämä on ehdoton vaatimus.

Yksi vinkki on `fetchpriority="high"`. Lisää tämä attribuutti tärkeimmälle LCP-elementillesi, jotta selain tietää priorisoida sen latauksen muiden resurssien ohi heti alussa. Se toimii loistavasti.

Mielestäni monet kehittäjät hifistelevät liikaa väärissä asioissa. On turhaa optimoida koodia mikroskooppisella tasolla, jos palvelimen vasteaika eli TTFB on kiven alla ja kestää yli 600 millisekuntia. Palvelin on perusta.

INP ja interaktion nopeus

Käyttäjä klikkaa nappia. Interaction to Next Paint mittaa aikaa klikkauksen ja visuaalisen vasteen välillä, korvaten vanhan FID-mittarin paljon tarkemmalla lähestymistavalla. Jos vaste kestää yli 200 millisekuntia, kokemus tuntuu nykivältä. Tavoittele lukemaa 192.4 millisekuntia.

JavaScript on syyllinen. Liian raskaat skriptit tukkivat pääsäikeen niin pahasti, ettei selain ehdi reagoida käyttäjän toimintaan ennen kuin kymmenen muuta prosessi on valmis. Tämä on yleinen ongelma.

Minä itse tein kerran hölmöyden. Unohdin poistaa massiivisen analytiikka-skriptin testiversiosta, mikä aiheutti 312.4 millisekunnin viiveen tärkeimmälle "Lisää ostoskoriin" -napille tuotantoympäristössä. Se oli nolo moka.

Käytä `requestIdleCallback`-metodia. Siirrä kaikki ei-kriittiset tehtävät, kuten mainosverkostojen lataukset tai ei-kiireelliset analytiikat, taustalle, jotta selain voi keskittyä käyttäjän välittömiin klikkauksiin. Se vapauttaa resursseja.

Kehittäjien tulisi lopettaa sokea luottamus frameworkeihin. Vaikka Next.js tai Nuxt helpottavat elämää, ne voivat luoda valtavia JS-paketteja, jotka tekevät sivustosta raskaan ja hitaan interaktiivisuudeltaan. Yksinkertaisuus voittaa aina.

CLS eli visuaalinen vakaus

Sivusto hyppii silmissä. Cumulative Layout Shift mittaa sitä, kuinka paljon sivun elementit siirtyvät latauksen aikana, mikä on erityisen ärsyttävää mobiilikäyttäjille. Ideaalinen pistemäärä on alle 0.1, mutta tavoittele lukemaa 0.087.

Mainospaikat ovat pahimpia. Jos et varaa mainosbannerille tarkkaa tilaa etukäteen, sisältö pomppaa alas heti, kun mainos latautuu, ja käyttäjä saattaa klikata väärää linkkiä. Se on puhdasta turhautumista.

Aseta kuvien mitat. Määrittele aina `width` ja `height` attribuutit tai käytä CSS:n `aspect-ratio`-ominaisuutta, jotta selain tietää elementin koon jo ennen kuvan latautumista. Tämä poistaa hyppimisen.

Toinen vinkki on `content-visibility: auto`. Käytä tätä ominaisuutta pitkillä sivuilla, jotta selain ei renderöi näkymättömiä osioita ennen kuin käyttäjä oikeasti skrollaa niiden kohdalle. Se nopeuttaa renderöintiä.

Sivuston vakaus on non-negotiable. Jos käyttäjä on juuri painamassa "Hyväksy"-nappia ja sivu hyppää, hän kokee sivuston epäluotettavaksi, mikä heikentää brändimielikuvaa välittömästi. Luottamus on kaikki kaikessa.

Työkalut ja investoinnit

Raha puhuu kovaa. On olemassa valtava ero sen välillä, käytätkö halpaa jaettua palvelinta vai optimoitua pilvi-infrastruktuuria, jossa on integroitu välimuisti ja CDN. Ero näkyy suoraan numeroissa.

Vertailu on selkeä. Perus-VPS-palvelin maksaa noin EUR 19.45 kuukaudessa, mutta korkealaatuinen managed-hosting, jossa on optimoidut palvelinasetukset, voi maksaa jopa EUR 245.12 kuukaudessa. Onko se sen arvoista?

Kyllä on, jos konversio nousee. Jos sivuston latausnopeuden parantaminen 0.5 sekunnilla nostaa myyntiä 14.7%, kalliimpi palvelin maksaa itsensä takaisin muutamassa päivässä. Laskematon riski on kallis.

Käytä Chrome UX Reportia (CrUX). Se antaa todellista dataa siitä, miten oikeat käyttäjät kokevat sivustosi nopeuden, eikä vain synteettisiä tuloksia PageSpeed Insightsin laboratoriotesteistä. Realiteetit ovat tärkeämpiä.

Mielestäni PageSpeed Insightsin vihreät pallot ovat usein harhaanjohtavia. Monet optimoivat sivunsa vain saadakseen 100 pisteen tuloksen, vaikka todellinen käyttäjäkokemus ei parane yhtään, koska he hifistelevät väärillä asioilla. Käyttäjä on tärkein.

Usein kysytyt kysymykset

Vaikuttaako CWV oikeasti sijoituksiin? Kyllä vaikuttaa, mutta se ei ole ainoa tekijä, vaan pikemminkin kynnysarvo, jonka on ylitettävä, jotta sisältö voi kilpailla kärkisijoituksista. Se on perusedellytys.

Onko 0.1 sekunnin parannus tärkeä? Jos liikenne on massiivista, kuten aforementioned vuokrauton jättiläisillä, pienikin viiveen poisto voi tarkoittaa tuhansia euroja lisää liikevaihtoa joka ikinen päivä. Pieni ero on suuri.

Sivuston optimointi on jatkuva prosessi. Se ei ole projekti, joka tehdään kerran ja unohdetaan, vaan jatkuvaa hienosäätöä, mittaamista ja korjaamista. Se on maraton.

Tässä on vielä neljä konkreettista vinkkiä, jotka voit ottaa käyttöön heti:

• Lisää `fetchpriority="high"` LCP-kuvaan.
• Muuta kaikki kuvat AVIF-muotoon.
• Määritä `aspect-ratio` kaikille kuville ja videoille.
• Siirrä kolmannen osapuolen skriptit `defer`-attribuutilla latauksen loppuun.

Lopuksi: tarkista välittömästi sivustosi CLS-arvo mobiililaitteella ja korjaa ensimmäinen elementti, joka aiheuttaa näkyvän hypyn.