Sivuston nopeus on syytä laittaa kuntoon

Sivuston nopeus on syytä laittaa kuntoon

Sivuston nopeus kannattaa laittaa kuntoon

Mikään ei tapa konversiota kovemmin kuin hidas sivusto. Kotisivujen nopeus lienee yksi aliarvostetuimmista asioista hakukonelöydettävyyden suhteen, vaikka siihen tulisi kiinnittää suurta huomiota. Hitaat nettisivut kun tappavat näkyvyyden lisäksi myös käyttäjän mielenkiinnon. Siinä kohtaa kun sivustosi lataa vielä 5 sekunnin jälkeen jotain lisäosaa tai kuvaa, on sivustollesi laskeutunut käyttäjä jo kilpailijan nettisivuilla.

Nopeuta sivustoasi näillä ohjeilla

Käymme tässä artikkelissa läpi asioita, jotka nopeuttavat sivujasi. Lue siis tarkasti läpi ohjeistus – sivuston nopeus kannattaa laittaa kuntoon. 2010-luvun ihminen ei jaksa odotella kotisivujen latautumista, vaan sulkee välilehden ja siirtyy sellaiselle nettisivulle, joka latautuu nopeasti.

Sivuston nopeustesti onnistuu mm. Googlen PageSpeed Insights -työkalulla

Googlen PageSpeed Insights kertoo hyödyllistä infoa sivuston nopeudesta. Pöytäkoneella sivustomme sai kelpo tuloksen mutta mobiilissa sivuston kehityskohteet olivat hieman kriittisempiä vielä sivuston kehitysvaiheessa. digibyra.com

Aloita tekemällä nopeustesti sivustollesi. Googlella on oma palvelu nopeustestiä varten, netistä löytyy lisäksi myös muita palveluita:

  • GTmetrix analysoi kattavasti sivustosi nopeuden
  • Googlen PageSpeed Insights antaa myös hyvät arviot – nämä tulevat Googlen näkemysten mukaan joten SEOn kannalta niitä kannattaa ainakin noudattaa

Miten sivustonopeus saadaan kuntoon?

Sivuston latausaika vaikuttaa välittömään poistumisprosenttiin todella isosti. Kissmetrics teki tutkimuksen, jonka mukaan jopa 40% pöytäkoneiden käyttäjistä poistuu sivulta, jos se ei lataudu alle 3 sekunnissa. Lisäksi vieläpä sekunnin muutos sivustonopeudessa vaikuttaa konversioon peräti 7%. Kissmetricsin tutkimuksen voit lukea kokonaisuudessaan täältä.

Sivuston nopeus on eräs hakukonesijoituksiin vaikuttavista tekijöistä, joten alla parhaat vinkit, joiden avulla sivuston nopeuttaminen onnistuu.

Hosting on avainasemassa

Tätä ei voi painottaa enempää, panosta hostaukseen! Muutaman dollarin hostaus Aasiasta tai Karibian auringosta ei ole se paras vaihtoehto. Hostingpalvelut on yksi niistä asioista, joissa hinta jo hyvin pitkälti määrittelee sen mitä tulet saamaan. Välttele siis halvinta mahdollista hostausta. Se syö sivustosi näkyvyyttä vaikka olisit viettänyt pitkiä tunteja sivustos koodin ja käytettävyyden optimoinnin parissa. Vältä jaettuja servereitä ja satsaa hieman extraa ylläpitokustannuksiin. Hanki joko VPS tai oma palvelin.

  • Shared Hosting. Pyri välttämään jos haluat sivustosi ränkkäävän. Jaettu hostaus on halpa ja hidas ratkaisu, nimensä mukaisesti jaat niin kulut kuin hostauksen muiden käyttäjien kanssa.
  • VPS Hosting. Yksityiset virtuaalipalvelimet jakavat pilven kautta samaa rautaa käyttäjilleen, joten ratkaisu on jaettua hostausta nopeampaa.
  • Dedicated Hosting. Nopeuden kannalta premium-valinta, sillä hosting on vain ja ainoastaan sinulle. Et jaa serveriä kenenkään kanssa.

Lisäksi on olemassa myös hajautettu sisällönjakelu eli content delivery network (CDN). CDN on palvelinjoukko ympäri maailmaa, joka säilyttää tiedostot välimuistissa ja jakaa ne käyttäjälle lähimmästä mahdollisesta pisteestä. Sisältöverkko nopeuttaa sivustoa ja sopii erityisesti sivustoille, joilla on paljon kuvia ja tiedostoja sekä paljon käyttäjiä eri maista. CDN-verkkoon pystyy laittamaan kuvat, CSS-, Javascript- ja PDF-tiedostot. CDN ei kuitenkaan ole välttämätön vaikkapa pk-yrittäjille ja pienemmille sivustoille.

Sitten on vielä termit kuten uudelleenohjaukset, AMP, HTTP-pyyntöjen vähentäminen, inline vai irrallinen tiedosto…mutta nämä asiat menevät nippelitietoon ja niiden avulla vähennetään sekunnin kymmenyksiä sivustosi latausajoista. Tässä artikkelissa keskitymme peruskauraan teemalla sivuston nopeus.

Puhdista lähdekoodi

Poista kaikki turhat tyhjät tägit sekä turhien CSS- ja JS-tiedostojen lataamiset tai ylimääräiset rivivälit. Turhat välilyönnitkin kasvattavat latausaikaa. Hyvä nyrkkisääntö sivustollasi on:

Jos et tarvitse jotakin nettisivuillasi – poista se!

Esimerkiksi jos et tarvitse jotain sivustollasi olevaa JavaScriptia, miksi ihmeessä laitat sivustosi käyttäjän lataamaan sen? Karsi siis kaikki turhat asiat sivustoltasi:

  • Erikoiset efektit tai elementit, kuten vaikkapa erikoiset kursori-ikonit
  • Lataa pakolliset JavaScriptit vasta sitten, kun nettisivusto on renderöitynyt. Käytännössä tämä tarkoittaa koodin lataamista asynkronisesti tai vasta sivun koodin lopussa.
  • Entä tarvitsetko lukuisia eri seurantajärjestelmää? Google Analyticsin pitäisi riittää

Mieti mitä sinä ihan oikeasti sivustollasi käytät ja tarvitset. Karsi kaikki turha pois.

Poista turhat pluginit

Jatkoa edelliselle kohdalle. Käytitpä mitä tahansa julkaisujärjestelmää, tarpeettomia plugareja eli lisäosia tai laajennuksia/moduuleja (miten ikinä julkkarisi niitä kutsuukin) löytyy varmasti. Ei siis kannata turhaan pitää aktiivisina joka ikistä kikkaretta sivustollasi. Turhat plugarit kannattaa poistaa ja käytössä olevillekin on hyvä miettiä mahdollisia korvaajia.

WordPressin Yoast SEO -plugin, joka on SEO-ihmisten suosiossa, on lähiaikoina joutunut hitaussyytöksien keskelle. Korvaaviksi vaihtoehdoiksi on ehdotettu mm. plugineja kuten Squirrly, WP SEO Framework tai All in One SEO. Todettakoon että Yoast tarjoaa käyttäjilleen tosin ehkä parempaa lisäarvoa viimeisimpien päivitystensä myötä. Se kertoo todella hyvin kehityskohteita artikkelin näkyvyyteen liittyen, kun syötät artikkelille tärkeimmän hakusanan/-lausekkeen. Eli kokemattomalle SEO-tyypille se tarjoaa hyvää lisäarvoa.

Minimoi JavaScript, HTML ja CSS

Tälle ei todennäköisesti ole virallista suomenkielen termiä mutta englanniksi termi on ”minify”. Melko yleinen kehityskohde sivustolla kuin sivustolla. Digibyrån käyttämä WordPress-teemakin tämän kehityskohteen sai GTmetrixiltä sekä Googlen nopeustestiltä. Minimointi/minifikaatio poistaa siis HTML-, CSS- ja JavaScript-tiedostoista kaikki turhat välit, rivinvaihdot, kommentit tai muut toimivuuden kannalta turhat merkit. Tiedoston minimoinnin jälkeen voidaan se seuraavaksi vielä pakata ennen lähettämistä.

GZIP-kompressio

Nimikin sen jo kertoo: GZIP on tapa tiedostojen pakkaukselle. Usein esiintyvät elementit korvataan viittauksin. Periaatteessa gzippaus sopii mille tahansa bittivirralle. Parhaiten se sopii kuitenkin tekstipohjaisen datan pakkaamiseen. Serveriltä lähtevä data pakataan ja selaimessa se ”aukeaa” (deflate). Tällöin verkon yli liikkuva tiedosto on selkeästi pienempi aiempaan verrattuna. Yleensä tekstitiedostot pienentyvät GZIP-pakkauksen avulla jopa 50–90%.

Kotisivujen nopeuden testaus onnistuu esim. GT Metrix -työkalulla. Testaa sivustonopeus jo tänään

GTmetrix antaa myös hyvin kehityskohteita sivuston nopeuden lisäämiseksi

Ota selaimen välimuisti käyttöön

Browser cachetus eli selaimen välimuistin käyttö on helppo mutta erittäin relevantti asia sivustoa nopeuttaessasi. Helppoa siksi, että tähänkin asiaan löytyy hyviä lisäosia.

Mitä cachetus sitten on? Kun kävijä tulee sivustollesi ja lataa sieltä tiedot verkon yli, niin osa näistä tiedoista tallennetaan kävijän selaimen välimuistiin. Sitten kun käyttäjä siirtyy sivustollasi sivulta toiselle, ei kaikkea sisältöä tarvitse enää ladata verkon yli. Osa tiedoista latautuu siis suoraan käyttäjän selaimen välimuistista. Tällöin verkon ylitse liikkuvan datan määrä pienenee ja latausajat lyhenevät merkittävästi = sivuston nopeus parantuu merkittävästi.

Tärkeimmät tiedostot cachetuksen kannalta ovat kuvat ja JavaScript- sekä CSS-tiedostot – myös HTML-tiedostot tarpeen mukaan. Cachetusaika voi olla jotain 2 ja 4 viikon väliltä. Tiedostot, jotka eivät kovin usein päivity, voivat ihan hyvin pitää 4 viikon cache-aikaa. Kuvat tai PDF-, JS- ja CSS-tiedostot ovat yleensä staattisia asioita eli niiden sisältö muuttuu todella harvoin.

Selaimen välimuistin käyttö nopeuttaa nettisivustoasi paljon. Se on ns. ”no brainer” kun sivuston nopeus on kyseessä.

Näytä kuvat oikeassa koossa

Käsky voi kuulostaa erikoiselta mutta ei ole itsestäänselvyys. Todella usein tulee vastaan sivustoja, joissa esitetään kuva tietyssä koossa mutta kyseinen kuva on ladattu sivustolle paljon isompana. Toki responsiiviset sivustot tarvitsevat silloin tällöin kuvavaraa skaalautumista ajatellen – silloin voi esim. hyödyntää picture-elementtiä. Picture auttaa asettamaan kuvalle useita eri lähteitä. Niistä ladataan ainoastaan se, joka parhaiten sopii sen hetkiseen omaan ruutukokoon, käytitpä sitten mobiilissa tai pöytäkoneella sivustoa ja siinä näkyvää kuvatiedostoa.

Esimerkki vielä kuvan laittamisesta oikeassa koossa. Jos näytät vaikkapa 750 x 750 pikselin kokoisen kuvan, älä pakota käyttäjää lataamaan vaikkapa 1500 x 1500 pikselin kuvaa verkon yli, CSS:n kautta sitä pienentäen. Lataa julkkariin ja palvelimelle sen kokoinen kuva kuin mitä on määritetty sen maksimikooksi sivustolla. Kuvan ei tarvitse olla sen suurempi.

Pakkaa kuvat

Käytä oikean laatuisia kuvia, sillä kuvissa on aina ns. ”turhaa dataa”. Sellaista tietoa, joka kyllä kasvattaa kuvan kokoa mutta ei vaikuta mitenkään kuvan laatuun – ainakaan siten, että ihmissilmä laadun jotenkin huomaisi. Pakkaa siis kaikki kuvat sivustollasi. Ne voi pakata joko Photoshopilla ennen sivustolle lataamista tai sitten voit ottaa käyttöösi pluginin tätä varten. Yahoolla oli vuoteen 2015 asti tarjolla Smush.it-niminen palvelu kuvien pakkausta varten, joten termi ”smushaus” oli joskus käytetty kuvan pakkaamisen kanssa. Nykyään tarjolla on palveluita kuten Resmush.it tai Compressor.io. Molemmat näistä pienentävät kuvakokoa ilman että kuvalaatu kärsii, parhaimmillaan jopa 90%.

Lataa videot ja todella isot tiedostot ulkoiseen palveluun

Tämä pätee niin isoihin kuviin tai PDF-tiedostoihin, tai mihin tahansa formaattiin joka vie paljon tilaa. Video lienee se yleisin tiedostotyyli, joka vie paljon tilaa. Todella isot kuvatkin kannattaa ladata ulkoisen palvelun kautta, sillä ne vievät kotisivun serveriltä turhaan tehoja. Kaikkia kuvia ei tietenkään kannata lähteä ulkoisille sivustoille siirtämään mutta mikäli esim. jättikokoisten kuvien näyttäminen on palveluidesi kannalta erityisen tärkeää, lataa ne ulkoiseen palveluun. Samoin mm. videotiedostot.

YouTube ja Vimeo ovat tunnetuimmat mutta löytyy myös Wistia, Sprout, Viddler, Flickr, PhotoBucket ja DailyMotion. Dropbox pystyy myös tarjoamaan julkisen jakolinkin kuvalle tai videolle. Aikaisemmin mainitut palvelut pystyvät kaiken lisäksi tarjoamaan videoillesi valmiin suuren katsojakunnan. Esimerkiksi YouTube-videolla voi olla iso rooli liikenteen ajajana sivustollesi. Se on lisäksi Googlen palvelu eli SEOn kannalta merkittävä lisä sivustollasi. Kyllä, Google tykkää kun käytät heidän palveluitaan.

Toivottavasti saat nopeasti edellä mainitut vinkit käyttöösi sillä sivuston nopeus on tärkeä tekijä matkalla kohti parempaa luonnollista hakukonenäkyvyyttä. Myös käytettävyys paranee kun sivuston nopeus on sinulla hallinnan alla.

Lisää vinkkejä löydät SEO-blogistamme.