Mitä Core Web Vitals tarkoittaa ja miten parantaa niitä Googlen silmissä?

Mikä on Core Web Vitals?

Core Web Vitals on Googlen mittarisetti, joka kuvaa todellisen käyttäjän kokemusta. Tärkeimmät mittarit ovat LCP (Largest Contentful Paint, suurimman sisältölohkon piirto), INP (Interaction to Next Paint, vuorovaikutuksen jälkeinen seuraava piirto) ja CLS (Cumulative Layout Shift, kumulatiivinen asettelun siirtymä). Tavoitteet: LCP ≤ 2,5 s, INP ≤ 200 ms ja CLS ≤ 0,1. Kun nämä ovat kunnossa, sekä sijoitukset että konversiot yleensä paranevat. Jos tulokset heikkenevät, Search Generative Experience -näkymät ja perinteiset hakutulokset voivat tiputtaa näkyvyyttäsi.

Voit testata sivumme tai omat Core Web Vitals tulokset sivulta https://pagespeed.web.dev/

1. Kuvat ja fontit kuntoon jotta LCP ja CLS vihertyvät

Suurin osa WordPress-sivujen LCP-ongelmista juontaa hero-kuvasta, fonteista tai isoista karuselleista. Korjaa nämä ensin, koska niillä saat nopeimman hyödyn.

1. Optimoi hero-kuva: vie kuva modernissa muodossa (WebP tai AVIF) ja kokoa kuva uudelleen tarpeen mukaan. Lisää hero-kuvan tagiin fetchpriority=”high” ja esilataa se tarvittaessa link-preloadilla. Hyödynnä myös responsive-kuvia (srcset ja sizes). Lue tarkempi kuvaoptimoinnin ohje ja tarkista sopivat kuvaformaatit.
2. Varmista mitat ja aspektisuhde: lisää aina leveys ja korkeus tai käytä CSS:n aspect-ratio -ominaisuutta. Näin vältät CLS-pomput, kun kuvat tai mainospaikat täyttyvät.
3. Lazy load oikein: laita kuville lazy loading, mutta jätä ensimmäinen näkymä (above the fold) ilman viivettä. Turhan aggressiivinen laiska lataus voi huonontaa LCP:tä.
4. Hallitse fontteja: tallenna WOFF2-fontit paikallisesti, subsetoi merkkivalikoima, esilataa tärkein leikkaus ja käytä font-display: swap. Tämä vähentää renderöintiä estävää verkkoa ja ehkäisee layoutin hyppimistä. Ohje: fonttien tallentaminen paikallisesti.
5. Preconnect ja CDN-kuvat: tee preconnect kriittisiin alkuperiisi (esim. CDN) ja toimita media läheltä käyttäjää. Se laskee TTFB:tä ja nopeuttaa LCP:tä.

Jos haluat varman tavan saada LCP vihreäksi WordPressissä, aloita hero-kuvan optimoinnista ja fonttien esilatauksesta. Tämä kaksikko ratkaisee suurimman osan “PageSpeed Insights -raportti punaisella” -tilanteista.

2. JavaScript ja kolmannen osapuolen kuorma pois kriittiseltä polulta

INP mittaa, kuinka nopeasti sivu reagoi käyttäjän napautuksiin ja syötteisiin. Hidas INP johtuu lähes aina JavaScriptin kuormasta ja pääsäikeen (main thread) ruuhkasta.

1. Poista renderöintiä estävät resurssit: merkitse skriptit defer tai async, siirrä ei-kriittinen CSS jälkilataukseen ja hyödynnä kriittisen CSS:n erottelua. Tämä auttaa sekä LCP:tä että INP:tä.
2. Katko pitkät tehtävät: jaa 50 ms ylittävät tehtävät pienemmiksi, käytä ajastimia (requestIdleCallback, setTimeout) ja vältä massiivisia synkronisia looppeja. Tämä on käytännön INP-optimointia ilman raskasta refaktorointia.
3. Rajoita kolmansia osapuolia: kevennä Tag Manager -säätöjä, käytä kevyttä analytiikkaa, lataa chatit, kartat ja videot vasta vuorovaikutuksesta. Viivästetty init parantaa “Interaction to Next Paint” -vastetta merkittävästi.
4. Hydraatio ja koodinjako: jaa bundlet, lataa komponentit vasta, kun käyttäjä tarvitsee niitä, ja käytä “islands architecture” -ajattelua. WordPress-teemoissa tämä tarkoittaa, ettei kaikkea JS:ää työnnetä globaaliin näkymään.
5. CSS-optimoinnit: content-visibility: auto ja vain näkyvissä olevan sisällön renderöinti vähentävät pääsäikeen työtä ja nopeuttavat ensimmäisiä vuorovaikutuksia.

3. Palvelin, välimuisti ja CDN vakauttavat dataa

Laboratoriomittaukset ovat tärkeitä, mutta sijoituksiin vaikuttaa kenttädata, jota Chrome UX Report ja oikeat käyttäjät keräävät. Kenttädata paranee, kun palvelin on tasainen ja sisältö jaetaan verkon reunalta.

1. Page cache ja edge cache: ota sivuvälimuisti käyttöön (esim. palvelintasolla) ja jaa HTML sekä media CDN:n kautta. HTTP/3 ja QUIC sekä Brotli-pakkaus tuovat usein selkeän TTFB-parannuksen. Lue lisää WordPress-hostingista ja palvelinvalinnoista.
2. Object cache: Redis tai Memcached nopeuttavat dynaamisia näkymiä ja vähentävät tietokantakuormaa. Tämä tasaa ruuhkapiikkejä kampanjoiden aikana.
3. Kuva-CDN ja transformaatio: palvele kuvat automaattisesti rättinä laitteelle sopivaan kokoon ja muotoon (WebP/AVIF). Näin LCP pysyy kurissa myös mobiilissa hitaalla verkolla.
4. Päivitä ja siivoa: pidä WordPress, teema ja lisäosat ajan tasalla, siivoa cronit ja tietokannan turhat rivit. Perusohjeet: WordPress-päivitys ja laajempi nopeusoptimoinnin opas.
5. Seuranta ja kenttädatan tulkinta: katso Google Search Console -raportti ja vertaile PageSpeed Insightsin lab-tuloksia kenttädatan jakautumaan. Käytä myös selainten Performance-paneelia löytääksesi pitkät tehtävät ja hitaat event handlerit.

Jos TTFB on hidas maantieteellisesti, siirry globaaliin CDN-reititykseen tai vaihda palvelin lähemmäs käyttäjämassoja. Core Web Vitals -auditissa juuri TTFB-piikit selittävät usein heikkenevän LCP:n, vaikka muu optimointi olisi kunnossa.

Näin pidät Core Web Vitals -tulokset vihreällä jatkuvasti

Menestyksen kaava on selkeä: korjaa ensin näkyvän alueen kuvat ja fontit, sitten pienennä ja siirrä JavaScript pois kriittiseltä polulta, ja lopuksi vakauta palvelin, välimuisti ja CDN. Tämä järjestys tuo nopeimmat voitot ja suojaa näkyvyyttäsi hakutuloksissa. Jos haluat syventyä vielä syvemmälle, aloita näistä asiantuntijasisällöistä: tekninen hakukoneoptimointi ja WordPress-optimointi. Kun perusta on kunnossa, myös generatiiviset hakukoneet nostavat sinut esiin paremmalla todennäköisyydellä.