PageSpeed Insightsin lukeminen: Core Web Vitals -mittarit selkokielellä
Olet testannut verkkosivustosi PageSpeed Insights -palvelussa ja näet punaisen luvun, esimerkiksi 45. Mitä se tarkoittaa, ja kuinka vakavaa se on? Tässä artikkelissa kerrotaan, miten raportti luetaan, mitä kolme Core Web Vitals -mittaria mittaavat ja mitä voit itse parantaa.
Kolme mittaria
| Mittari | Mitä se mittaa | Hyvä | Parannettavaa | Huono |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Kuinka nopeasti suurin sisältöelementti näkyy, usein sivun yläosan iso kuva | enintään 2,5 s | 2,5-4 s | yli 4 s |
| INP (Interaction to Next Paint) | Kuinka nopeasti sivu reagoi, kun klikkaat, napautat tai kirjoitat | enintään 200 ms | 200-500 ms | yli 500 ms |
| CLS (Cumulative Layout Shift) | Kuinka paljon sivu hyppii latauksen aikana (pistemäärä, ei aika) | enintään 0,1 | 0,1-0,25 | yli 0,25 |
Sivu läpäisee Core Web Vitals -mittarit, jos vähintään 75 prosenttia käynneistä saa hyvän tuloksen kaikissa kolmessa mittarissa, erikseen mobiilissa ja työpöydällä. Ratkaisevaa ei siis ole oma nopea tietokoneesi, vaan useimpien kävijöiden kokemus, myös vanhemmalla puhelimella. INP korvasi vanhemman FID-mittarin maaliskuussa 2024. Jos törmäät vielä FID:iin, kyseinen tieto on vanhentunut.
Kenttädata ja laboratoriodata
PageSpeed Insights näyttää kaksi mittaustyyppiä, ja ne antavat usein erilaisia lukuja:
- Kenttädata (ylhäällä): mittauksia oikeilta kävijöiltä Chromella viimeisten 28 päivän ajalta. Tämä määrittää, täytätkö Core Web Vitals -vaatimukset. Jos sivullasi on liian vähän kävijöitä, näet koko sivustosi luvut tai et lainkaan kenttädataa.
- Laboratoriodata (alla): Lighthouse-testi, joka lataa sivun kerran simuloidulla keskitason puhelimella ja yhteydellä. Tästä tulee 0-100 luku. Lighthouse ei pysty mittaamaan INP:tä, koska kukaan ei klikkaa.
Käytä laboratoriodataa syiden selvittämiseen ja nähdäksesi heti, auttaako parannus. Aloita välilehdeltä Mobiili: siellä tulos on yleensä huonompi, ja Google tarkastelee ennen kaikkea sivustosi mobiiliversiota.
Kuinka paljon se painaa Googlen silmissä?
Google kertoo, että Core Web Vitals -mittarit vaikuttavat sijoitukseen. Google näyttää kuitenkin aina olennaisimman sisällön, vaikka kyseinen sivu ei olisikaan nopein. Luku 0-100 tulee laboratoriotestistä eikä ole Googlen antama arvio, arvio perustuu kenttädataan. Täydellisen tuloksen tavoitteleminen pelkästään Googlea varten ei Googlen oman sanan mukaan ole parasta ajankäyttöäsi. Pyri vihreälle tai vähintään oranssille alueelle, varsinkin koska kävijät poistuvat hitaalta tai hyppivältä sivulta.
Mitä voit parantaa itse sivulla
- Pienemmät kuvat. Tuhansia pikseleitä leveä kuva 800 pikselin kokoiseen tilaan on yleisin hitaan LCP:n syy. Pienennä kuvat ennen lataamista ja käytä nykyaikaista muotoa, kuten WebP tai AVIF.
- Leveys ja korkeus jokaiselle kuvalle. Ilman
width- jaheight-määrityksiä selain ei tiedä, kuinka paljon tilaa kuva tarvitsee, ja teksti hyppää, kun kuva latautuu. Tämä nostaa CLS-arvoa:<img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">
- Älä lataa tärkeintä kuvaa laiskasti.
loading="lazy"sopii hyvin sivun alempana oleville kuville, mutta ei kuvalle, joka näkyy heti sivun avautuessa. Muuten selain odottaa juuri sitä kuvaa, joka määrittää LCP:n. - Älä lisää mitään myöhemmin sisällön yläpuolelle. Evästepalkki, mainos tai widget, joka työntää sivua alaspäin, saa kaiken hyppäämään. Aseta tällainen palkki mieluummin sivun päälle.
- Vähemmän muiden skriptejä. Huono INP johtuu lähes aina liiallisesta JavaScriptistä: raskaista teemoista, liu'uttimista, chat-ikkunoista ja seurantaskripteistä. Tarkastele kriittisesti jokaista lisäosaa tai upotettua palvelua.
Mitä palvelin tekee
Kaikki alkaa palvelimen ensimmäisestä vastauksesta, eli Time to First Byte -arvosta (TTFB). Se ei itse ole Core Web Vital -mittari, mutta hitaalla ensimmäisellä vastauksella hyvä LCP on lähes mahdoton. Ohjearvona 0,8 sekuntia tai vähemmän on hyvä. Syitä ovat usein sivusto ilman välimuistia, liian vähäinen laskentateho tai uudelleenohjaukset. Palvelimen tulisi myös lähettää tekstitiedostot pakattuina (gzip- tai Brotli-pakkaus). Lue palvelinpuolen muutoksista artikkelista Verkkosivustoni on hidas tai käyttää liikaa suoritintehoa: näin nopeutat sitä ja DirectAdmin-ohjeesta Verkkosivustoni on hidas.
AI Builderissa ja WordPressissä
AI Builderilla tehty sivusto asettaa leveyden ja korkeuden kuville, joiden koko on tiedossa, lataa sivun ensimmäisen kuvan heti ja etusijalla ja muut kuvat vasta, kun ne tulevat näkyviin, sekä luo julkaisun yhteydessä pienemmän version isoista kuvista. WordPressissä välimuistilisäosa ja kuvien pienentäminen auttavat eniten. Lue lisää ilmaisesta WordPress-kurssista, oppitunneista Mikä tekee sivustosta hitaan, ja miten sitä mitataan? ja Kuvat, PHP ja muut nopeushyödyt.
Lisätietoa
- web.dev: Web Vitals (englanniksi)
- Tietoa PageSpeed Insightsista (englanniksi)
- Google: sivukokemus ja Google-haku (englanniksi)
- Google: Keskeiset verkkosignaalit -raportti