Ny­ky­ai­kais­ten ko­ti­si­vu­jen nopeus

Kotisivujen selaaminen mobiililaitteilla on nykyään hyvin yleistä ja mobiilikäyttäjien määrät kasvavat jatkuvasti. On siis äärimmäisen tärkeää ottaa myös mobiilikäyttäjät huomioon kotisivuja tehdessä.

Jopa noin puolet mobiilikäyttäjistä keskeyttää kotisivujen lataamisen 3 sekunnin jälkeen. Poistumisprosentti saattaa siis hitailla kotisivuilla olla valtava. Googlen mukaan mobiilikäyttäjä poistuu myös kotisivuilta 5 kertaa helpommin jos sivuilta puuttuu mobiilioptimointi.

Kotisivujen täytyy siis nykyään olla sekä nopeat että mobiiliystävälliset. Käytännössä nykyaikaisten kotisivujen tulee latautua alle 2 sekunnissa ja toimia eri laitteilla, eli näiden täytyy siis myös olla responsiiviset.

Ko­ti­si­vu­jen nopeuteen vai­kut­ta­vat mm. alusta, pal­ve­li­met, CSS- ja Ja­vaSc­ript-tiedostot, kuvat ja vä­li­muis­ti. Kaikki alkaa alustasta (esim. Wordpress tai jokin ko­ti­si­vu­ko­ne) ja oikealla va­lin­nal­la voi säästää mer­kit­tä­väs­ti työtä.

Listaan alle 5 tärkeää ja huo­mio­nar­vois­ta asiaa ko­ti­si­vu­jen nopeuteen liittyen. Lista voisi olla pi­dem­pi­kin, mutta näistä on hyvä aloittaa.

1. Staat­ti­set vai dy­naa­mi­set kotisivut?

Palvelin tekee huo­mat­ta­vas­ti vähemmän töitä kun kyseessä on staat­ti­set kotisivut, ja näitä onkin yleensä mukavan nopeaa selata. Staat­ti­set kotisivut kestävät yleensä myös kä­vi­jä­piik­ke­jä paremmin kuin dy­naa­mi­set kotisivut, eli sa­man­ai­kai­sia kävijöitä voi olla enemmän.

Dy­naa­mi­set kotisivut (esim. Wordpres­sil­lä tehdyt) ku­lut­ta­vat enemmän pal­ve­li­men re­surs­se­ja, ja la­tau­tu­vat näin ollen hitaammin. Lisäksi dy­naa­mi­sis­sa ko­ti­si­vuis­sa täytyy huomioida tie­to­tur­va.

Jos dy­naa­mi­sil­le ko­ti­si­vuil­le ei ole erityistä tarvetta, kannattaa kotisivut toteuttaa staat­ti­se­na.

2. Pal­ve­li­met ja näiden sijainti

Hidas tai toisella puolella maailmaa si­jait­se­va palvelin saattaa mer­kit­tä­väs­ti hidastaa ko­ti­si­vu­ja. On tärkeää että palvelin vastaa nopeasti, ja sijaitsee ainakin melko lähellä käyttäjää.

Staat­ti­set tiedostot on hyvä ladata si­säl­lön­ja­ke­lu­ver­kon (CDN) kautta, jonka tehtävänä on jakaa käyt­tä­jil­le tiedostot läheltä ja nopeasti.

3. Ul­ko­puo­li­set skriptit

Joskus sivuille on tarvetta lisätä esim. chat-laatikko tai vaikkapa ul­ko­puo­li­nen va­raus­jär­jes­tel­mä. Näitä kannattaa lisätä harkiten, sillä nämä saattavat vaikuttaa ko­ti­si­vu­jen nopeuteen.

4. Kuvat

Tie­dos­to­kool­taan suuret kuvat hi­das­ta­vat helposti sivuja, etenkin hitailla yh­teyk­sil­lä. Sulavan käyt­tä­jä­ko­ke­muk­sen saa op­ti­moi­duil­la kuvilla, joita ei ole liikaa yhdellä sivulla.

5. Selaimen vä­li­muis­ti

Käyttäjän selaimen vä­li­muis­tia on hyvä hyödyntää mah­dol­li­sim­man paljon. Käy­tän­nös­sä käyttäjän ei tarvitse aina ladata tie­dos­to­ja uudelleen pal­ve­li­mel­ta, jos nämä jo löytyvät oman selaimen vä­li­muis­tis­ta. Tämä säästää kaistaa ja nopeuttaa la­tausai­ko­ja.

Ha­ku­ko­neop­ti­moin­nis­sa täytyy nykyään huomioida kotisivujen nopeus, sillä etenkin Google arvostaa nopeita sivuja. Google on ilmoittanut nopeuden vaikutuksesta hakutuloksiin 2010. Tällöin kyseessä oli tietokonekäyttäjät. Myöhemmin (2018) on vastaavasta ilmoitettu myös mobiilihakujen osalta. 

Googlen käyttäjäkokemukseen perustuvat testit (Core Web Vitals) aletaan huomioimaan hakutuloksissa toukokuusta 2021 alkaen. Näistä lisää alempana.

Suo­ri­tus­kykyä voi mitata esim. Googlen PageSpeed Insights -testillä, joka antaa pisteitä tes­taa­mil­le­si ko­ti­si­vuil­le. Testit tehdään sekä ko­ti­si­vu­jen tietokone- että mo­bii­li­ver­sioil­le.

Testin voi helposti tehdä osoit­tees­sa https://de­ve­lo­pers.google.com/speed/pagespeed/insights/ ja testi alkaa täyt­tä­mäl­lä ko­ti­si­vu­jen osoitteen kenttään ja pai­na­mal­la Analysoi -pai­ni­ket­ta. Kun testi on tehty, näytetään pisteet, ajat ja on­gel­ma­koh­dat/pa­ran­nuseh­do­tuk­set.

Joillakin sivuilla näkyy tu­lok­sis­sa la­bo­ra­to­rio­da­tan lisäksi kent­tä­da­ta, jota on kerätty oikeilta käyt­tä­jil­tä ano­nyy­mis­ti. Jos Googlella ei ole tarpeeksi tietoa, ei kent­tä­da­taa näytetä. Käy­tän­nös­sä kent­tä­da­ta on siis peräisin oikeilta käyt­tä­jil­tä, ja la­bo­ra­to­rio­da­ta on Googlen oma si­mu­laa­tio. Näiden kahden tu­lok­sis­sa on eroa­vai­suuk­sia, johtuen mm. siitä että oikeilla käyt­tä­jil­lä on käytössä erilaisia laitteita ja yhteyksiä.

Googlen mukaan hyvä tulos on 90+ pistettä, 50-89 tar­koit­taa että sivut vaativat op­ti­moin­tia, ja alle 50 pistettä on huono. 100 pistettä on melko vaikea saada, kun sivuilla täytyy olla sisältöä ja yleensä myös halutaan että sivut näyttävät hyvältä. Käy­tän­nös­sä 90+ pistettä on jo erin­omai­nen tulos.

Core Web Vitals

Testissä näkyvät LCP, FID ja CLS liittyvät Googlen Core Web Vitals -mit­ta­rei­hin, jotka mittaavat sivujen käyt­tä­jä­ko­ke­mus­ta.

Largest Con­tent­ful Paint (LCP)

Aika se­kun­tei­na ennen kuin käyttäjä näkee sivun suurimman si­säl­tö­ele­men­tin. Alle 2,5 sekuntia pidetään hyvänä käyt­tä­jä­ko­ke­mus­ta ajatellen.

First Input Delay (FID)

Tällä mitataan käyttäjän in­te­rak­tii­vi­suut­ta (esim. kun käyttäjä klikkaa jotain pai­ni­ket­ta sivulla). Tämän arvon on hyvä olla alle 100 mil­li­se­kun­tia.

Cu­mu­la­ti­ve Layout Shift (CLS)

Sivun vi­su­aa­li­nen vakaus, eli vaih­ta­vat­ko elementit sivulla paikkaa latauksen aikana. Arvon tulisi olla alle 0,1. Mitä isompi arvo, sitä enemmän elementit siirtyvät sivulla latauksen aikana, joka on käyt­tä­jä­ko­ke­muk­sen kannalta huonoa.

Muut

First Con­tent­ful Paint (FCP)

Aika se­kun­tei­na ennen kuin käyttäjä näkee en­sim­mäi­sen osan sivusta.

Speed Index

Kertoo kuinka nopeasti sivun sisältö tulee näkyviin. Yli 5,8 sekuntia on hidas, 4,4-5,8 sekuntia on koh­ta­lai­nen ja 0-4,3 sekuntia nopea.

Time to In­te­rac­ti­ve

Aika ennen kuin sivu on täysin in­te­rak­tii­vi­nen, jonka jälkeen kaikki toiminnot sivulla ovat käy­tet­tä­vis­sä.

Total Blocking Time

In­te­rak­tii­vi­suut­ta estävä aika, jolloin käyttäjä ei voi käyttää sivun toi­min­to­ja.

Oidomilla tehdyt kotisivut julkaistaan palvelimille ympäri maailmaa staattisina. Tällä tavalla kotisivut latautuvat aina nopeasti, ja palvelin on aina mahdollisimman lähellä käyttäjää. Oidom optimoi sivut ja kuvat automaattisesti, eikä käyttäjältä vaadita optimointiin toimenpiteitä. Sivut toimivat suoraan myös mobiililaitteilla, ja tietenkin nopeasti. Nopeus onkin Oidomin yksi tärkeimmistä ominaisuuksista.