Lähtötilanne
Asiakkaamme sivusto kärsi erityisesti mobiilikäytössä hitaasta latausajasta ja heikoista tuloksista PageSpeedillä. Lisäksi työpöytäversiossa oli havaittavissa huomattavaa hitautta, mutta asiakas toivoi parannusta sivuston toimivuuteen erityisesti mobiilissa.
Sivuston rakenteessa oli useita tekijöitä, jotka estivät resurssien tehokkaan latauksen ja hidastivat käyttäjäkokemusta.
Mitä suorituskykymittarit kertovat?
Google PageSpeed -työkalu arvioi verkkosivuston suorituskykyä erityisesti mobiiliympäristössä, jossa olosuhteet ovat usein haastavammat: esimerkiksi huonompi nettiyhteys tai suorituskyvyltään hitaampi laite tai molempia. PageSpeed-pisteytyksen kannalta merkittävimpiä mittareita ovat:
LCP (Largest Contentful Paint): kertoo, milloin suurin näkyvä sisältö, usein hero-kuva tai pääotsikko, saadaan näytölle. Mitä nopeammin tämä tapahtuu, sitä nopeammin käyttäjä kokee sivun olevan käyttövalmis.
CLS (Cumulative Layout Shift): mittaa, kuinka paljon sivun elementit liikkuvat tai ”pomppivat” latauksen aikana. Epävakaa ulkoasu heikentää käyttäjän käyttökokemusta. Tässä mittarissa jopa pienet korjaukset voivat parantaa tuloksia merkittävästi.
TBT (Total Blocking Time): kuvaa aikaa, jolloin selain ei pysty vastaamaan käyttäjän toimintoihin (esim. vieritys tai klikkaus), koska JavaScript-toteutus estää sen. TBT on yksi tärkeimmistä mittareista, koska se vaikuttaa suoraan sivun vuorovaikutusvalmiuteen ja käyttäjän tuntemaan sujuvuuteen.
FCP (First Contentful Paint): kertoo, milloin ensimmäinen sisältöelementti, kuten teksti tai kuva, ilmestyy ruudulle. Tämä antaa käyttäjälle ensimmäisen visuaalisen vahvistuksen siitä, että sivu alkaa latautua.
Speed Index: kuvaa, kuinka nopeasti suurin osa näkyvästä sisällöstä saadaan ruudulle. Se auttaa hahmottamaan yleistä ”sivun nopeuden tuntua”.
Yksittäinen hyvä arvo ei vielä takaa erinomaista kokemusta – mittarit täydentävät toisiaan. Esimerkiksi hyvä LCP voi jäädä merkityksettömäksi, jos TBT on korkea eikä käyttäjä voi reagoida sivuun nopeasti.
Mitä teimme – tärkeimmät optimoinnit
- Hero-kuvan ja kriittisten resurssien esilataus: Nopeuttaa suurimman näkyvän sisällön (LCP) latausta.
- Kuvien srcset- ja lazy loading -ominaisuudet: Mahdollistaa kevyemmät kuvat laitteesta riippuen. Nopeuttaa latausta ja parantaa Speed Index -arvoa.
- CSS/JS-minifiointi ja tarpeettomien resurssien poisto: Vähentää siirrettävän tiedon määrää. Vaikuttaa FCP- ja Speed Index -mittareihin.
- Staattinen välimuisti (cache): Sivut latautuvat suoraan palvelimen muistista. Nopeuttaa koko sivustoa.
- HTML/CSS-rakenteiden korjaukset: Estää visuaalisia hyppelyitä. Parantaa CLS-arvoa.
- CDN-integraatio auttaa lataamaan resurssit maantieteellisesti lähempää. Nopeuttaa etenkin kuvia ja tyylejä.
- Mobiilivalikon parantaminen ja hover-efektien yhtenäistäminen: Parempi käyttökokemus, mutta vaikutus myös visuaaliseen vakauteen (CLS).
Tulokset – ennen ja jälkeen
Seuraavassa taulukoissa näkyvät keskeisten sivujen suorituskykymittarit ennen ja jälkeen optimointia. Tulokset osoittavat erityisesti mobiilissa huomattavia parannuksia. Joissain tapauksissa mobiilitehokkuus nousi jopa yli 60 pisteellä.
Etusivu
Figure 1 Etusivu, mobiili
Figure 2 Etusivu, desktop
Sivu 2
Figure 3 Sivu 2, mobiili
Figure 4 Sivu 2, desktop
Sivu 3
Figure 5 Sivu 3, mobiili
Figure 6: Sivu 3, desktop
Sivu 4
Figure 7: Sivu 4, mobiili
Figure 8: Sivu 4, desktop
Mitä opimme ja mitä suosittelemme?
Vaikka Largest Contentful Paint (LCP) on paljon puhuttu mittari, se ei yksin ratkaise sivuston suorituskykyä PageSpeed-arvioissa. Googlen mittaristossa painoarvoltaan merkittävimpiä ovat Interaction to Next Paint (INP), Cumulative Layout Shift (CLS) ja LCP – juuri nämä kolme muodostavat ydinkokonaisuuden, joka vaikuttaa eniten käyttäjäkokemukseen ja pisteytykseen.
Tässä tapauksessa erityisesti CLS-arvon parantaminen osoittautui ratkaisevaksi. Sivustolla oli huomattavia asettelun muutoksia, jotka aiheuttivat sisällön pomppimista ja epävakautta – ilmiö, joka heikentää merkittävästi käyttäjän kokemusta. Korjaamalla HTML- ja CSS-rakenteita sekä varmistamalla, että kaikki kuvat ja elementit varasivat oikean tilan ennen latausta, saimme CLS-arvon käytännössä nollaan lähes kaikilla sivuilla. Tämä näkyi myös erittäin merkittävinä parannuksina PageSpeed-tuloksissa.
Sen sijaan LCP:n optimointi erityisesti mobiilissa on huomattavasti haastavampaa. Testausympäristö simuloi keskivertoa matkapuhelinta ja hidasta 4G-yhteyttä, mikä tarkoittaa, että täydellinen LCP-arvo vaatisi huippuunsa optimoidun koodin lisäksi erittäin tehokasta hosting-ympäristöä ja CDN-ratkaisua. Reaalimaailmassa, erityisesti Suomessa mobiiliverkot ovat keskimäärin nopeita, jolloin LCP-arvo on usein huomattavasti parempi kuin testitulokset antavat ymmärtää.
Vastaavia toteutuksia
Ei tuloksia
Hakemaasi sivua ei löytynyt. Yritä muuttaa hakuasi, tai käytä yläpuolella olevaa navigointia löytääksesi kirjoituksen.
