Kas ei aja mitte vihale, kui mõne kodulehe kiirus on nii aeglane, et tahaks arvuti aknast välja visata? Kulub tükk aega, enne kui midagi üldse ekraanile ilmub, seega jõuad juba kahtlema hakata, kas see leht üldse olemas on! Kui see siis tükkhaaval brauserisse hakkab ilmuma, kaalud juba tõsiselt, kas asi on ikka kaasnevat piina väärt. Viimaks ära laadinud lehele pääsedes oled ilmselt juba piisavalt frustreeritud, et sealt midagi lugemata lahkuda.
Aeglaselt laadiva kodulehe psühholoogiline efekt
Kas sa oled kunagi helistanud telefoniteenindusse ja oodanud kõnejärjekorras terve igaviku? Samal ajal, kui ootetooni kuulates laual sõrmi trummeldasid, lendas hulk väärtuslikku aega lihtsalt minema.
Kuna suutsid keskenduda ainult oma kasvavale ärritusele, läks helistamise põhjus oodates juba meelest ära. Kui kõne lõpuks vastu võeti, ei olnud sa tänulik, vaid lihtsalt vihane.
Nüüd aga mõtle korraks sellisele kogemusele, kus klienditugi kohe vastas ja oli sind rõõmuga nõus aitama. See oli palju parem tunne, eks?
Külastajad tunnevad end sinu kodulehel maandudes samamoodi. Aeglane koduleht on nagu halb kilenditeenindus. Selle asemel, et sisu laadimist kannatlikult oodata, lähevad inimesed närvi ja lahkuvad lehelt. Isegi kui nad sinna jäävad, on nad sisu kvaliteedi osas palju skeptilisemad.
Kiiresti laadiv koduleht jätab lugejale aga positiivse esmamulje ning esitab ka sisu parimas valguses.
Miks kodulehe kiirus on tähtis ka Google jaoks?
Lisaks kehvale kasutajakogemusele mõjutab kodulehe aeglane esitus ka selle asetust Google’i otsingutulemustes. Madalam positsioon otsingutulemustes tähendab automaatselt kodulehe halvemat nähtavust ja seega vähem külastajaid.
Samuti on veebilehe laadimiskiirus eriti oluline mobiilseadmete jaoks, kuna sidevõrgud ei ole nii kiired ja kindlad, kui arvutite kasutatavad püsiühendused.
Kodulehe kiirus ja miks see on oluline?
- Kasutajakogemus: Kiire laadimisaeg tagab parema kasutajakogemuse. Kiiresti laadiv või avanev koduleht suurendab tõenäosust, et nad jäävad lehele kauemaks.
- SEO (otsingumootoritele optimeerimine): Otsingumootorid, nagu Google, hindavad kiireid koduleht kõrgemalt. See tähendab, et kiire leht võib olla paremini nähtav otsingutulemustes ja tuua rohkem orgaanilist liiklust.
- Konversioonimäär: Kiirel veebilehel on suurem tõenäosus paremate konversioonide saavutamiseks. Kui kodulehe külastajad ei pea ootama, et koduleht laeks, saavad nad kiiremini ja lihtsamini teha neile ja ka teile olulisi tegevusi. Näiteks täita broneerimisvorme, teha ostusid või muid olulisi tegevusi, mis on seotud kodulehe ja äritegevuse eesmärkidega.
- Madalam põrkemäär: Kiire koduleht vähendab tõenäosust, et külastajad lahkuvad kohe pärast lehele jõudmist (põrkemäär). See aitab aga suurendada külastajate kaasatust ja suhtlust kodulehega.
- Sujuvam kogemus mobiilikasutajatele: Kiire veebileht on eriti oluline mobiilikasutajatele, kuna mobiilsete seadmete ühendused võivad olla aeglasemad. Kiire laadimine tagab mobiilikasutajatele sujuvama kogemuse.
Kuidas teada saada, kas minu koduleht on kiire või aeglane?
Kodulehe kiiruse mõõtmiseks on mitmeid tööriistu. Soovitame kasutada näiteks Google PageSpeed Insights, Pingdom või GTMetrix veebiteenuseid, mis analüüsivad sinu veebilehte ja teevad seeläbi kindlaks, milline on kodulehe kiirus ning mida annaks sealjuures parandada.
Kui oled tuvastanud, et sinu koduleht laeb aeglaselt ja kui soovid parandada kodulehe jõudlust, siis on mitmeid samme, mida saate teha kodulehe kiiruse optimeerimiseks. Näiteks pildi- ja videofailide optimeerimine, veebilehe vahemälu kasutamine, vähemate pluginate kasutamine, CDN (Content Delivery Network nt Cloudflare) kasutamine ja serveri ressursside optimeerimine. Oluline on jälgida kodulehe kiirust pidevalt ja teha vajalikke parandusi, et tagada kasutajatele kiire ja sujuv kogemus.
Kodulehe kiirus ja testimine rakendusega Gtmetrix
Kodulehe esitusraporti genereerimine käib järgmiselt:
- Ava GTmetrixi koduleht.
- Kleebi aknasse oma URL-aadress ja kliki „Analyze“.
- Oota paar sekundit.
- Vaata tulemust ja soovitusi avanenud raportist.
GTmetrix grupeerib potentsiaalsed probleemküsimused lihtsasti arusaadavateks soovitusteks nagu „Optimeeri pildid“ või „Võimenda brauseri vahemälu“. Kõige suuremat tähelepanu nõudvad küsimused asetatakse tabeli tippu ja ülejäänud soovitused vastavalt sellele, kui palju need kodulehe kiirust mõjutavad.
GTmetrix on üks parimaid kodulehe kiiruse ja esituse testimise tööriistu, kuid see pole ainuke võimalus. Tasuta rakendused PageSpeed Insights (Google’i tööriist) ja Pingdom on samuti head valikud. Pole oluline, millise kasuks neist otsustad, kuid kõige targem on üks välja valida ja selle juurde pidama jääda.
Kodulehe jaoks vajalike optimeerimissammude tegemine
GTmetrixi või mõne muu tööriista genereeritud kiirusraport on kahtlemata väärtuslik, kuid selle terminid võivad mõjuda heidutavalt. Kuidas kodulehte parandada, kui sa ei saa raporti soovitustest aru?
Vaatame paari levinud soovitust lähemalt ning selgitame, kuidas neid praktikas rakendada.
Optimeeri pildid, et koduleht oleks kiirem ja serveri koormus väheneks
Halvasti optimeeritud pildid üks tüüpilisi kodulehe esitusprobleemide põhjusi. Olenemata failiformaadist on pildid tihti ülearu suured ning tarbivad liiga palju serveriruumi, mistõttu kodulehte edastakse külastaja brauserisse aeglasemalt kui vaja.
Piltide optimeerimise eesmärk peaks olema täiusliku kompromissi leidmine pildikvaliteedi ja failisuuruse vahel. Korrektseks optimeerimiseks pead esmalt veenduma, et pildifail oleks õiges formaadis.
Kolm peamist pildiformaati, millega tõenäoliselt kokku puutud, on:
- GIF (Graphic Interchange Format) on üks vanimaid jätkuvas kasutuses pildifailitüüpe, mis töötab kõige paremini suurte tekstielementide või ühtlaste värvipindade jaoks nagu lihtsad logod, ikoonid ja sümbolid. GIF-id on üldiselt üsna väikese failisuurusega, kuid kuna nende värvipalett on piiratud (ainult 256 tooni), ei ole seda formaati soovitav kasutada fotode või detailsete piltide jaoks. GIF-formaat toetab ka lihtsaid animatsioone.
- PNG (Portable Network Graphics) on välja töötatud GIF-i asenduseks. See toetab palju rohkem värvitoone ja annab väikeseid failisuurusi, eriti kuvatõmmiste (screenshot) jaoks. Vanasti ei toetanud PNG-formaati mõned vanemad brauserid, kuid tänapäeval PNG-i ainus puudus GIF-i kõrval selle animatsiooni-funktsiooni puudumine.
- JPEG (Joint Photographic Experts Group) on populaarne pildiformaat, mida kasutab üle 70% kodulehtedest. JPEG-formaati võib kasutada iga pilditüübi jaoks, kuid esmajoones on see välja töötatud fotode jaoks. JPEG tuleb hästi toime foto rikkalike detailide tihendamisega, mistõttu see avaneb kvaliteetsena erinevates suurustes. Faili maht jäetakse siiski võimalikult väikeseks.
Uutele piltidele parimat formaati valides tasub järgida paari lihtsat reeglit:
- Foto või detaili- ja värvirohke keeruka pildi jaoks vali JPEG.
- Kuvatõmmis, joonistus või tekstirohke pildifail pane PNG-formaati.
- Lihtsa, videoprogrammi kaasamist mittevajava animatsiooni jaoks võta kasutusele GIF (väldi seda siiski muudes olukordades).
Nüüd, kui sul erinevatest pildifailitüüpidest ülevaade olemas, vaatame lähemalt optimeerimiseks vajalikke samme, mida peaksid astuma enne mis tahes pildi üleslaadimist.
Pildifaili lõikamine
Pildifaili optimeerimise esimene samm on selle lõikamine. See käib nii diagrammi, foto, kuvatõmmise kui ka muude pilditüüpide kohta. Peafookust segavate elementide eemaldamine pildilt täidab kaks eesmärki. Esiteks tõmbab see kasutaja tähelepanu olulistele asjadele. Teiseks vähendab see pildifaili mahtu, mis on optimeerimiseks väga kasulik.
Faili originaalversioon, näiteks kaameraga tehtud foto või ekraanipilt, on väga harva täiusliku raamistusega.
Muuda pildifaili suurust
Olenemata formaadist on pildid tihti kodulehe jaoks liiga suured. Pole mõtet laadida kaamerast või nutitelefonist üles üle 3000 piksli laiust pilti, kui kodulehel kuvatav maksimumlaius on 600 pikslit.
Pea meeles, et suured failid võtavad rohkem ruumi, põhjustavad serverile lisakoormust ning laevad kodulehe külastaja brauseris pikka aega. Olenevalt WordPressi-teemast ei pruugi suured pildid ka kodulehele korrektselt asetuda.
Probleemi lahendamiseks loob WordPress üleslaetavast pildist automaatselt kolm erinevat versiooni: pisipilt, keskmine pilt ja täissuuruses pilt. See suuruste muutmise protsess koormab aga serverit ning ei säästa tegelikult kettaruumi, sest pildid salvestatakse ka nende originaalsuuruses. Ka siis, kui lisad pildi Media Libraryst, on selle vaikesuuruseks originaalsuurus, seega pead käsitsi valima ühe väiksematest suurustest.
Targem on muuta piltide suurust enne nende üleslaadimist.
Paki pildifailid kokku
Failide kokkupakkimine on üks kõige tähtsamaid piltide optimeerimise taktikaid. Eemaldades failidest inimsilmale märkamatu ebavajaliku info, tagad väiksema suurusega, ent samaväärse kvaliteediga pildid.
TinyPNG
Üks võimalus kodulehe piltide väiksemaks tegemiseks on tasuta veebitööriist nimega TinyPNG. Nimele vaatamata suudab TinyPNG lisaks PNG-formaadile optimeerida ka JPEG-faile.
Tööriista on lihtne kasutada. Tõsta failid hiirt kasutades (drag and drop) selleks märgitud alale või kliki üleslaadimisalal ja leia kokkupakkimiseks vajalikud pildid oma arvutist. TinyPNG pakib failid kokku ja loob allalaadimislingi, kust saad uued ja väiksemad pildid arvutisse salvestada.
Kui oled piltide kodulehele ülespanemiseks valmis, liigu visuaali töötlemise keskkonnas Add Media>Upload Files ning tõsta kokkupakitud pilt kas hiirega vajalikku kohta või vali üleslaaditav fail oma arvutist. Valitud fail on juba kokku pakitud (see tuleks ka väiksemaks teha ja parajaks lõigata), seega on see kodulehe jaoks optimeeritud.
(Kui optimeerid kodulehele varem üleslaetud pilti, pead pildilingi uuendama ja kokkupakitud pildile suunama.)
WP Smush
Teine tore tööriist kodulehe pildimaterjali kokkupakkimiseks on tasuta WordPressi-plugin nimega WP Smush. Erinevalt TinyPNG-st, kus pildid tuleb manuaalselt kokku pakkida, võimaldab see plugin failid optimeerida automaatselt üleslaadimise ajal. Lihtsalt lae pilt Media Librarysse ja see pakitakse automaatselt kokku.
WP Smush aitab vajadusel masspakkida ka varem kodulehele üleslaetud pildifaile, kahandades ja optimeerides tunduvalt nende mahtu.
WP Smushi kõige võimsamad funktsioonid (nt piiramatu suurusega failide pakkimine ja masspakkimine ühe klikiga) nõuavad tasulise versiooni tellimist. See on aga eeldatavasti oma hinda väärt, kui kasutad kodulehel palju pilte või kui pildid lehe laadimiskiirusele tõsiseid probleeme põhjustavad.
Piltide optimeerimine (lõikamine, väiksemaks muutmine ja kokku pakkimine) on üks kõige lihtsamaid viise kodulehe esituse parandamiseks, eriti pildirohkete veebide puhul.
Kaasa need sammud oma toimetamisrutiini ning su kodulehe külastajad märkavad tulemust hetkega.
Kahanda failisuurusi ning minimeeri
GTmetrixi tüüpiline soovitus on Javascripti ja CSS-failide „minimeerimine“. WordPressi-teema HTML-koodi ja seotud fotode kõrval panustavad nimetatud failid kodulehe välimusse ja toimimisse. Nende minimeerimine tähendab failide väiksemaks muutmist, näiteks ebavajaliku tühja ruumi minimeerimist.
Iga kord, kui serverist tuleb kodulehe sisule nõue, luuakse uus ühendus. Paljude Javascripti- ja CSS-failide korral võib serverile tekkida märkimisväärne ülekoormus. Mida enam kodulehekülastaja brauser serverisse nõudeid saadab, seda koormatumaks see muutub ja seetõttu hakkab leht ka aeglasemalt laadima.
Minimeerimine kombineerib Javascripti- ja CSS-failid ühte faili – tavaliselt failitüüpide kaupa. See võib erineva info edastamiseks vajalikku nõuete arvu tunduvalt vähendada.
Failide minimeerimiseks on saadaval erinevaid WordPressi pistikprogramme. Lähemalt tasub uurida näiteks selliseid pluginaid nagu Better WordPress Minify või WP Super Minify.
Väldi ressursside mitmekordset laadimist
Vahemälu-plugina kasutamine on üks efektiivsemaid viise kodulehe laadimiskiiruse parandamiseks.
Tavaliselt saadetakse veebilehte lugeja brauserisse järgmiselt: iga kord kui külastaja mõnel vahelehel klikib, ehitab server selle HTML-koodi dünaamiliselt n.ö nullist uuesti üles, toetudes WordPressi baaskoodile ja kodulehe teemale. Tihti nõuavad lugejad aga järjest sama HTML-i.
Vahemälu varundamisega saab HTML uuesti loomise asemel edastada külastajatele staatilisi faile. Ehk põhimõtteliselt luuakse uus fail üks kord ja järgmistele kasutajatele saadetakse selle faili vahemällu salvestatud koopiat. Selline talitusviis vähendab serverile esitatavaid nõudeid, alandab serveri koormust ning kahandab pudelikaela-efekti.
Järgmisena toon välja paar kõige mainekamat WordPressi vahemälu-pluginat. Pistikprogrammide vaheliste konfliktide vältimiseks tuleks neist aga rakendada vaid üks korraga.
- W3 Total Cache (installimisjuhis)
- WP Super Cache (installimisjuhis)
- WP Rocket (installimisjuhis)
Kõik kolm teevad head tööd, kuid selle artikli näites kasutame W3 Total Cache’i, kuna see minimeerib ka Javascripti- ja CSS-faile.
Loe ka:
Veendu, et kodulehte ei aeglustaks mõni kasutatavatest pluginatest
Pluginad on kahtlemata üks peamisi WordPressi eeliseid mõne muu CMS tarkvara ees, kuid need võivad kätkeda endas ka varjatud probleeme, eriti kodulehe laadimiskiiruse osas.
Liiga palju pluginaid võivad kodulehe toimimist mõjutada tõsisemalt, kui arvata oskad.
Kuidas? Loetlen üles vaid mõned näited:
- Pluginad põhjustavad täiendavaid HTTP päringudi. Mõned pistikprogrammid võivad vajada õigesti toimimiseks skriptide kohandamist. See käib eriti kodulehe tavavaates kasutatavate funktsioonidega pluginate kohta. Paraku toodavad sellised pluginad täiendavaid Javascripti- ja CSS-failide päringuid, tekitades nii serverile ja võrgule rohkem koormust.
- Pluginad teevad liiga palju andmebaasi päringuid. Paljud pluginad kasutavad andmete salvestamiseks ja otsimiseks WordPressi andmebaasi. Tulemusetud või keerukad päringud põhjustavad aga kodulehe aeglast laadimist ja kehva esitust.
- Pluginad satuvad omavahel konflikti. Mõned pluginad ei taha teha koostööd teiste pluginate või WordPressi teemaga, mistõttu tekivad turvariskid ja kodulehe toimimisprobleemid.
Kui tunned, et omal käel veebilehe liikluse optimeerimine pole päris sinu teema, siis võta meiega ühendust.
