Mitä ovat Core Web Vitals ja miten ne vaikuttavat SEO:oon?

Core Web Vitals on Googlen määrittelemä mittarisarja, joka arvioi verkkosivuston käyttäjäkokemusta kolmen konkreettisen mittarin avulla. Google otti Core Web Vitals viralliseksi rankingfaktoriksi vuonna 2021, ja ne ovat tänä päivänä yksi tärkeimmistä teknisen SEO:n osa-alueista. Mittarit keskittyvät siihen, miten nopeasti sivu latautuu, miten nopeasti se reagoi käyttäjän toimintoihin ja kuinka vakaasti se renderöityy.

LCP mittaa, kuinka nopeasti sivun suurin näkyvä sisältöelementti latautuu. Se on yleensä hero-kuva, suuri otsikko tai videon pikkukuva. LCP mittaa käyttäjän kokemaa latausnopeutta paremmin kuin perinteiset sivunlatausmittarit, koska se keskittyy siihen, milloin sivu tuntuu valmiilta.

• Hyvä: alle 2,5 sekuntia
• Parannettavaa: 2,5–4,0 sekuntia
• Heikko: yli 4,0 sekuntia

LCP:n yleisimmät ongelmat ovat suuri pakkaamaton hero-kuva, hidas palvelimen vasteaika, renderöintiä estävät JavaScript- tai CSS-tiedostot sekä puuttuva lazy loading prioriteettijärjestyksessä. LCP-elementin löydät Chrome DevToolsin Performance-välilehdeltä tai PageSpeed Insights -raportista.

INP korvasi vuonna 2024 vanhan FID-mittarin (First Input Delay) ja mittaa, kuinka nopeasti sivu reagoi käyttäjän kaikkiin vuorovaikutuksiin koko sivuvierailun aikana, ei vain ensimmäiseen. Käytännössä INP mittaa sitä, kuinka sulava sivusto tuntuu käyttää: reagoivatko napit, lomakkeet ja valikot välittömästi vai onko pieni viive.

• Hyvä: alle 200 millisekuntia
• Parannettavaa: 200–500 millisekuntia
• Heikko: yli 500 millisekuntia

INP-ongelmien taustalla on useimmiten raskas JavaScript, joka estää selaimen pääsäikeen reagoimasta käyttäjän toimintoihin. Kolmannen osapuolen skriptit, kuten chat-widgetit, analytiikkatyökalut ja mainosverkostot, ovat yleisiä syyllisiä.

CLS mittaa sivun visuaalista vakautta eli sitä, kuinka paljon sivun elementit siirtyvät latauksen aikana. Jos olet koskaan yrittänyt klikata nappia ja se on hypännyt juuri ennen klikkausta toiseen paikkaan, olet kokenut korkean CLS:n. Se on ärsyttävä ja johtaa usein tahattomiin klikkauksiin.

• Hyvä: alle 0,1
• Parannettavaa: 0,1–0,25
• Heikko: yli 0,25

CLS-ongelmien yleisimmät syyt ovat kuvat ilman määriteltyjä dimensioita, mainokset tai upotukset ilman varattua tilaa, fontit jotka vaihtuvat latauksen aikana sekä dynaamisesti lisätty sisältö, joka työntää olemassa olevaa sisältöä sivuun.

• Pakkaa ja optimoi hero-kuva. Käytä WebP-formaattia ja pidä kuvan tiedostokoko mahdollisimman pienenä
• Lisää fetchpriority="high" -attribuutti LCP-elementtiin, jotta selain priorisoi sen lataamisen
• Ota käyttöön välimuisti ja CDN palvelinvasteajan lyhentämiseksi
• Poista tai lykkää renderöintiä estävät resurssit async- tai defer-attribuuteilla
• Käytä resource hints kuten <link rel="preload"> LCP-kuvan esilatamiseen

• Tunnista raskaat JavaScript-tehtävät Chrome DevToolsin Performance-välilehdeltä ja optimoi ne
• Lataa kolmannen osapuolen skriptit asynkronisesti async- tai defer-attribuuteilla
• Harkitse tarpeettomien kolmannen osapuolen skriptien poistamista kokonaan. Jokainen chat-widget, mainosverkosto ja analytiikkatyökalu lisää JavaScriptin määrää
• Käytä web workereita raskaiden laskutoimitusten siirtämiseen pois pääsäikeeltä

• Määritä kaikille kuville width- ja height-attribuutit HTML:ssä, jotta selain osaa varata niille tilan ennen latautumista
• Varaa mainoksille ja upotetuille elementeille kiinteä tila CSS:ssä
• Käytä font-display: optional tai font-display: swap verkkofonttilatauksen stabiloimiseen
• Vältä dynaamisen sisällön lisäämistä sivun yläosaan latauksen jälkeen

Core Web Vitals -mittaukset jaetaan kahteen tyyppiin: laboratorio-olosuhteiden mittauksiin ja oikeiden käyttäjien dataan. Molemmat ovat tärkeitä mutta eri syistä.

• Google PageSpeed Insights näyttää sekä laboratorio- että kenttädatan samassa näkymässä. Se on nopein tapa tarkistaa yksittäisen sivun tilanne ja saada konkreettisia parannusehdotuksia
• Google Search Console näyttää Core Web Vitals -raportin koko sivuston tasolla oikeaan käyttäjädataan perustuen. Se ryhmittelee sivut “Hyvä”, “Parannettavaa” ja “Heikko” -kategorioihin ja kertoo, mitkä sivut vaativat toimenpiteitä
• Chrome DevTools mahdollistaa syvällisemmän analyysin ja ongelmanmäärityksen kehittäjätasolla
• Lighthouse on Chromeen sisäänrakennettu työkalu, joka antaa yksityiskohtaisen raportin suorituskyvystä ja parannusehdotuksista
• WebPageTest tarjoaa edistyneimmän analyysin eri verkkonopeuksilla ja laitteilla testattuna

Tärkeä huomio: laboratorio-olosuhteiden mittaukset, kuten Lighthouse, testaavat sivua hallituissa olosuhteissa, mutta todelliset käyttäjät käyttävät eri laitteita ja verkkoyhteyksiä. Google käyttää rankingissa oikeaa käyttäjädataa eli kenttädataa, joten seuraa erityisesti Search Consolesta löytyvää CrUX-dataa (Chrome User Experience Report).

WordPressissä Core Web Vitals -tuloksia parannetaan useimmiten välimuistilisäosalla ja kuvaoptimointilisäosalla. WP Rocket on kattavin vaihtoehto, koska se yhdistää välimuistin, JavaScript-optimoinnin, lazy loadingin ja CDN-integraation yhteen lisäosaan. LiteSpeed Cache on ilmainen vaihtoehto LiteSpeed-palvelimilla. Imagify, ShortPixel tai Smush hoitavat kuvien pakkauksen ja WebP-konversion automaattisesti.

Vältä liian monen lisäosan asentamista, koska jokainen lisäosa lisää JavaScriptin ja CSS:n määrää, mikä voi heikentää erityisesti INP- ja LCP-tuloksia.

Core Web Vitals koostuu kolmesta mittarista: LCP mittaa latausnopeutta, INP mittaa reagointikykyä ja CLS mittaa visuaalista vakautta. Ne ovat Googlen vahvistettuja rankingfaktoreita ja kertovat suoraan, miten käyttäjät kokevat sivustosi. Seuraa tuloksia Google Search Consolesta ja PageSpeed Insightsista ja priorisoi parannukset Search Consolen osoittamien ongelmien perusteella.