fbpx

Miks on kodulehe kiirus oluline?

Viimati uuendatud

Georg Luik

Artikli autori pilt.
Laadimine klotsidest laotud.

Miks on lehe laadimiskiirus oluline? Mis vahet teeb mõni sekund (või pool) siia-sinna? Tegelikult on vahe väga suur – suurele tegijale võib kõigest 1 sekund pikem laadimisaeg tähendada 1.6 miljardi dollari suurust kaotust! Iga sekund tõepoolest loeb. Aga sellest lähemalt juba allpool.

Laadimiskiirus on lehe juures üks olulisemaid aspekte, kuid pahatihti jäetakse see tahaplaanile ja eelistatakse ilu ja efektseid lahendusi. Selge see, et oluline on ka ilu – kole veebileht, lisaks halvale väljanägemisele, ei tekita külastajas usaldust. Ometi hindavad külastajad üldiselt rohkem kiirust kui ilu või efekte. Lahenduseks oleks leida tasakaal kõigi kolme vahel.

Selleks tuleks läbi mõelda, kas lehe igasugu vidinate ja viguritega täis toppimine on ikka mõttekas, kui see aeglustab lehe laadimist? Või täidaks leht oma eesmärki ka nendeta?

Miks siis aeglane leht ikkagi halb on?

Tänapäeva kasutajad on kannatamatud ja valivad. Esimese tõrke ilmnedes lahkuvad nad lehelt ning valivad hoopis mõne su konkurendi. Ja sinu brändiga jäävad nad seostama vaid aeglast kodulehte. See on inimesele loomulik käitumine ja tõenäoliselt teeksid ise samuti. Sealjuures ei saa sind keegi ka hukka mõista, meil kõigil on kiire. Lisaks kasutaja “ärritamisele” on sel aga negatiivne mõju ka su ettevõtte edukusele ja mainele. Kuidas? Las ma selgitan.

Aeglane leht = halb kasutajakogemus (UX)

Kasutajakogemus(lihtsustatult) on see, kuidas veebilehe külastaja end lehel tunneb, kui lihtne või raske tal seda kasutada on, kas külastus täidab ta eesmärgid ja kas ta tahaks tulevikus ka tagasi tulla.

Lehe kiiruse ja UX’i suhe on lihtne – kasutajale ei meeldi aeglane leht. Nad tulid su lehele mingit informatsiooni saama, võimalda neile selle info kättesaadavus nii kiiresti kui võimalik. Kaasaegses maailmas eeldame me just seda – kiirust! Kellelegi ei meeldi ju oodata.

Statistika kohaselt lahkub 40% külastajatest lehelt, kui see võtab laadimiseks rohkem kui 3 sekundit. Nutiseadmega külastajate puhul tõuseb sama näitaja 53 protsendini. Kiirus loeb!

Ühesõnaga, aeglane laadimine tähendab halba kasutajakogemust. Halb kasutajakogemus aga ei mõjuta enam vaid su lehekülje kasutajat. Lisaks neile vaatab sellele viltu ka Google. Nii jõuamegi järgmise punktini – otsinugmootorid.

Langeb positsioon otsingutulemustes (SEO)

Mis tahes veebilehest me ka ei räägiks, suure tõenäosusega on selle omanikule oluline, et ta nt Googles nähtaval kohaks oleks. Öeldakse ju, kui sind ei ole Google otsingus esimese 10 tulemuse seas, siis sind ei ole olemas.

Päris nii hull asi muidugi ei ole (oleneb ka kellelt küsida), aga reaalsus on see, et otsingus esimestena välja tulevatel veebilehtedel on teiste ees väga suur eelis. Põhjus on lihtne – enamik inimesi, kui nad internetist midagi otsivad, esilehelt kaugemale ei vaata. Ja siinkohal tulebki appi SEO. Kui SEO on sinu jaoks veel võõras mõiste, siis soovitan lugeda meie artiklit SEO õpetus, kus Jüri lahkab teemat põhjalikult.

Google on välja öelnud, et laadimiskiirus mõjutab positsiooni otsingumootorites. Kahjuks või õnneks ei toimi see päris nii, et alla sekundiline laadimine tõstaks su lehekülje automaatselt kõrgemale, küll aga langetab väga aeglane laadimine su positsiooni kindlasti. Seega ei tasu sellesse ükskõikselt suhtuda.

Lisaks, nagu eelnevalt mainitud, siis aeglane leht paneb kasutaja kannatuse proovile. Kui ta kannatus mingi hetk katkeb (või puudub see tal juba alguses), siis lahkub ta lehelt. Ja see on jälle üks asi, mida otsingumootorid vaatavad – kaua aega su lehel viibitakse. Mida kauem külastajaid lehel hoiad, seda parem!

Peletab kliente ja vähendab müüki

Nagu juba mainitud, kasutajale ei meeldi oodata. Ja kasutajaks on kas su olemasolev või potentsiaalne klient. Kui olemasolevate klientide puhul võib olla tekkinud mingi brändi lojaalsus ja võrreldes uute klientidega on nad on vigade suhtes veidi andestavamad, siis ka sellel on piir. Ära pane oma kliendi kannatust proovile!

Ja aeglase lehega uusi kliente võita? Jääb ära! Enne pannakse brauseri aken kinni ja valitakse teine teenusepakkuja, kui jäädakse sinu lehe laadimist ootama.

Kõik see kahjustab müüki ja suurema ettevõtte puhul ei ole see kahju mitte väike. Amazon arvutas välja, et kui nende lehekülg laeks kõigest 1 sekund aeglasemalt, kaotaks nad iga aasta 1.6 miljardit dollarit! Loomulikult on Amazon üks maailma suurimaid ettevõtteid ja nende näitel on summad astronoomilised, kuid täpselt sama põhimõte kehtib ka väiksemate ettevõtete puhul, lihtsalt mõõtkava on teine.

Mõtle nii – su pakutava teenuse hulka kuulub ka su koduleht. Ja sa tahad ju oma klientidele parimat pakkuda? Siis ära unusta, et kiirem on parem.

Kahjustab su brändi mainet

Paljude jaoks võib esmamulje sinu ettevõttest kujuneda just kodulehe esimesel avamisel. Mis mulje jääb, kui lehe sisu ilmub alles 5 sekundi möödumisel? Mitte hea! Tegelikult võib-olla isegi veel hullem. Ja uut võimalust sa ei pruugi saada. Enamik inimesi, kes lahkuvad lehelt liiga pika laadimisaja tõttu, rohkem seda veebilehte ei külasta.

Aeglaseid lehti peetakse ebausaldusväärseks. Kiireid lehti aga professionaalseteks. Kontrast kahe vahel on üsna suur. Kui kõigest laadimiskiirus võib su mainet sedasi kahjustada, olenemata sellest, kui professionaalne ja usaldusväärne sa tegelikult oled, siis ei tohiks seda “pisiasja” mingil juhul kahe silma vahele jätta. Pigem paranda kohe lehe laadimiskiirust, kui hiljem ettevõtte mainet!

Kuidas oma kodulehe kiirust testida?

Kiiruse testimiseks soovitan kasutada näiteks https://gtmetrix.com/.

Lihtsalt sisesta oma veebilehe aadress ja GTmetrix näitab muuhulgas seda, kui kaua lehe laadimiseks kulus. Tasuks ära märkida, et tasuta versioon kasutab testiks Kanadas asuvaid servereid. Kui kasutataks turule lähemal asuvaid servereid (meie puhul Eesti), siis avaneks leht veelgi kiiremini (PS! test servereid saad muuta, kui lood omale tasuta konto).

GTmetrix kuidas veebilehekiirus testida

Aga kui kiire peaks siis üks veebileht olema?

Kui su lehekülg laeb:

Ehk siis, hoolitse selle eest, et su leht laeks alla kolme sekundi!

Mõned nõuanded kiiruse tõstmiseks

Kiired veebilehed on head

Pildid

Üks suurimaid süüdlasi aeglaste lehtede puhul on optimeerimata pildid. Pildid jäetakse tihti originaalsuurusesse (nii mõõtmetelt kui mahult), kuigi tegelikult kasutatakse veebilehel hoopis väiksemates mõõtmetes pilte. Ja see on ressursside raiskamine, sest lehe laadimisel loeb brauser pilte ikka täismahus.

Ehk kui oled nt üles laadinud pildi mõõtmetega 1920×1000 px mida lehel aga kuvatakse vaid 900×600 px suuruselt, siis selle täissuuruses laadimine on asjatu jõudluse kulu, mis pikendab kohe ka lehe laadimisaega.

Õige oleks pilditöötlustarkvara abil pildid õigesse suurusesse lõigata ning seejärel compressida, mis vähendab nende mahtu veel enam. Piltide töötlemiseks soovitan näiteks brauseripõhist tasuta tarkvara pixlr.com ja compressimiseks tinypng.com.

Kood

Sama kehtib ka muude failide kohta. Mida väiksemad failid on, seda kiiremini leht laeb. Koodi failide kokkupakkimine on veel üks lihtne moodus, kuidas lehe kiirust tõsta. Pakkimisel on standardina kasutusel Gzip formaat ja seda toetavad enamus veebiservereid ja brausereid.

Vaata järgi kas su lehel on pakkimine lubatud. Kui jah, siis on kõik juba hästi. Kui ei ole, siis tuleb seda ise manuaalselt lubada.

WordPressi baasil lehtedel on see väga lihtne, kasutades näiteks WP Rocket (tasuline) või Swift Performance Lite (tasuta) pluginat.

Staatilise HTML lehe puhul saad gzip kokkupakkimist võimaldada kui teed muudatusi konfiguratsiooni failis (erinev eri serverite puhul).

Cache ehk vahemälu

Veebilehte külastades teeb su arvuti tööd, et kõik lehel olevad elemendid kuskilt kätte saada ja need siis su ekraanile kuvada. Kui käid korduvalt samal lehel või lehtedel, mis kasutavad samu elemente, siis oleks iga kord nende andmete otsimine ja kuvamine nagu topelttöö. Ja topelttöö tähendab topelt aega.

Selle vältimiseks kasutatakse vahemälu. See tähendab, et lehe laadimisel salvestuvad osad selle elemendid su arvuti vahemällu ja uuesti sellele lehele minnes ei ole brauseril enam vaja kõiki neid elemente laadida. Naasvate külastajate jaoks kiirendab see lehekülje avanemist märkimisväärselt.

Kuidas vahemälu kasutada? WordPressiga on taas asi lihtne, piisab pluginast nagu WP Rocket (tasuline) või Swift Performance Lite (tasuta). Staatilise HTML puhul tuleb jällegi teha muudatusi konfiguratsiooni failides.

CDN

Kõik veebilehed on kuskile “majutatud”. See tähendab, et kõik nendega seonduvad failid ja andmed on kuskil kindlas serveris. Kui su veebileht on suunatud vaid kohalikele külastajatele, siis muret pole. Jama tekib aga siis, kui oluline hulk külastajaid tuleb ka mujalt maailmast.

Minnes näiteks mõne Ameerikas asuva ettevõtte kodulehele peab su brauser selle veebilehe kuvamiseks ühendust saama seda lehte majutava serveriga. Serveriga mis tõenäoliselt asub samuti Ameerikas. Ja see tähendab jälle pikemat laadimist.

Appi tuleb CDN ehk sisu edastamise võrk. CDN paigutab su veebilehe failid erinevatesse serveritesse üle kogu maailma. Nii saab brauser vajaminevad andmed kätte kasutajale lähemal asuvast serverist ning vähendab seeläbi lehe laadimiseks kuluvat aega. 

Uuri lähemalt kuidas CDNi kasutada

Kokkuvõte

Niisiis, kui arvasid, et lehe kiirus on miski, millele pole vaja erilist tähelepanu pöörata, siis päris nii see tegelikult pole. Laadimiskiirus on põhimõtteliselt esimene asi, mida su veebilehe külastaja “näeb” ja tunneb.

Aeglase laadimisega võid sa selle külastaja kaotada juba tema teekonna alguses. Kiire laadimine seevastu aitab su veebilehel oma potentsiaali realiseerida, teenust või toodet müüa ja sind su konkurentidest eristada! Mingil põhjusel aga ei kasutata seda võimalust maksimaalselt ära ja laadimiskiirust koheldakse teisejärgulisena.

Ära sina sama viga tee! Kontrolli ja vajadusel paranda oma lehe kiirust. Ja kui ise seda teha ei taha või ei jõua, siis pöördu meie poole. Kaotame üleliigsed kilobaidid ja muudame su lehe kiiremaks!

Artikli autori pilt.

Georg Luik

Georg on EasyWebi veebiarendaja ja kasutajakogemuse disainer. UX disainerile omaselt meeldib talle leida ja lahendada veebilehtede ja -rakenduste kitsaskohti.

Nii erialaselt kui ka töövälises elus hindab ta minimalismi, lihtsust ja efektiivsust. Oskusteks on HTML, CSS, WordPress, Bootstrap ja UX. Kiire õppijana ootab ta aga alati uusi väljakutseid, et oskuste nimekirja täiendada saaks.