Nopeasti latautuva ja rikassisältöinen sivusto kutsuu käyttäjää tutustumaan palveluun tarkemmin ja antaa lupauksen jouhevasta selailusta sivuston eri osioissa. Hyvä suorituskyky parantaa palvelun käyttöastetta ja vierailuaikojen pidentyessä myös sivuston sijoittuminen hakutuloksissa paranee. Verkkokaupassa hyvin viihtyvä asiakas päätyy varmemmin ostajaksi ja positiivisella käyttökokemuksella on suora yhteys myös tehtyjen ostosten määrään.
North Patrol on suunnitteluun erikoistunut konsulttitoimisto. Suunnittelemme, autamme teknologiavalinnoissa, kilpailutamme. Emme myy toteutusprojekteja, emmekä lisenssejä, olemme aidosti asiakkaan puolella.
22.5.2019
Mobiilikäytön lisääntyminen pakottaa nopeuden optimointiin
Verkkopalveluiden mobiilikäyttö lisääntyy ja sen myötä kulloinkin käytössä olevalla yhteydellä on entistä suurempi vaikutus sivuston latausnopeuksiin ja yleiseen käyttökokemukseen. Erityisesti raskaiden, kuvia ja videoita sisältävien, uutisten ja artikkeleiden lataaminen mobiiliin muodostuu usein ongelmaksi.
Kotimainen Verkkokauppa.com julkaisi keväällä 2019 verkkokaupastaan uusimman SPA-version (Single Page Application), jonka pyrkimyksenä on tarjota nopea käyttökokemus asiakkaan laitteesta tai liittymän nopeudesta riippumatta. SPA-sivustoilla kaikki toiminnallisuudet ja tiedot ladataan kerralla selaimeen, vaikka kaikkea ei samanaikaisesti näytettäisikään käyttäjälle. SPA-mallissa päästään eroon sivulatauksista, jolloin verkkosivusto voi muuttua ja päivittyä ilman käyttäjän havaitsemia häiritseviä latauksia.
Euroopan laajuinen muodin verkkokauppa Zalando analysoi sivustonsa nopeuden vaikutuksia myyntiin ja havaitsi, että 100 millisekunnin parannus latausnopeuksiin johti 0,7 prosentin myynnin kasvuun per vierailu. Yli 75 prosenttia Zalandon käyttäjistä selaa sivustoa mobiililaitteilla, joka on ajan myötä kasvattanut keskimääräisiä latausnopeuksia. Teknisiä ratkaisujaan optimoimalla Zalando onnistui viidessä kuukaudessa parantamaan latausnopeuksiaan 25 prosentilla.
Myös isot kansainväliset mediatalot ovat viime vuosina tehneet merkittäviä investointeja optimoidakseen sivustojensa nopeuksia. Kanadalainen Vice Media investoi muutama vuosi sitten sivustonsa teknisiin ratkaisuihin optimoidakseen sivujensa latausnopeuksia. Latausajat lyhenivät 50 prosentilla ja mainosten latausajat jopa 80 prosentilla. Mainonnan kannalta tällä on suuri merkitys, koska mitä nopeammin mainos on kävijän nähtävillä, sitä kauemmin sen katseluun käytetään aikaa. Yhdysvaltalainen The Atlantic optimoi sivustoaan parantaakseen etenkin mobiilikäyttäjiensä käyttökokemusta. Kehittämällä sivun elementtien latauslogiikoita ja poistamalla suuret mainokset, he onnistuivat parantamaan sivujensa latausaikoja keskimäärin 87 prosentilla. Quartz uudisti sivustonsa vuonna 2018 tavoitteinaan uutiskirjeiden tilausmäärien kasvattaminen ja vierailuaikojen pidentäminen. Sivuston nopeuttaminen nähtiin kriittisimpänä keinona myös näiden tavoitteiden saavuttamiseksi.
Myös internet-jättiläiset ovat viime vuosina panostaneet paljon latausaikojen lyhentämiseen. Facebookin kehittämät pika-artikkelit eli Instant articles -sivut lupaavat kymmenkertaisia latausnopeuksia normaaleihin verkkoartikkeleihin ja -uutisiin verrattuna. Nämä erittäin nopeat artikkelisivut toimivat tosin vain Facebookin sisällä, mutta etenkin mediayhtiöt ovat tarttuneet tähän mahdollisuuteen hanakasti. Googlen luoma AMP-systeemi tavallisten verkkosivujen kiihdyttämiseen on myös saanut osakseen paljon huomiota viime vuosina. AMP:in vastaanotto ei ole kuitenkaan ollut aivan ongelmatonta, ja moni onkin sitä mieltä, että AMP:in kokemuksista pitäisi vain oppia, ja soveltaa opit tavallisten verkkosivujen nopeuttamiseen. Tällä hetkellä näyttääkin siltä, että kumpikaan näiden internet-jättiläisten ajamista malleista ei ole nousemassa valtavirran ratkaisuksi, vaan paljon enemmän panoksia laitetaan perinteisempään verkkosivujen nopeusoptimointiin.
Teknologiarintamalla onkin todennäköisempää, että panoksia laitetaan erilaisiin progressiivisen latauksen menetelmiin. Näillä menetelmillä viitataan erilaisiin tapoihin vaiheistaa sivuston elementtien latautumista, jotta palvelu saadaan tuntumaan käyttäjälle nopealta ja käyttövalmiilta, vaikka taustalla edelleen ladattaisiin asioita. Joskus näitä tekniikoita käytetään myös siihen, että esimerkiksi pitkiä sivuja ei ladata kokonaisuudessaan heti käyttäjän saapuessa sivustolle, vaan uusia sisältöjä ladataan vasta kun käyttäjä vierittää sivua alaspäin. Tällaisiin menetelmiin viitataan yleensä ”laiska lataus / lazy load” -ilmauksilla, koska näissä pyritään lataamaan kerralla vain se määrä asioita, jotka käyttäjä tarvitsee.
Mikä on nopeaa ja kuinka nopeutta arvioidaan?
Monet verkkopalveluiden nopeuskatsaukset perustuvat Googlen Lighthouse-palvelun tuottamaan dataan. Lighthouse pisteyttää sivuston nopeuteen, käytettävyyteen ja tekniseen toteutukseen liittyviä asioita. Sivustojen suorituskykyä arvioitaessa on suositeltavaa keskittyä ainakin ensimmäisen käyttäjälle merkityksellisen näkymän (First meaningfull paint, FMP) ja ensimmäisen interaktion sallivan näkymän (Time to interactive, TTI) latautumisnopeuksiin.
Nykypäivänä käyttäjät saapuvat entuudestaan tuntemattomille sivustoille useimmiten hakukoneen kautta. Ensimmäinen merkityksellinen näkymä vastaa käyttäjän kysymykseen ”Onko tämä minulle hyödyllistä?” Tietoa tai tiettyjä tuotettuja sisältöjä etsivän käyttäjän kannalta sivun ensilataus usein riittääkin jo vastaamaan kysymykseen ”Löysinkö etsimäni?”. Verkkokauppa-asiakkaan tai asiointipalveluja etsivän käyttäjän vakuuttamiseksi sivuston on latauduttava nopeasti mahdollistaen myös käyttäjän interaktiot. Verkkopalveluita kehitettäessä onkin pohdittava missä latausnopeuden optimoinnilla kulloinkin on suurin merkitys.
Lighthouse-dataa hyödyntävä httparchive.com raportoi sivustojen ensilatausten nopeutuneen pöytäkonekäytössä ja vastaavasti hidastuneen mobiilikäytössä 2016-2019 aikana. Mobiilikäytön TTI-aikojen (Time to interactive) raportoidaan puolestaan nopeutuneen globaalisti 26 prosenttia 2017-2019. Alle 9 sekunnin TTI-mediaaniarvoa voidaan pitää yllättävänkin hyvänä. Mobiilioptimointi ja responsiivisten sivustojen lisääntyminen selittävät varmuudella positiivista kehitystä. Mukana otannassa lienee kuitenkin suurehko joukko vanhoja, hyvin kevyitä toteutuksia, jotka osaltaan vaikuttavat melko alhaiseen mediaaniarvoon. Nähtäväksi jää, miten viime vuosina lisääntyneet raskaat javascript-toteutukset tai isot kuvat ja videot vaikuttavat keskiarvoihin globaalissa mittakaavassa.
Verkkokauppa.comissa asioiminen todella tuntuu nopeutuneen keväällä 2019 tehdyn uudistuksen myötä. Lighthouse-analyysin mukaan Verkkokauppa.comin ensilataus (First meaningfull paint, FMP) tapahtuu mobiilikäyttäjälle noin 5,1 sekunnissa ja ensimmäisen interaktion salliva näkymä (Time to interactive, TTI) latautuu 5,6 sekunnissa. Verkkokaupoille ominaisesti, sivustolla on todennäköisesti tietoisesti hyväksytty hieman hitaampi ensilataus, mutta varmistettu ensiluokkaisen nopea käyttökokemus sen jälkeen tapahtuvissa interaktioissa.
Myös Zalandon panostukset nopeuden optimointiin ovat selkeästi kannattaneet. Ensilataus (FMP) tapahtuu alle 3 sekunnissa ja interaktiot mahdollistava näkymäkin (TTI) on valmis alle 9 sekunnissa.
Sivuston uudistuksessa huomio suorituskyvyn optimointiin
Verkkopalvelu-uudistus tarjoaa oivan tilaisuuden myös suorituskyvyn parantamiseen. Esimerkiksi Teknologian tutkimuskeskus VTT on käynnistänyt toukokuussa 2019 hankkeen, jonka tavoitteena on suunnitella ja toteuttaa uudistettu VTT.fi-sivusto. North Patrolin konsulttien avustamana VTT määritteli uuden verkkopalvelunsa konseptin ja valitsi tulevaisuuden tavoitteitaan tukevan julkaisujärjestelmän. Drupalilla toteutettavan verkkopalvelun suorituskyky asetettiin yhdeksi sivuston tärkeäksi laatukriteeriksi. Uuden VTT.fi-palvelun osalta tavoitteeksi määritettiin, että sivun ensimmäisenä näkyvien elementtien tulee latautua alle kolmen sekunnin (FMP), ja että ensimmäistä interaktion sallivaa näkymää (TTI) saa ladata enintään 9 sekuntia. Nykyiseen sivustoon verrattuna tämä tarkoittaisi yli 60 prosentin parannusta ensilataukseen ja 40 prosentin parannusta interaktiot sallivan näkymän lataukseen.
Rikassisältöinenkin verkkosivu voi olla nopea ja käytettävä
Kiistatta on siis selvää, että sivuston nopeus on merkittävä mittari verkkosivuston laatua arvioitaessa. Kuten edellä esitellyt esimerkit osoittavat, sivuston elementtejä ja sisältöjä ei kuitenkaan enää nykypäivänä tarvitse rajoittaa nopeuden tai mobiilikäytön optimoimiseksi. Hyvin suunniteltu ja teknisesti oikein rakennettu verkkosivusto voi rikkaallakin sisällöllä mahdollistaa nopeat latausajat ja erinomaisen käytettävyyden laiteriippumattomasti. Verkkosivustoja ja -kauppoja rakennettaessa on kuitenkin tärkeää vaatia näiden laatukriteerien huomioiminen sekä konseptisuunnittelun, vaatimusmäärittelyn että teknisen toteutuksen osalta. Verkkopalvelun suorituskyvyn mittarit, nopeuden vaikutukset palvelun laatuun sekä suorituskykyyn vaikuttavat sivuston ominaisuudet on hyvä tuntea. Sivuston suorituskyvyn jatkuva mittaaminen tarjoaakin hyvän näkyvyyden sivuston nykytilaan ja auttaa tunnistamaan mahdolliset kehityskohteet.
PS. Sinua voisi kiinnostaa tulossa oleva ilmainen webinaarimme: Parhaat muotoiluratkaisut tuote- ja palvelusivuille (15.5.2024 klo 10:00). Ilmoittaudu webinaariin
