Ota enemmän irti kotisivuista ja verkkokaupasta nopeusoptimoinnilla

Kotisivujen ja verkkokauppojen latausnopeus on erittäin tärkeää yrityksille, koska se vaikuttaa asiakkaiden käyttökokemukseen, ja sitä kautta yritysten myyntiin. Hitaasti latautuva verkkosivusto voi ärsyttää ja ajaa pois potentiaalisia asiakkaita, koska he eivät jaksa odottaa. Erityisesti verkkokauppojen latausnopeus on myynnin kannalta tärkeä.

Googlen vuonna 2018 tekemän tutkimuksen mukaan todennäköisyys että kävijä poistuu verkkosivustosta kun latauksen kesto kasvaa yhdestä sekunnista kolmeen sekuntiin kasvaa 32 %. Kun lataus kestää yhdestä viiteen sekuntiin, todennäköisyys että kävijä poistuu sivustolta kasvaa 90 %, kun lataus kestää yhdestä kuuteen sekuntiin todennäköisyys kasvaa 106 %, ja kun lataus kestää yhdestä kymmeneen sekuntiin todennäköisyys kasvaa 123 %. Ideaalinen latausaika verkkosivustolle on siis alle kaksi sekuntia. Lähde Think With Google.  

Latausnopeus vaikuttaa myös hakukoneiden hakutuloksiin. Esimerkiksi Googlessa nopeasti latautuvat verkkosivustot sijoittuvat Googlessa hitaita sivustoja korkeammalle. Onneksi hitaasti latautuva verkkosivusto on korjattavissa, ja työ aloitetaan aina selvittämällä mikä aiheuttaa sivuston hitautta.

Verkkosivuston latausnopeuden testaaminen

Ensimmäinen askel on selvittää verkkosivuston latausnopeus ja siihen löytyy monia työkaluja, kuten esimerkiksi Google PageSpeed Insights. (https://pagespeed.web.dev/) Google PageSpeed Insights työkalun avulla voimme selvittää mikä aiheuttaa verkkosivuston hitautta syöttämällä verkkosivuston URL-osoitteen hakukenttään, jonka jälkeen työkalu antaa korjausehdotuksia verkkosivuston nopeuttamiseksi. Lisäksi se antaa selkeän kuvan siitä, kuinka sivusto latautuu käyttäjän selaimessa. Työkalun avulla ei nähdä selkeitä latausaikoja, vaan arvio annetaan pisteissä. PageSpeed Insights näyttää myös Googlen oikeilta käyttäjiltä mitattua dataa sivuston latausnopeudesta viimeisen kuukauden ajan.

kotisivut

Mobiilikäytön ollessa nykyään merkittävä osa verkkoselailusta on tärkeä muistaa tarkistaa myös verkkosivuston mobiiliversio. Voi olla vaikeaa päästä samaan Google PageSpeed Insigts -tulokseen mobiiliversiolla ja desktop-versiolla, mutta se johtuu siitä, että mobiililaitteen yhteys on yleensä hitaampi. Hyvä Google PageSpeed pistemäärä on yli 90, ja verkkosivusto on hyvä, jos se latautuu kahdessa sekunnissa. 

Toinen todella hyvä työkalu on GTmetrix. GTmetrix toimii samalla periaatteella, kun Google PageSpeed Insights. Kun syötät verkkosivuston URL-osoitteen, työkalu tarjoaa kattavan analyysin sivuston nopeudesta. GTmetrix on myös helppokäyttöinen, joten aloittelija voi helposti oppia miten työkalu toimii.

Pingdom Website Speed Test työkalu on myös hyvä vaihtoehto. Pingdom on hyvä nopeusmittaustyökalu, koska se analysoi verkkosivuston latausnopeuden, ja antaa korjausehdotuksia verkkosivun nopeuttamiseksi.

Kotisivuja ja verkkokauppoja kannattaa testata varmistaakseen, että ne ovat riittävän nopeita. Jos verkkosivusto on tuloksien mukaan liian hidas, näitä kuutta vinkkiä kannattaa noudattaa verkkosivujen optimoinnissa. Tämän vinkkilistan avulla jokainen onnistuu verkkosivuston nopeuttamisessa.

1. Palvelin

Verkkosivustot tarvitsevat palvelintilan. Oikean palvelintilan valitseminen on yksi vaikuttavista tekijöistä verkkosivustojen latausnopeudessa. Ensimmäiseksi, palvelintilan sijainnin kannattaa valita kävijöiden mukaan. Mikäli verkkosivuston kävijät tulevat pääosin Suomesta, kannattaa valita suomalainen palvelintila, ja jos käyttäjät tulevat pääosin ulkomailta, valitaan palvelintila sen mukaan.

On olemassa erilaisia palvelintila-vaihtoehtoja, yleisimmät ovat jaettu palvelintila, eli webhotelli, tai oma palvelin. Webhotellissa voi olla useita verkkosivustoja, ja webhotellin resurssit jaetaan asiakkaiden kesken, joten jaettu palvelintila on hyvä ratkaisu vähemmän liikennöidylle verkkosivustoille.

Suuremmille verkkosivustoille virtuaalipalvelin sopii parhaiten, koska se on räätälöity ainoastaan yhden verkkosivuston mukaisesti, ja takaa hyvän käyttäjäkokemuksen. Virtuaalipalvelin vaatii paljon resursseja, mutta vaikuttaa suoraan verkkosivuston nopeuteen, ja siksi oma palvelin on hyvä vaihtoehto. Me Haven Porvoossa suosittelemme Zonerin WP Cloud -webhotellipalvelua, jotka on optimoitu toimimaan parhaiten WordPress-sivustojen palvelimena.

skoggi

2. Välimuisti

Välimuisti on prosessi, jossa tallennetaan verkkosivuston tietoja sivuston nopeuttamiseksi. Jos kävijä vierailee verkkosivustolla, välimuisti tallentaa tiedot, jotta verkkosivusto latautuu nopeammin, kun kävijä vierailee sivustolla uudelleen. Välimuistin käyttö nopeuttaa siis tietojen hakeminen verkossa, joka vie aikaa, kun tiedot kulkee palvelimelta toiselle. Voi esimerkiksi käyttää objektivälimuistia, joka tarkoittaa tietokantakyselyjen tallentaminen välimuistiin, jotta seuraavan kerran kun dataa tarvitaan, se toimitetaan välimuistista ilman että sitä tarvitsee hakea tietokannasta. Redis on esimerkki hyvästä objektivälimuistityökalusta, jonka avulla voi lyhentää verkkosivuston latausaikaa ja vahvistaa sivuston suorituskykyä.

WordPress- sivustoille voidaan asentaa erilaisia lisäosia, joiden avulla parannetaan latausnopeutta, ja näin myös hakukoneiden sijoituksia, ja säästetään suuren osan palvelimen resurssien kulutuksesta. WP-Rocket ja Flyingpress ovat hyviä esimerkkejä WordPress-nopeusoptimointilisäosista. Sekä WP-Rocket että FlyingPress esilataavat välimuistin automaattisesti joka kerta kun verkkosivustoon tehdään muutoksia, ja on yhteensopiva monien muiden lisäosien ja teemojen kanssa. Ne ovat myös melko helppokäyttöisiä. FlyingPress jopa esilataa sivuja heti, ennen niiden klikkaamista.

WordPress-sivustoilla voidaan myös käyttää Content Delivery Network välimuistia (CDN), eli sisällönjakeluverkkoa. Sisällönjakeluverkko on maantieteellisesti hajautettu ryhmä palvelimia, joista koostuu verkko, ja se tarjoaa nopean latausnopeuden, riippumatta siitä, missä päin maailmaa kävijä on. Sisällönjakeluverkko kannattaa, jos verkkosivustolla on paljon kävijöitä ulkomailta. Esimerkiksi Cloudflare tarjoaa sisällönjakeluverkkoa. Cloudflaren CDN-palvelu kuuluu Zonerin WP Cloud palvelimiin.

LSCache, eli LiteSpeed Cache on esimerkiksi WordPressin, Joomlan ja Magenton kanssa yhteensopiva verkkopalvelin/välimuisti. LiteSpeed-lisäosan avulla voidaan esimerkiksi nopeuttaa verkkosivuston sisältöä, optimoida kuvia, vähentää palvelimen kuormitusta, ja pienentää CSS, JavaScript tai HTML tiedostoja. LSCache WordPressille hyödyntää sivuvälimuistia, jonka avulla parannetaan verkkosivuston suorituskykyä.

3. Lisäosat

WordPress-verkkosivustoille on saatavilla erilaisia lisäosia, mutta jos niitä asentaa verkkosivustolle liikaa, ne voivat hidastaa sivustoa. Lisäosien hankkimiseen pitää panostaa, ja kannattaa hankkia lisäosia, joissa kehittäjät ovat ottaneet sivuston nopeuden huomioon. Turhia lisäosia kannattaa poistaa verkkosivustosta tietoturvallisuuden takia. Ne voivat myös hidastaa sivustoa.

Kun lisäosia poistetaan verkkosivustosta, kaikkia tietoja eivät poisteta tietokannasta automaattisesti. Lisäosien mahdolliset tallentamat tiedot voidaan kuitenkin poistaa käsin WordPress-sivustoilta.

rakennusoutlet

4. Tiedostot

Verkkosivustolla ei kannata pitää suuria tiedostoja, koska ne hidastavat sivuston lataamista. Suuria ladattavia tiedostoja voi säilyttää sille tarkoitetussa palvelussa. Tiedostoja voidaan myös minimoida siihen tarkoitettujen työkalujen avulla. Poistetaan tarpeettomat osat tiedostoista, ja tehdään niistä kompakteja. Esimerkiksi Javascript- ja CSS-tiedostot sisältävät yleensä paljon tarpeettomia merkkejä, jotka vievät turhaa tilaa. Työkalujen avulla poistetaan turhat merkit, jolloin nopeutetaan verkkosivustoa, ja parannetaan verkkosivuston suorituskykyä.

Kun verkkosivusto lataa, selain luo DOM-elementtejä (Document Object Model) sivustolle. Verkkosivun kaikki HTML-elementit kasvattavat DOM-kokoa. Liian suuri DOM-koko voi vaikuttaa verkkosivuston tehokkuuteen, joten siksi DOM-elementtien määrää kannattaa pitää pienenä. Jos DOM-koko on liian iso, esimerkiksi poistamalla piilotettuja elementtejä, tai vaihtamalla yksinkertaisempaan teemaan DOM-kokoa voidaan pienentää. Esimerkiksi jotkut sivurakentajat (kuten Divi) paisuttavat DOM-kokoa turhan paljon yksinkertaisellakin verkkosivustolla.

5. Kuvien optimointi

Kuvat tekevät verkkosivustoista mielenkiintoisempia ja ovat olennainen osa verkkosivustoja, mutta turhan suuret kuvat ja muut mediatiedostot ovat todella vaikuttava tekijä verkkosivustojen latausnopeudessa. Kuvia voidaan optimoida eri työkalujen avulla, jolloin tehdään kuvista pienempiä. Mitä (tiedostokooltaan) suurempi kuva tai video, sitä kauemmin verkkosivuston latautuminen kestää.

Kuvia voidaan muokata helposti kuvankäsittelyohjelmassa. Kuvankäsittelyohjelmia on olemassa erilaisia, sekä maksullisia että ilmaisia, ja niiden avulla voidaan pienentää ja optimoida kuvia.

Kuvia voidaan myös pakata mahdollisimman nopeasti latautuvaksi, eli pienennetään kuvien tiedostokokoja poistamalla turhat tiedot. Photoshop on esimerkki tehokkaasta kuvankäsittelyohjelmasta, jolla voidaan pienentää ja pakata kuvia.

Paljon kuvia verkkosivustolla hidastaa myös sivuston latautumista. Jos ei ole mahdollista poistaa osan kuvista, kannattaa käyttää lazy load- optimointitekniikkaa, joka lataa näkyvän sisällön heti, mutta viivästyttää alempana olevan sisällön lataamista, kunnes kävijä skrollaa alaspäin ja sisältö paljastuu.

WebP Express on WordPress-lisäosa, joka tarjoaa mahdollisuuden näyttää automaattisesti luotuja webp-kuvia sitä tukeville selaimille, mutta jpeg- tai png-tiedostoja selaimille, jotka eivät tue webp:ta. Suurin osa käyttäjistä käyttävät selainta joka tukee webp-kuvia, mutta monet verkkosivustot käyttävät silti jpeg- tai png-tiedostoja, jotka ovat paljon isompia tietyllä laadulla verrattuna webp-kuviin. Lisäosan avulla voidaan esimerkiksi lyhentää kuvien latausaikaa webp:tä tukevissa selaimissa, parantaa käyttökokemusta ja sijoitusta hakukoneissa. (https://wordpress.org/plugins/webp-express/)

smaku festivals

6. Teema

WordPress -verkkosivuja rakennetaan yleensä teemojen avulla. Teemat helpottavat verkkosivustojen rakentamista, ja ovat vaikuttava tekijä verkkosivuston latausnopeudessa. Huono teema tekee verkkosivustosta hitaan, joten kannattaa olla tarkkana teeman valinnassa. On olemassa monenlaisia valmiita teemoja, mutta kannattaa valita suositun teeman, koska suosittuja teemoja päivitetään toistuvasti.

Yhteenveto

Verkkosivuston nopeusoptimointi voi tuntua vaikealta tai monimutkaiselta, mutta hidas verkkosivusto ei todellakaan auta asiakashankinnassa, joten nopeat kotisivut ja nopea verkkokauppa on erittäin tärkeää yritykselle. Ilman nopeasti latautuvaa verkkosivustoa potentiaaliset asiakkaat eivät välttämättä edes löydä sivustoa. Jos löytävät, todennäköisyys että he poistuvat sivustosta parin sekunnin jälkeen, jos sivusto ei lataa on erittäin suuri. Nopea verkkosivusto auttaa parantamaan hakukoneoptimointia, käyttäjäkokemusta ja sivuston tuloksia. Mitä nopeammat kotisivut tai verkkokauppa, sitä paremmat mahdollisuudet ovat.

nopeusoptimointi

Me Havenilla suunnittelemme ja toteutamme yrityksille WordPress-kotisivuja ja Woocommerce-verkkokauppoja. Projektia suunnitellaan asiakkaan tarpeiden mukaan, joten jokainen projekti lähtee perusteellisesta kartoituksesta liikkeelle. Meillä on paljon kokemusta verkkosivustojen nopeusoptimoinnista, olemme esimerkiksi suunnitelleet ja rakentaneet uudet kotisivut Surveypalille. Surveypal on työkalu, jonka avulla voi esimerkiksi mitata asiakastyytyväisyyden tai henkilöstökokemuksen kyselyiden avulla. Uudet kotisivut ovat optimoitu huolellisesti ja ovat erittäin nopeat. (​​https://surveypal.fi/)