Sivuston nopeuden optimointi

Nopeus on tämän päivän ehdoton edellytys toimivalle sivustolle – varsinkin jos odottaa hyviä tuloksia. Käyttäjät ovat verkossa entistä malttamattomampia ja poistuvat hitaalta sivustolta yllättävänkin nopeasti. Ihmiset haluavat kaiken ja heti, ja tätä todistaakin se, että jos sivustosi latautuu yli kolme sekuntia, jopa 53% sivustosi vierailuista jää kesken. Samasta tutkimuksesta käy ilmi myös, että joka toinen sivustojen käyttäjistä odottaa sivuston latautuvan alle kahdessa sekunnissa. Artikkelin lopusta löytyy linkki, josta pääset testaamaan oman sivustosi nopeutta, mutta käydään läpi ensin nopeuteen vaikuttavia tekijöitä.

Sivuston nopeuteen vaikuttavat tekijät

Google ja muut hakukoneet arvostavat nopeita sivustoja entistä enemmän, mikä taas tarkoittaa sitä, että nopeat sivustot saavat lähtökohtaisesti parempia sijoituksia myös hakutuloksissa. Sivuston nopeuteen vaikuttaa kokonaisuudessaan todella moni tekijä ja netistä löytyykin monia artikkeleita aiheesta. Ei käydä niitä kaikkia tässä artikkelissa läpi, koska aihe on sen verran laaja. Yksi maininnan arvoinen artikkeli, joka käsittelee aihetta tarkemmin on kuitenkin esimerkiksi Elementorin kirjoittama How to Speed Up Your WordPress Website.

Sininen Härkä ottaa sivustojen nopeuden tosissaan ja rakennammekin kaikki verkkosivustot yleisiä parhaita käytäntöjä käyttäen.

  1. Suosittelemme, että kaikki sivustot hostataan WordPress-optimoiduilla webhotelleilla
  2. Käytämme omaa kustomoitua, optimoitua ja kevyttä teemaa
  3. Pidämme huolen siitä, että kaikki* sivustolle ladattavat kuvat optimoidaan
  4. Pyrimme välttämään ylimääräisiä lisäosia ja minimoimaan niiden määrän
  5. Käytämme palvelintason välimuistityökaluja latausaikojen minimoimiseksi
  6. Tarvittaessa käyttöön otetaan myös CDN (Content Delivery Network)
  7. GZIP kompressointi käytössä jokaisella sivustolla

*Emme voi taata kaikkien kuvien manuaalista optimointia, jos sitä ei ole erikseen budjettiin laskettu, mutta asia käydään läpi jokaisen asiakkaan kanssa parhaan käytännön löytämiseksi.

Tavoitteenamme on nopein mahdollinen alusta WordPress-sivustoille. Litespeed-palvelin ja LiteSpeed Cache -välimuisti sekä taustalla toimiva SSD-levyjärjestelmä ja skaalautuva pilvialusta tekevät sivuistasi salamannopeat. Nämä kaikki nopeuttavat sivuston toimintaa jo itsessään, mutta sivuston nopeutta voidaan viedä vielä uudelle tasolle sivustokohtaisten asetusten avulla.

Sivuston nopeusoptimointityökalut

Tarjoamme seuraavia sivuston nopeuteen positiivisesti vaikuttavia työkaluja sivustoprojektien yhteydessä, mutta myös jälkeenpäin käyttöönotettuna. Jokainen tekniikka testataan ja otetaan käyttöön asiakaskohtaisesti. Esimerkiksi sininenharka.fi-sivuston latausnopeus putosi paketin avulla keskimäärin n. 4,9 sekunnista alle sekuntiin, mikä on sanomattakin valtava muutos.

Kuvien optimointi

Liian suuret kuvatiedostot on varmastikin tämän päivän yleisin ja suurin ongelma, joka hidastaa sivustoja. Kuvat kannattaa optimoida kuvakoon ja SEO:n puolesta jo ennen sivustolle lataamista, mutta automaattinen koneellinen kuvien optimointi pakkaa ja pienentää kuvien kokoa entisestään latausaikojen minimoimiseksi.

Lazy Load -kuvien lataus

Lazy Load lataa yksittäisillä sivuilla olevat kuvat ja iframet vasta sitten, kun niitä tarvitaan eli juuri ennen kuin käyttäjä selaa niiden kohdalle. Asynkronisesti kuvia lataamalla selain säästää aikaa, koska se lataa vain sen median, joka tarvitaan nykyisen näkymän täyttämiseen.

CSS/Javascript -tiedostojen yhdistäminen

Kaikessa yksinkertaisuudessaan nerokas tekniikka yhdistää useita JavaScript- tai CSS-tiedostoja yhteen. Tiedostojen yhdistäminen vähentää selaimen tekemien pyyntöjen määrää ja poistaa mahdollisesti kaksoiskoodin, mitkä näkyvät nopeuden parantumisena.

CSS/Javascript/HTML -tiedostojen minimointi

Tiedostojen minimointi poistaa CSS-, JavaScript- ja HTML-tiedostoista kaiken ylimääräisen, kuten turhat rivivälit, ylimääräiset merkit ja kommentit. Minimoimalla lähdekoodin, minimointi mahdollistaa sen nopeamman käsittelyn ja esittämisen verkossa.

Palvelintason kokosivun välimuisti

Kommunikoi suoraan LiteSpeed Web Serverin kanssa dynaamisesti luotujen web-sivujen staattisten kopioiden tallentamiseksi. Palvelintason välimuisti toimii huomattavasti nopeammin kuin vain sivuston puolella käytössä oleva välimuistityökalu.

Yksityinen välimuisti

Kykenee tallentamaan sivun henkilökohtaisia kopioita tilanteissa, joissa sisältö on tarkoituksenmukainen vain sen pyytävän käyttäjän kannalta.

Tietokannan optimointi

Pitää WordPress-tietokannan ohuena, karsittuna ja mahdollisimman tehokkaana. Työkalu nopeuttaa tietokantakyselyjä poistamalla ajan mittaan kertyvää sotkua, kuten vanhojen sivujen ja postausten versioita.

Edge Side Includes (ESI) -tuki

ESI mahdollistaa sen, että koko yksittäisen sivun välimuistia ei tarvitse tyhjentää aina, kun joku sivun osio päivittyy, riittää, että vain osa sivusta päivitetään.

Sivuston nopeustesti

Nyt sitten se mitä osa lukijoista ei välttämättä malttanut odottaa, vaan selasi suoraan tänne. Oman sivuston latausnopeus – tietysti!

Voit testata sen esimerkiksi täältä:

https://tools.pingdom.com/

Valitse ”Test from” -kohtaan esim. UK tai Saksa, jos asiakkaasi tulevat pääsääntöisesti Suomesta. Jos asiakkaasi tulevat ympäri maailmaa, voit testata latausnopeuksia myös muista maista.

Mainittakoon kuitenkin sen verran, että vaikka Pingdomin ja muiden vastaavien työkalujen, kuten GT-Metrixin ja Google Page Speed Insightsin onkin tarkoitus antaa teknisiä vinkkejä nopeuden kehittämiseksi – sivuston latausnopeus on ennen kaikkea pisteitä tärkeämmässä roolissa. Monet sivustojen kehittäjät ovat jopa sitä mieltä, että pisteillä ei ole mitään väliä, kunhan sivusto toimii nopeasti.

Härkävinkki

Jos olet kiinnostunut oman sivuston nopeuden kehittämisestä tai konversio-optimoinnista, ole rohkeasti yhteydessä, niin katsotaan mitä voidaan asialle tehdä.

8 periaatetta verkkosivu­suunnitteluun

Verkkosivusuunnittelua tehdään aina tapauskohtaisesti kun suunnitellaan uniikkeja kokonaisuuksia, mutta tietyt periaatteet pätevät aina sivustosta riippumatta. Periaatteita voi jaotella visuaalisen suunnittelun tai käytettävyyden alle, mutta seuraavat kahdeksan periaatetta pätevät yleisesti projektista riippumatta.

Hierarkia on sivuston selkäranka

Sivuston hierarkia on yksi ensimmäisenä suunniteltavista asioista sivustolla. Hierarkia tarkoittaa sivustolla sisällön esittämisen järjestystä ja järjestämistä. Sisältöä järjestellään pääotsikoiden alle, mahdollisesti kahteen navigaatioon ja erilaisten määreiden alle. Hierarkia ja järjestely on välttämätöntä sivuston pohjalle ja loppukäyttäjälle, sillä se toimii sivuston selkärankana. Hierarkian perusteella pystytään tekemään myös päätöksiä teknisistä ratkaisuista ja toteutuksista loogisesti. Hierarkia voidaan määritellä joko tarpeen mukaan kevyin perustein tai siihen voidaan käyttää tarpeen vaatiessa runsaasti aikaa ja erilaisia työkaluja. Laajuuteen vaikuttaa pitkälti sisällön määrä ja esitettävän konseptin monisyisyys.

Navigointi, eli kuinka päästä paikasta A paikkaan B (ja paikkaan konversio)

Navigoinnin ilmeisin osa on tietenkin sivuston navigaatiot. Navigaatiota tärkeämpää on kuitenkin sivuston sisällä navigointi eli asiakkaan polku. Tässä vaiheessa suunnittelua on tärkeää tietää sivuston tavoitteet, eli minne haluamme loppukäyttäjää ohjata. Erilaisilla suunnittelun keinoilla saamme ohjattua kävijää haluttuun suuntaan ja mahdollistamme myös sen, että kävijä tietää missä kulkee.

Samankaltaisuus/tuttuus on suunnittelun kulmakivi

Asia, mihin jokainen meistä törmää joka päivä muotoiltuja palveluita käyttäessä, mukaan lukien verkkopalvelut. Kaikki meistä on tottunut kahvipaketin muotoon, liikennevalojen napin sijaintiin tai siihen, että miten päin sinulta kysytään kirjautuessa käyttäjätunnus ja salasana. Samankaltaisuus on erittäin tärkeää minkä tahansa palvelun suunnittelussa, niin myös verkossa. Kun suurimmassa osassa verkkosivustoja logo löytyy vasemmalta ylhäältä ja navigaatio yläreunasta, on ne syytä asettaa myös omalla sivustolla näille paikoille. Monesti tässä kohtaa haluttaisiin ‘erottautua’ ja tehdä ‘jotain repäisevää’, mutta jos käyttö vaatii loppukäyttäjältä aivopähkinän pureksimista, niin käyttäjä on ehtinyt siirtyä sillä aikaa jo kilpailevalle sivustolle.

Visuaalinen jatkuvuus

Aasinsiltana aikaisempaan kohtaan – jatkuvuus ja tuttuus on ehdotonta myös brändin sisällä. Visuaalisen ohjeiston avulla sivustosta rakennetaan jatkuva kokonaisuus brändin muiden elementtien kanssa. Näin varmistamme, että käyttökokemus säilyy loppukäyttäjällä mediasta riippumatta samanlaisena.

Basic SEO-palikat paikalleen

Vaikka sivuston rakentaminen ei varsinaista hakukoneoptimointia olekaan, niin sivustoa rakennettaessa huolehditaan silti SEO:n peruspalikoiden kuntoon laitosta. Sivuston URL:it pidetään loogisina, sivuille rakennetaan paikat tärkeille elementeille, kuten pääotsikolle, kuvat nimetään SEO-periaatteiden mukaan ja niin edelleen.

Nopeuden varmistaminen alusta asti

Sivuston nopeus vaikuttaa sekä SEM-menestykseen, mutta ennen kaikkea käyttäjäkokemukseen. Nopeuden optimoimiseksi voi sivustolla tehdä runsaastikin eri asioita, mutta jokaista sivustoa rakentaessa huomioidaan nopeuteen vaikuttavia tekijöitä. Sivustot pyritään rakentamaan mahdollisimman nopeaksi ruohonjuuritasolta asti, minkä takia esimerkiksi teemat, lisäosat ja muotoilujen sijoitukset huomioidaan jo alkuvaiheessa.

Kohderyhmä, jolle sivustoa rakennat

Kaikilla sivustoilla on oma kohderyhmänsä ja kaikilla kohderyhmillä omat tarpeensa. Kohderyhmän tarpeet tulee huomioida jo suunnittelun alkuvaiheessa, että lopullinen kokonaisuus palvelee ostavaa asiakasryhmää.

“Less is more”

Viimeisimpänä, muttei todellakaan vähäisimpänä pointtina – vähemmän on enemmän. Suunnitteluvaiheessa monesti kaikille osapuolille tulee paljon ideoita ja asioita, jotka olisi niin siistiä saada sisällytettyä sivustolle. Esimerkiksi video houkuttelisi ja animaatiot innostaisi, tai ensinäkymään haluttaisiin tuoda peruselementtien lisäksi myös lisäpalikoita. Totuus on kuitenkin se, että mitä selkeämpi design on ja mitä vähemmillä elementeillä se on toteutettu, niin sitä selkeämpää se tekee käyttökokemuksesta. Liian useat rinnakkaiset call to action-kehotukset tai visuaaliset ärsykkeet saavat loppukäyttäjän hämääntymään tavoitellulta polulta ja pahimmassa tapauksessa poistumaan ennen aikojaan.

HÄRKÄVINKKI

Verkkosivuprojektia aloittaessa, keskustele yhteistyökumppanin kanssa tärkeistä periaatteista ja prioriteeteista. Näin pääsette kaikki kärryille siitä, mitä toinen sivustolla arvostaa.

 

Lataa ilmainen verkkosivujen ostajan opas




Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa, lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa, ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.

Lataa ilmainen opas!

Hatsolo.fi-sivustolle Gold-palkinto ja parhaan blogin palkinto Finnish Web Awardsissa

Kuten ehkä oletkin jo huomannut, Sininen Härkä osallistui vuoden 2018 Finnish Web Awardsiin Johannes ”Hatsolo” Hattusen sivustolla hatsolo.fi. Valitsimme sivuston fwa.fi-kilpailuun monestakin syystä:

Onnistunut käyttöliittymän suunnittelu

Hatsolon laaja palveluvalikoima on saatu tuotua erittäin onnistuneesti esille sivustolla, ja kävijää ohjataan sulavasti eteenpäin haluamaansa osioon. Sivusto on suunniteltu kuitenkin siten, että myös muut brändille tärkeät elementit, kuten ainutlaatuinen blogi, innostavat podcastit ja Hatsolon aktiivinen somepresenssi tuodaan hyvin esille.

Raikas sisällöntuotanto

Ehdottoman tärkeänä asiana sivustoa rakennettaessa pidettiin myös Hatsolon henkilöbrändin ja elämänilon tuomista esiin sivustolla. Asiakkaan aiemman sivuston tekstisisällöt, lukuunottamatta blogiartikkeleita, olivat sekä meidän että asiakkaan mielestä liian virkamiesmäisiä. Ja jos olet nähnyt Johanneksen puhumassa, niin miehen presenssi ei ole sitä alkuunkaan. Virkamiesmäisyys heitettiinkin romukoppaan, ja tilalle sijoitettiin leikitteleviä sloganeita, kuten ”Tilaa mun jutut”, ”Nää mut” ja ”Kuule mun jutut”.

Visuaalisuus ja ammattimaiset valokuvat

Sivuston visuaalisuudessa käytettiin erittäin paljon hyödyksi Hatsolon laadukasta valokuvamateriaalia, joka tukee entisestään vahvemman henkilöbrändin luomista edellä mainittujen seikkojen kanssa. Isot ja hallitsevat bannerikuvat auttavat jo sivustolla luomaan fiilistä Hatsolon ainutlaatuisista, viihdyttävistä ja motivoivista puheenvuoroista.

Lopputulos miellytti molempia osapuolia

Itse olimme erittäin tyytyväisi sivustoon sen valmistuttua, ja myös tulokset ovat puhuneet puolestaan. Ehdottomasti tärkein asia kuitenkin toteutui myös – asiakas oli silminnähden tyytyväinen projektiin: “Heti palaverin alkuminuuteista lähtien tuntui, että tää on se juttu. Sinisellä Härällä on tajuttu äärimmäisen tärkeä pointti. Jokainen asiakas on uniikki ja tarvitsee uunikin ratkaisun.”

Jaettu kultainen FWA-palkinto ja toinen sija yleisöäänestyksessä

Finnish Web Awardsin yleisöäänestys kesti alkukesästä pitkälle syksyyn asti, ja äänestys keräsi kokonaisuudessaan yli 35 000 ääntä. Hatsolo.fi roikkui koko ajan äänestyksen kärjessä. Äänestysajan loputtua saimme tietää, että olimme koko yleisöäänestyksen toinen! Kiitos todella paljon kaikille äänestäneille. 🙂

Yleisöäänestyksen jälkeen arvovaltainen tuomaristo (johon kuuluivat Jorma Ollila, Ilkka Paananen, Tarja Virmala, Heikki Ahdekivi, Jaakko Tapaninen, Jorma Silvasti ja tuomariston puheenjohtaja Pekka Nuikki) otti finaaliin edenneet sivustot tiukkaan syyniin. Tuomarien mukaan kolme parasta sivustoa erottui selvästi muista – Sinisen Härän toteuttama hatsolo.fi jakoi lopulta kultaisen FWA-palkinnon Evermaden toteuttaman Helsingin Diakonissalaitoksen sivuston kanssa. Tuomaristo kommentoi toteuttamaamme sivustoa seuraavasti: ”Hatsolon vilpittömyys ja positiivisuus on sivuston punainen lanka ja sivuston toteutus johdonmukainen.”

Kultaisen FWA-palkinnon lisäksi Hatsolo.fi nappasi vielä kilpailun Paras blogi -palkinnon. Ehdottoman ansaitusti!

Kiitos Johannes, FWA ja kaikki äänestäjät!

Iso kiitos lienee kohdallaan. Kiitos Johannes hienosta projektista ja yhteistyöstä, Finnish Web Awards hyvistä järjestelyista ja asian mahdollistamisesta, sekä tietysti kiitos kaikille yleisöäänestyksessä meitä jeesanneille! Tästä on hyvä lähteä viettämään rentouttavaa joulua – katsotaan, mikä sivusto valitaan ensi vuonna mukaan kilpaan. 😉

Finnish Web Awardsin tulokset
Hatsolon ja Sinisen Härän yhteistyö
Hatsolon artikkeli Finnish Web Awardsista

 

Lataa ilmainen verkkosivujen ostajan opas




Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa, lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa, ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.

Lataa ilmainen opas!

Näytä