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.

Kotisivujen nopeuteen vaikuttavat mm. alusta, palvelimet, CSS- ja JavaScript-tiedostot, kuvat ja välimuisti. Kaikki alkaa alustasta (esim. Wordpress tai jokin kotisivukone) ja oikealla valinnalla voi säästää merkittävästi työtä.

Listaan alle 5 tärkeää ja huomionarvoista asiaa kotisivujen nopeuteen liittyen. Lista voisi olla pidempikin, mutta näistä on hyvä aloittaa.

1. Staattiset vai dynaamiset kotisivut?

Palvelin tekee huomattavasti vähemmän töitä kun kyseessä on staattiset kotisivut, ja näitä onkin yleensä mukavan nopeaa selata. Staattiset kotisivut kestävät yleensä myös kävijäpiikkejä paremmin kuin dynaamiset kotisivut, eli samanaikaisia kävijöitä voi olla enemmän.

Dynaamiset kotisivut (esim. Wordpressillä tehdyt) kuluttavat enemmän palvelimen resursseja, ja latautuvat näin ollen hitaammin. Lisäksi dynaamisissa kotisivuissa täytyy huomioida tietoturva.

Jos dynaamisille kotisivuille ei ole erityistä tarvetta, kannattaa kotisivut toteuttaa staattisena.

2. Palvelimet ja näiden sijainti

Hidas tai toisella puolella maailmaa sijaitseva palvelin saattaa merkittävästi hidastaa kotisivuja. On tärkeää että palvelin vastaa nopeasti, ja sijaitsee ainakin melko lähellä käyttäjää.

Staattiset tiedostot on hyvä ladata si­säl­lön­ja­ke­lu­ver­kon (CDN) kautta, jonka tehtävänä on jakaa käyttäjille tiedostot läheltä ja nopeasti.

3. Ulkopuoliset skriptit

Joskus sivuille on tarvetta lisätä esim. chat-laatikko tai vaikkapa ulkopuolinen varausjärjestelmä. Näitä kannattaa lisätä harkiten, sillä nämä saattavat vaikuttaa kotisivujen nopeuteen.

4. Kuvat

Tiedostokooltaan suuret kuvat hidastavat helposti sivuja, etenkin hitailla yhteyksillä. Sulavan käyttäjäkokemuksen saa optimoiduilla kuvilla, joita ei ole liikaa yhdellä sivulla.

5. Selaimen välimuisti

Käyttäjän selaimen välimuistia on hyvä hyödyntää mahdollisimman paljon. Käytännössä käyttäjän ei tarvitse aina ladata tiedostoja uudelleen palvelimelta, jos nämä jo löytyvät oman selaimen välimuistista. Tämä säästää kaistaa ja nopeuttaa latausaikoja.

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.

Suorituskykyä voi mitata esim. Googlen PageSpeed Insights -testillä, joka antaa pisteitä testaamillesi kotisivuille. Testit tehdään sekä kotisivujen tietokone- että mobiiliversioille.

Testin voi helposti tehdä osoitteessa https://developers.google.com/speed/pagespeed/insights/ ja testi alkaa täyttämällä kotisivujen osoitteen kenttään ja painamalla Analysoi -painiketta. Kun testi on tehty, näytetään pisteet, ajat ja ongelmakohdat/parannusehdotukset.

Joillakin sivuilla näkyy tuloksissa laboratoriodatan lisäksi kenttädata, jota on kerätty oikeilta käyttäjiltä anonyymisti. Jos Googlella ei ole tarpeeksi tietoa, ei kenttädataa näytetä. Käytännössä kenttädata on siis peräisin oikeilta käyttäjiltä, ja laboratoriodata on Googlen oma simulaatio. Näiden kahden tuloksissa on eroavaisuuksia, johtuen mm. siitä että oikeilla käyttäjillä on käytössä erilaisia laitteita ja yhteyksiä.

Googlen mukaan hyvä tulos on 90+ pistettä, 50-89 tarkoittaa että sivut vaativat optimointia, 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äytännössä 90+ pistettä on jo erinomainen tulos.

Core Web Vitals

Testissä näkyvät LCP, FID ja CLS liittyvät Googlen Core Web Vitals -mittareihin, jotka mittaavat sivujen käyttäjäkokemusta.

Largest Contentful Paint (LCP)

Aika sekunteina ennen kuin käyttäjä näkee sivun suurimman sisältöelementin. Alle 2,5 sekuntia pidetään hyvänä käyttäjäkokemusta ajatellen.

First Input Delay (FID)

Tällä mitataan käyttäjän interaktiivisuutta (esim. kun käyttäjä klikkaa jotain painiketta sivulla). Tämän arvon on hyvä olla alle 100 millisekuntia.

Cumulative Layout Shift (CLS)

Sivun visuaalinen vakaus, eli vaihtavatko 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äyttäjäkokemuksen kannalta huonoa.

Muut

First Contentful Paint (FCP)

Aika sekunteina ennen kuin käyttäjä näkee ensimmäisen 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 kohtalainen ja 0-4,3 sekuntia nopea.

Time to Interactive

Aika ennen kuin sivu on täysin interaktiivinen, jonka jälkeen kaikki toiminnot sivulla ovat käytettävissä.

Total Blocking Time

Interaktiivisuutta estävä aika, jolloin käyttäjä ei voi käyttää sivun toimintoja.

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.