Verkkosivuston nopeuttaminen alkaa mittaamisesta, ei yksittäisestä lisäosasta tai teknologiasta. Ensin selvitetään, kokevatko todelliset käyttäjät hitaan latauksen, viiveellä reagoivat toiminnot vai hyppivän ulkoasun – vasta sen jälkeen korjataan suurin pullonkaula.
Erota todellinen käyttäjädata laboratoriotestistä
PageSpeed Insights näyttää sekä Chrome-käyttäjiltä koottua kenttädataa että hallitussa ympäristössä tuotettua laboratoriotietoa, jos sivusta on riittävästi havaintoja. Kenttädata kertoo, millainen kokemus oikeilla käyttäjillä on ollut eri laitteilla ja yhteyksillä. Laboratoriotesti auttaa puolestaan toistamaan ongelman ja löytämään teknisiä syitä.
Yksi testiajo ei ole lopullinen totuus. Tulos voi vaihdella palvelimen kuormituksen, testisijainnin, välimuistin ja kolmannen osapuolen palvelujen vuoksi. Arvioi tärkeimmät sivutyypit erikseen, tarkista mobiili ja työpöytä sekä vertaa muutosta riittävän pitkällä aikavälillä. Search Consolen Core Web Vitals -raportti auttaa tunnistamaan samankaltaisista sivuista muodostuvia ongelmaryhmiä.
Nykyiset Core Web Vitals -mittarit ovat LCP, INP ja CLS
Core Web Vitals kuvaavat latautumista, vuorovaikutuksen reagointia ja ulkoasun vakautta. Hyvä taso arvioidaan 75. prosenttipisteessä erikseen mobiili- ja työpöytäkäynneille, eli vähintään 75 prosentissa mitatuista sivulatauksista tavoitteen pitäisi toteutua. Vanha FID-mittari korvautui INP:llä vuonna 2024, eikä TTI kuulu nykyiseen Core Web Vitals -kolmikkoon.
Mittareita käytetään diagnoosin lähtökohtana, ei sivuston ainoana laatumääritelmänä. Google kertoo Core Web Vitals -arvojen olevan osa sivukokemusta, mutta hyvä pistemäärä ei takaa korkeaa hakusijoitusta. Sisällön hyödyllisyys, asioinnin selkeys, saavutettavuus ja liiketoiminnan tulokset pitää arvioida mittarien rinnalla.
| Mittari | Hyvä taso | Mitä se kuvaa |
|---|---|---|
| LCP | enintään 2,5 s | suurimman näkyvän sisältöelementin latautuminen |
| INP | enintään 200 ms | sivun reagointi käyttäjän vuorovaikutukseen |
| CLS | enintään 0,1 | odottamattomien ulkoasusiirtymien määrä |
Korjaa LCP:n pullonkaula latausketjun oikeasta kohdasta
Hidas LCP voi alkaa jo ennen kuin selain saa ensimmäisen HTML-vastauksen. Tarkista uudelleenohjaukset, palvelimen vastausaika, välimuisti ja maantieteellinen etäisyys ennen kuin pakkaat kuvia loputtomasti. Jos palvelin vastaa nopeasti mutta pääsisältö löytyy myöhään, ongelma voi olla renderöintiä estävässä CSS:ssä, JavaScriptissä, fontissa tai siinä, että tärkeä kuva löydetään vasta skriptin kautta.
Hero-kuva kannattaa toimittaa oikeassa koossa ja sopivassa formaatissa, mutta kaikki kuvat eivät tarvitse samaa käsittelyä. Näkymän alapuoliset kuvat voidaan yleensä ladata viiveellä, kun taas LCP-kuvan lazy loading voi hidastaa sivua. Esilatausta käytetään harkitusti vain aidosti kriittisiin resursseihin, jotta selain ei kuluta kaistaa vähemmän tärkeään sisältöön.
- poista tarpeettomat uudelleenohjaukset ja lyhennä palvelimen vastausaikaa
- toimita responsiiviset kuvat oikeissa mitoissa ja tehokkaassa formaatissa
- lataa tärkein kuva ja fontti ajoissa, muut resurssit tarpeen mukaan
- käytä pitkäkestoista välimuistia versioiduille staattisille tiedostoille
INP paranee, kun pääsäie vapautuu käyttäjän toimille
INP mittaa sivun reagointia klikkauksiin, napautuksiin ja näppäimistön käyttöön koko vierailun aikana. Hidas arvo johtuu usein pitkistä JavaScript-tehtävistä, raskaasta selainpuolen renderöinnistä tai kolmannen osapuolen skripteistä. Ongelma ei välttämättä näy heti sivun latauksessa, vaan vasta valikon, lomakkeen tai suodattimen käytössä.
Poista käyttämätön koodi, jaa raskas työ pienempiin osiin ja vältä koko näkymän tarpeetonta uudelleenrenderöintiä. Mainos-, analytiikka-, keskustelu- ja personointiskriptit arvioidaan hyötyä vasten, sillä jokainen niistä käyttää käyttäjän laitetta. Testaa erityisesti tärkeät asiointipolut hitaammalla mobiililaitteella ja tarkista myös, ilmestyykö toiminnon jälkeen näkyvä palaute nopeasti.
CLS pienenee, kun tilat varataan ennen sisällön latautumista
Kuvat, videot, mainospaikat ja upotukset tarvitsevat ennalta määritetyt mitat tai kuvasuhteen, jotta ympäröivä sisältö ei siirry niiden saapuessa. Evästebannerin, ilmoituksen tai lomakevirheen ei pitäisi työntää jo näkyvää sisältöä arvaamattomasti. Dynaamiselle sisällölle varataan tila tai se tuodaan näkymään tavalla, joka ei siirrä käyttäjän kohdetta kesken toiminnon.
Verkkofontti voi vaihtaa tekstin mittoja latautuessaan. Käytä vain tarpeellisia leikkauksia, valitse mitoiltaan sopiva varafontti ja määritä fontin latauskäyttäytyminen. CLS kannattaa tarkistaa kenttädatasta, koska laboratoriotesti ei välttämättä näe myöhemmin vierailun aikana tapahtuvia siirtymiä.
Priorisoi korjaukset liiketoimintavaikutuksen perusteella
Aloita sivuista, joilla on paljon liikennettä tai tärkeä kaupallinen tehtävä, ja ongelmasta, joka vaikuttaa useaan sivupohjaan. Yhteisen kuva-, fontti- tai komponenttiratkaisun korjaus voi parantaa satoja osoitteita kerralla. Ennen muutosta tallenna lähtötaso ja varmista julkaisun jälkeen, että parannus näkyy sekä teknisessä mittauksessa että käyttäjäpolussa.
Nopeus heikkenee helposti uusien kuvien, seurantakoodien, upotusten ja ominaisuuksien mukana. Sovi siksi suorituskykybudjetit, automaattiset tarkistukset ja omistaja havainnoille. Kuukausittainen seuranta on hyödyllistä, mutta kriittinen heikennys pitää havaita jo julkaisuprosessissa eikä vasta seuraavassa raportissa.
Kun haluat nopeuden osaksi sivuston suunnittelua, toteutusta ja jatkuvaa kehitystä, tutustu verkkosivupalveluumme.
Lähteet ja lisätiedot
Mittarit, tavoitetasot ja hakunäkyvyyttä koskevat rajaukset perustuvat Googlen ja web.dev-palvelun ajantasaisiin ohjeisiin.
