Opas
Nopeus ja SEO:
Core Web Vitals.
Nopeus ei ole “nice to have”. Se on sekä hakukonenäkyvyyttä että liidien määrää. Tässä oppaassa käydään läpi LCP, INP ja CLS käytännön korjauksina.
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"` ja `loading="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 konversiota
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.