Miten Core Web Vitals -arvoja ja LCP:tä voidaan alentaa
Mitä Core Web Vitals on?
Core Web Vitals on kolme Googlen määrittelemää keskeistä suorituskykymittaria, joilla mitataan käyttökokemusta: LCP (Largest Contentful Paint – suurimman sisältöelementin näkyminen ruudulla), INP (Interaction to Next Paint – käyttäjän vuorovaikutukseen reagoinnin nopeus) ja CLS (Cumulative Layout Shift – sivun latautumisen aikana tapahtuvan visuaalisen siirtymän määrä). Nämä kolme mittaria mitataan todellisten käyttäjätietojen (field data) perusteella; toisin sanoen niitä ei lasketa laboratoriotestien (esim. kertaluonteisen tarkastuksen) perusteella, vaan todellisilta kävijöiltä laite- ja verkko-olosuhteissa kerättyjen tietojen pohjalta.
Nämä kolme mittaria edustavat käyttökokemuksen eri ulottuvuuksia: LCP antaa käsityksen siitä, ”kuinka nopeasti sivu tuntuu latautuvan”, INP vastaa kysymykseen ”kuinka nopeasti sivu reagoi vuorovaikutukseen”, ja CLS mittaa sitä, ”hyppääkö sivu silmieni edessä”. Kokonaiskäyttökokemusta ei voida pitää täysin ”hyvänä”, elleivät kaikki kolme ole hyviä.
Tässä oppaassa keskitytään erityisesti LCP:hen, koska se on yleensä mittari, johon voidaan eniten vaikuttaa ja joka tarjoaa konkreettisimmat parannusmahdollisuudet; suuri hero-kuva tai video voi yksinään viivästyttää LCP:tä jopa sekunteja.
Miksi se on tärkeää?
Nämä mittarit heijastavat suoraan käyttökokemusta: hitaasti latautuva, hitaasti reagoiva tai jatkuvasti liukasteleva sivu ajaa käyttäjän pois sivustolta. Google käyttää Core Web Vitals -mittareita yhtenä sijoitussignaalina; erityisesti mobiilihauissa näiden mittareiden vaikutus voi olla selvempi, koska mobiililaitteet ja verkot ovat yleensä rajoitetumpia kuin pöytätietokoneet.
Nykyisten kynnysarvojen mukaan LCP:n katsotaan olevan ”hyvä”, jos se on alle 2,5 sekuntia ja tämä tulos saavutetaan vähintään 75 prosentilla todellisista käyttäjistä. Tämän kynnysarvon ylittävä sivusto luokitellaan käyttökokemuksen kannalta ”hitaaksi”, vaikka se toimisikin teknisesti, ja tämä voi vaikuttaa negatiivisesti sekä konversioasteeseen että hakusijoitukseen.
LCP:n hitauden syy voi vaihdella sivustoittain: joissakin sivustoissa syynä on suuri, pakkaamaton kuva, kun taas toisissa pääasiallinen syy on hidas palvelimen vastausaika (TTFB) tai renderointia estävät kolmannen osapuolen skriptit (esim. mainosverkostot, analyysityökalut). Siksi on tärkeää selvittää, mikä elementti on merkitty LCP:ksi, ennen kuin ryhdytään parannustoimiin.
Miten se korjataan?
- Optimoi LCP-elementin muodostava kuva (yleensä hero-kuva): sopiva koko, moderni tiedostomuoto (WebP/AVIF), pakkaus.
- Lisää LCP-kuvaan
<link rel="preload">, jotta selain havaitsee sen varhaisessa vaiheessa; tämä varmistaa, että kuva ladataan ensisijaisesti eikä samanaikaisesti muiden resurssien kanssa. - Lyhennä palvelimen vastausaikaa (TTFB): välimuisti, nopea hosting, CDN:n käyttö.
- Vähennä tai lykkää (defer/async) renderointia estäviä CSS-/JS-tiedostoja; selain voi lykätä sivun piirtämistä, kunnes se on ladannut ja suorittanut nämä tiedostot.
- Vähennä maantieteellistä viivettä jakamalla staattiset resurssit CDN:n kautta; vastaaminen käyttäjälle lähimmältä palvelimelta lyhentää viivettä.
Esimerkki
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">Huono esimerkki: LCP-kuvan <img src="hero.jpg" loading="lazy"> lazy load -asetukseksi — tämä estää selainta lataamasta kuvaa heti sivun latautuessa ja pidentää LCP-aikaa huomattavasti.
Yleisiä virheitä
- LCP-kuvan tarjoaminen tarpeettoman suurena ja pakkaamattomana.
- Kaikkien CSS- tai JS-tiedostojen yhdistäminen yhdeksi suureksi tiedostoksi, mikä estää sivun renderoinnin.
loading="lazy"Ominaisuuden soveltaminen vahingossa LCP-kuvaan (ensimmäisellä näytöllä näkyvään kuvaan) — tämä viivästyttää LCP:tä, koska selain lykkää lataamista, kunnes se näkee kuvan.- Palvelimen vastausajan huomiotta jättäminen ja vain käyttöliittymän optimointi.
- Kun Seoraporu.co-raportin LCP-mittaus ylittää 2,5 sekuntia, on ensin selvitettävä, mikä elementti on merkitty LCP:ksi, ja annettava sille etusija; kohdennettu toimenpide on tehokkaampi kuin yleinen ”optimoi kaikki” -lähestymistapa.
- Tarkista säännöllisesti, miten kolmannen osapuolen skriptit (mainokset, analytiikka, chat-widget) vaikuttavat sivun latausjärjestykseen; ne voivat kertyä ajan myötä ja heikentää suorituskykyä vähitellen.
- CLS:n sivuuttaminen ja keskittyminen pelkästään LCP:hen voi aiheuttaa sisällön äkillisen siirtymisen sivun latautuessa, jos kuvien tai mainosten kokoa ei ole määritelty.