Oppaat · Nopeus & SEOCore Web Vitals
Core Web Vitals
käytännössä.
Nopeus ei ole "nice to have" — se vaikuttaa suoraan sekä hakukonenäkyvyyteen että siihen, ottaako asiakas yhteyttä. LCP, INP ja CLS selitettynä.
1) LCP – tee tärkeimmästä asiasta nopein
LCP (Largest Contentful Paint) kertoo milloin sivun tärkein sisältö on näkyvissä. Usein LCP on hero-kuva tai iso otsikko. Tyypilliset korjaukset:
- Optimoi kuvat: AVIF/WebP, oikea koko, ei turhaa megatavua.
- Priorisoi LCP-resurssi:
fetchPriority="high"jaloading="eager"hero-kuvalle. - Fontit hallintaan: vähemmän painoja, nopea lataus,
font-display: swap. - Vähennä render-blocking: minimoi kriittinen JS/CSS-työ.
2) INP – vähemmän viivettä, enemmän tuloksia
INP (Interaction to Next Paint) mittaa kuinka nopeasti sivu reagoi käyttäjän toimintaan. Yleinen syy huonoon INP:hen on liian raskas JS ja isot animaatiot.
- Karsi JS-kuormaa: jaa koodi reiteittäin, poista turhat kirjastot.
- Animaatiobudjetti: vältä suurten DOM-puiden animointia.
- Debounce: scroll/resize-handlerit, vältä jatkuvaa laskentaa.
3) CLS – ei hyppelevää layoutia
CLS (Cumulative Layout Shift) kertoo pomppiiko sivun sisältö latauksen aikana. Se syö luottamusta ja heikentää konversiota.
- Varaa tilat: kuville ja upotuksille aina selkeä koko.
- Fontit: minimoi vaihtelut ja käytä swap-strategiaa.
- Vältä myöhäisiä injektioita: bannerit ja modaalit eivät saa työntää layoutia.