Kauniit ja nopeat sivut eivät sulje toisiaan pois. Ratkaisevaa on, millä tavalla liike ja tehosteet tehdään. Tämä opas on syventävä jatko yrityksen nettisivujen oppaalle: miten nopeus mitataan, mikä animaatio on kevyt ja mikä raskas, ja esimerkkinä mittaukset tästä sivustosta.
Moni hakee palvelua puhelimella, ja yhteys voi olla heikko autossa, työmaalla tai maaseudulla. Jos sivu näyttää tyhjää tai jähmettyy ensimmäisinä sekunteina, kävijä palaa hakutuloksiin ja valitsee seuraavan.
Google mittaa sivujen käytettävyyttä kolmella luvulla, joita kutsutaan nimellä Core Web Vitals:
| Mittari | Mitä se tarkoittaa | Hyvä tulos |
|---|---|---|
| LCP | Kuinka nopeasti sivun pääsisältö, kuten otsikko tai iso kuva, on näkyvissä | alle 2,5 s |
| INP | Kuinka nopeasti sivu reagoi, kun painat painiketta tai kirjoitat kenttään | alle 0,2 s |
| CLS | Hyppiikö sisältö latautuessa, niin että painat vahingossa väärää kohtaa | alle 0,1 |
Google suosittelee hyviä lukuja kaikille, jotka haluavat menestyä haussa. Sijoitusta ne eivät yksin ratkaise, mutta hidas sivu menettää kävijän ennen kuin sisällöllä on edes mahdollisuutta.
Selain piirtää sivun vaiheittain: ensin se laskee, mihin kukin osa sijoittuu, sitten se maalaa osat ja lopuksi kokoaa ne kuvaksi. Kevyt animaatio koskee vain viimeistä vaihetta, ja sen hoitaa näytönohjain. Raskas animaatio pakottaa selaimen laskemaan ja maalaamaan sivua uudelleen jokaisella ruudunpäivityksellä.
transform)opacity)Ero on suuri. Googlen web.dev-oppaan esimerkissä elementin liikuttaminen sijaintia muuttamalla pudotti noin puolet ruudunpäivityksistä, kun saman liikkeen tekeminen transform-ominaisuudella pudotti noin prosentin.
Hyvä animaatio kertoo jotain: että painallus meni perille, että luku muuttui tai että siirryit toiselle sivulle. Se ohjaa katseen siihen, mikä on tärkeää. Huono animaatio vain koristaa. Se viivyttää sisältöä, toistuu loputtomasti tai liikkuu silloin, kun kävijä yrittää lukea.
Osa ihmisistä on laittanut puhelimen tai tietokoneen asetuksista liikkeen vähentämisen päälle. Syy voi olla esimerkiksi sisäkorvan tasapainohäiriö, jossa liike ruudulla aiheuttaa huimausta tai pahoinvointia. Saavutettavuusohjeet (WCAG 2.3.3) suosittelevat, että tällaiset animaatiot voi kytkeä pois. Sivu tunnistaa asetuksen, ja silloin sisältö näytetään heti valmiina.
Tämän sivuston tehosteet on tehty samoilla periaatteilla. Koko on mitattu pakattuna, eli siinä muodossa kuin se kulkee verkossa.
| Tehoste | Miten tehty | Lisäkoko | Miksi näin |
|---|---|---|---|
| Sivujen välinen siirtymä | Selaimen oma toiminto, pelkkä CSS | alle 0,3 kt | Sivu ei välähdä valkoisena, ja yläpalkki pysyy paikallaan. Selaimissa, jotka eivät tue toimintoa, sivu vaihtuu tavallisesti. |
| Hakutulos ja luovutuksen polku | Häivytys ja siirto, käynnistyy kun osio tulee näkyviin | noin 1,2 kt | Näyttää asian, josta tekstissä puhutaan. Pyörii kerran. |
| Laskimen tuloksen välähdys | Värin vaihto puolen sekunnin ajan | noin 0,2 kt | Palaute: näet, että luku päivittyi. |
| Etusivun pisteruudukko | Piirretään vain hiiren liikkuessa | noin 1,5 kt | Puhelimella ruudukkoa ei piirretä ollenkaan, koska kosketus ei liikuta sitä. |
Pois jätettiin videotaustat, animaatiokirjastot, ulkopuolisilta palvelimilta ladattavat fontit ja evästeitä käyttävä seuranta. Fontit tulevat samalta palvelimelta kuin sivu, ja selain tallentaa ne ensimmäisellä käynnillä.
Kun mittasin sivut tätä opasta varten, etusivu jäi selvästi muista. Syy oli pisteruudukko, joka piirsi itseään uudelleen noin 60 kertaa sekunnissa koko ajan, myös puhelimella, jossa sillä ei ollut mitään tehtävää. Korjauksen jälkeen ruudukko piirretään vain, kun hiiri liikkuu sen päällä.
Ulkonäkö ei muuttunut lainkaan. Tämä on tyypillistä: hidastava osa on usein jotain, mitä kävijä ei edes huomaa.
| Sivu | Suorituskyky | Pääsisältö näkyvissä | Estoaika | Hyppiminen |
|---|---|---|---|---|
| Etusivu | 98 | 2,3 s | 0 ms | 0 |
| Nettisivut | 100 | 1,7 s | 0 ms | 0 |
| Tuntihintalaskuri | 100 | 1,7 s | 0 ms | 0 |
| Katelaskuri | 100 | 1,7 s | 0 ms | 0 |
| Yrityksen nettisivut -opas | 100 | 1,7 s | 0 ms | 0 |
Mitattu 21.10.2026 Lighthouse 12 -työkalulla mobiiliasetuksilla, jotka simuloivat keskitason puhelinta ja hidasta mobiiliyhteyttä. Luvut ovat kolmen mittauksen mediaaneja. Estoaika kuvaa laboratoriossa sitä, kuinka nopeasti sivu reagoi painalluksiin. Oikeiden kävijöiden luvut voivat poiketa tästä.
Jos tulos on punainen, yleisimmät syyt ovat pakkaamattomat kuvat, raskas teema tai lisäosat ja automaattisesti alkava video. Ne kaikki voi korjata ilman, että sivujen ulkonäkö kärsii.
Lähteet: Google: Core Web Vitals ja hakutulokset · web.dev: suorituskykyiset CSS-animaatiot · W3C: WCAG 2.3.3 Animation from Interactions · PageSpeed Insights.
Ulkoasu tehdään yrityksesi mukaan, ja kerron aina, miten kukin tehoste vaikuttaa nopeuteen.