Zakaj je moja spletna stran počasna?

Nekateri razlogi za počasno nalaganje spletnih strani so splošno znani, na primer prevelika velikost slik. Da odkrijemo vse “krivce” za počasno spletno stran si pomagamo z orodji kot so Google PageSpeed Insights, GTmetrix in Pingdom. 

Kako si naj razlagam rezultate analiz hitrosti spletnih strani in kaj lahko naredim da jih izboljšam?

Google PageSpeed Insights, GTmetrix in Pingdom so orodja za preverjanje velikosti slik, odzivnega časa strežnika, števila prenešenih datotek in drugih parametrov, ki vplivajo na hitrost spletne strani. Z uporabo orodij za analizo hitrosti spletnih strani dobimo odgovor, katere parametre lahko spremenimo ali popravimo, da bo spletna stran hitrejša.

Povezave do spletnih orodij za analizo hitrosti spletnih strani najdete tu:

• Google PageSpeed Insights 
• GTmetrix
• Pingdom

Želite preskočiti do določenega poglavja? Izberite spodaj:

• Velikost slik (Ang. ‘Optimise images’)
• Gostovanje in CDN omrežja
• Minimizacija datotek (Ang. ‘Minification’)
• Kompresija datotek (Ang. ‘Gzip compression’)
• Mankajoči elementi (Ang. ‘Missing elements’)
• Predpomnilnik (Ang. ‘Cache’)
• Število zahtev (Ang. ‘Server requests’)
• Izogibanje preusmeritvam (Ang. ‘Sever redirect’)
• Prednost vidni vsebini (Ang. ‘Prioritize Visible Content’)
• Postopno nalaganje (Ang. ‘Lazy Loading’)
• Rezultati analiz

Velikost slik

Eden izmed najbolj znanih razlogov, ki upočasni spletno stran je neustrezna velikost slik. Slike velikosti par MB (MegaByt-ov) so vsekakor prevelike! S smiselnim razmerjem med ločljivostjo in dimenzijo, velikost slike ustrezno zmanjšamo glede na potrebe na spletni strani ter s tem pohitrimo njeno nalaganje.

Da je slika na spletni strani prevelika pomeni, da je dimenzija slike večje, kot je prikazana na spletni strani. Potrebe po tem, da je slika večja kot bi zadostovalo ni, saj večja kot je slika, dlje traja, da se prenese po spletu do uporabnika.

Dodatno je potrebno izbrati primeren format slike, ki ga razberemo po končnici datoteke. Najbolj znana formata sta PNG in JPG. Prvi se uporablja za logotipe oziroma vse slike, ki so prosojne. JPG datoteke se uporabljajo za klasične slike, kot so slike narave, mesta, ljudi,… PNG datoteke zasedejo veliko več prostora, saj morajo poleg informacij o posameznih barvah, nositi tudi informacijo o stopnji njene prosojnosti. Pri JPG datotekah te potrebe ni.

Slike spletnih strani naj ne bodo večje kot par 100 kB.

V redkih primerih je na spletni strani smiselno prikazovati večje slike od 1MB, na primer pri spletnih straneh fotografov, arhitektov, itd. Pri uporabi večjih slik se moramo zavedati da bo obiskovalec čakal dlje, da se mu spletna stran odpre.

Pri postopku optimizacije slik, torej pri prilagajanju dimenzij slike, je potrebno paziti pri izbiri algoritmov za kompresijo. Enako kot pri preveliki povečavi slike, tudi pri pretiranem manjšanjem, slika izgubi kvaliteto. Zato se mora uporabljati algortime za stiskanje slik brez izgube kvalitete.

Več o optimizaciji slik si lahko preberete tukaj.

Gostovanje

Izbira strežnikov in različnih paketov gostovanja so največkrat prezrti dejavniki vpliva na hitrost nalaganja spletne strani. Vpliv delovanja strežnika na hitrost spletnih strani lahko enostavno preverimo z orodji za analizo hitrosti spletne strani.

Kaj je čas do prvega bita ali Time To First Byte?

Pri rezultatih analize hitrosti spletne strani zasledimo dva različna pojma, čas odziva strežnika (ang. ‘Server Respons Time’) in čas do prvega bita (ang. ‘Time To First Bite’). Oba predstavljata čas, ki je potreben, da steče komunikacija med strežnikom in napravo, preko katere se spletno stran obiskuje.

Čas do prvega bita je predstavljen s prvo vrstico, ki je imenovana enako kot je domena, torej spletna stran, ki jo preverjamo (v našem primeru je to dweb.si). Znotraj tega časa se popolnoma nič ne zgodi. Obiskovalec čaka na strežnik, da se ta odzove in prične pošiljati datoteke. Pravo nalaganje spletne strani se prične šele po tem času!

Orodje Pingdom vizualno prikaže nalaganje datotek s strežnika. Takšna vizualna predstavitev nalaganja datotek se imenuje slap ali ‘Waterfall’. Ta časovni prikaz nalaganja datotek je odlična pomoč, da se odkrije, katere datoteke potrebujejo več časa, da se prenesejo, kot druge.

Znotraj t.i. waterfalla datotek lahko razberemo tudi ali je kakšna datoteka, ki bi bilo možno njen čas nalaganja izboljšati. Pogosto so to slike, ki so prevelike ali pa v napačnem formatu. Ostale datoteke so običajno tekstovne in niso večje od par 10kB.

Izbira ustreznega gostovanja lahko drastično izboljša hitrost spletne strani!

Kako lahko odpravim težave s hitrostjo spletne strani zaradi neustreznega gostovanja? Dve izmed najbolj enostavnih možnost sta menjava ponudnika gostovanj ali menjava paketa gostovanja. Pri menjavi paketa za gostovanje se pri izbranem ponudniku ne pozanimajte le o količini prostora na strežniku, ampak tudi o specifikacija procesorja, vrsti diska, vrsti povezave do strežnika in še mnogo drugih pomembnih funkcionalnostih. Izbira gostovanja je lahko za laike težavna. Priporočamo, da izberete ponudnika za izdelavo in vzdrževanje spletne strane, ki hkrati nudi tudi gostovanje ali vsaj svetovanje na tem področju.

V kolikor menjava ali sprememba gostovanja ni možna, lahko na hitrost spletne strani vplivamo z vzpostavitvijo CDN omrežja. CDN omrežje ali  ‘Content Delivery Network‘, je storitev ki omogoča deljeno dostavo vsebine do obiskovalcev z različnih strežnikov, razdeljenih po celotnem svetu. Ali ga imate vključenega lahko preverite z orodjem GTmetrix.

Nalaganje spletne strani mizarstva Hrovat smo z vključitvijo CDN omrežja pohitrili za 2 sekundi!

Da izboljšamo čas nalaganja datotek nastavimo CDN omrežje. Z njim poskrbimo, da se datoteke, ki so nameščene na vašem stežniku prenesejo na druge stežnike in se na določene časovne intervale sinhronizirajo z glavnim strežnikom. Ko želi nekdo obiskati spletno stran se datoteke ne prenašajo le iz enega strežnika, pač pa iz večih hkrati. Obenem pa se te strežinke samodejno izbere glede na najhitrejšo možnost dostave datotek.

Minimizacija datotek

Če vaša stran ne doseže več kot 100 obiskovalcev na dan, lahko ta del mirno preskočite. Gre za minimizacijo JavaScript, CSS in HTML datotek, ki vplivajo na hitrost spletne strani pri večjemu število obiskovalcev. Pri analizah spletnih strani se minimizacijo datotek najde pod pojmom ‘Minification’ ali ‘Minimisation’. Posamezne datoteke so ločeno preverjene.

Na minimizacijo datotek kot naročnik spletne strani ne morete vplivati, lahko pa o tem povprašate razvijalca vaše spletne strani.

Tako kot imajo besedila v časopisu presledke, prehode v nove vrstice in dodatne razmake, jih imajo tudi te datoteke. Našteti, načeloma odvečni, elementi, so uporabljeni zaradi boljše preglednosti in lažje berljivosti kode, vendar za pravilno delovanje spletne strani niso potrebni. V kolikor se naštete odvečne elemente iz datotek odstrani, se velikost datotek zmanjša ter s tem tudi čas nalaganja spletne strani.

Kompresija datotek

Kompresija datotek je eden izmed enostavnejših načinov za povečanje hitrosti nalaganja in delovanja spletne strani. Orodja za analizo spletnih strani uporabljajo za kompresiji datotek spletne strani pojem ‘Gzip’ ali ‘Gzip compression‘. Toda kaj pomeni sploh Gzip kompresija?

Stisnjene datoteke so manjše in se hitreje prenesejo na obiskovalčevo napravo.

Podobno kot lahko na osebnih računalnikih z ustreznimi programi naredimo kompresijo datotek (Zip), lahko na strežniku pred prenosom datotek njeno vsebino stisnemo. Skupna velikost vseh prenešenih datotek je tako manjša kot sicer, zaradi česar se spletna stran hitreje naloži.

Na žalost pa Gzip kompresija nima tako velikega vpliva kot bi želeli. Čeprav prihranimo pri prenosu spletne strani nekaj kB, to za obiskovalca ni opazno, saj so drugi faktorji, ki imajo veliko večji vpliv na hitrost spletne strani. Je pa opazno za strežnik, saj je v primeru večjega števila hkratnih obiskovalcev prihranek v velikosti par kB na posameznega obiskovalca lahko zelo očiten.

Mankajoči elementi

Ko nekdo obišče spletno stran, se s strežnika prenašajo vse datoteke, ki se jih potrebuje za pravilen izgled in delovanje spletne strani. Teh datotek ni malo in lahko pride do situacije, da določene datoteke na strežniku ni ali pa je narobe poimenovana. GTmetrix je orodje, ki odlično prikaže ali neke datoteke ni. Obenem poda lokacijo na strežniku (spletni naslov), kjer naj bi ta datoteka bila. Tako lahko na to lokacijo dodamo pravo datoteko, s čimer se odpravi napako.

Pričakovali bi, da se v primeru manjkajoče datoteke stran hitreje naloži. Vendar se počasneje!

Za boljšo predstavo lahko vzamemo primer, ko doma pozabimo denarnico. Ko se zavemo, da je nimamo pri sebi, najprej pregledamo žepe, torbico, avto ipd., če jo imamo slučajno kje drugje, šele nato si priznamo, da je nimamo pri sebi ter da smo jo nekje pozabili. To pomeni, da smo porabili veliko časa, da smo preverili kje vse je nimamo. Podobno je z datotekami na spletnih straneh. V kolikor spletna stran ‘išče’ datoteko, ki jo potrebuje, a je ne najde, večkrat ponovi postopek iskanja. S tem pa se podaljša čas nalaganja spletne strani!

Predpomnilnik

Predpomnilnik (ang. Cache) je “obvezna oprema” vsako spletno stran. Google PageSpeed Insights in GTmetrix na nastavljen “Cache” dajeta velik poudarek, saj njegova zajema velik delež pri končni oceni spletne strani. To je tudi smiselno, saj pravino nastavljen predpomnilnik lahko pohitri nalaganje spletne strani (predvsem v primeru spletnih trgovin) tudi za več sekund!

Vključitev in pravilna konfiguracija predpomnilnika lahko izboljša hitrost nalaganja spletne strani tudi do 50 %!

Ob obisku spletne strani se prične prenos datotek na obiskovalčevo napravo. Manjša kot je velikost datotek, hitreje se prenesejo in obiskovalcu se stran v krajšem času naloži. Pri predpomnilniku pa ne gre za datoteke ki so povezane s slikami in besedili spletne strani, pač pa vsebino in funkcionalnostjo celotne strani.

Za primer vzemimo vsakdanjo situacijo. Če vprašamo koliko je 4×5, lahko seštejemo štiri petice in dobimo rezultat 20. Ko naslednjič vprašamo koliko je 4×5, skoraj verjetno ni potrebno ponovno seštevanje petic, saj nam je odgovor že znan, 20. Podobno je pri spletnih straneh. Da ne potrebujejo za vsakega obiskovalca individualno izvajati kalkulacij, predpomnilnik vnaprej pripravi “izračune” za naslednjega obiskovalca. Vsebina je tako že pripravljena in čaka, da se jo posreduje obiskovalcem.

Predpomnilnik vnaprej pripravi spletno stran za naslednjega obiskovalca!

Pri programih za analizo optimizacije spletne strani je potrebno poudariti slabost pri preverjanju nastavitev predpomnilnika. Za pozitivno oceno pri tem kriteriju je dovolj že vključitev predpomnilnika, ne preverja pa njegove konfiguracije. Tako je lahko spletna stran s slabo konfiguriranim predpomnilnikom pozitivno ocenjena kljub temu, da na delovanje strani nima opaznega vpliva.

Dodatno je potrebno poudariti, da lahko v primeru napačne konfiguracije pride do napak pri izgledu in nalaganju vsebine na spletni strani. Pogoste napake, ki se vidijo so mankajoče ikone, slike, odvečno besedilo na strani in podobno.

Prav tako je potrebno razumeti, da so spremembe, ki jih kot urejevalec spletne strani naredimo, niso takoj vidne. Trenutna vsebina je shranjena v predpomnilniku in obiskovalec vidi to vsebino. Videl jo bo, dokler bo le ta shranjena v predpomnilniku, kar je običajno 12 ur. Zato je potrebno ob spremembi vsebine na spletni strani predpomnilnik sprazniti. Angleško se temu reče ‘Clear Cache’ ali ‘Flush Cache’. To pomeni, da se vsebina strani na novo shrani v predpomnilnik, zaradi česar so spremembe obiskovalcem sedaj vidne.

Pravilno nastavljen predpomnilnik lahko neverjetno izboljša hitrost vaše spletne strani, vendar mora biti pravilno nastavljen in testiran. Kljub temu, da rezultati analiz spletne strani hitro potrdijo prisotnost nastavljenega predpomnilnika, to ne pomeni, da je njegova nastavitev optimalna.

Število zahtev

Spletna stran je sestavljena iz več 10 datotek, ki se prenašajo na obiskovalčevo napravo. Več kot je datotek, dlje se stran nalaga, kar lahko razberemo tudi iz zgoraj omenjenega slapa datotek oz. ‘Waterfall-a’. Če pa datoteke združimo, lahko s tem skrajšamo čas nalaganja strani.

Spletno stran lahko pohitrimo z združevanjem smiselnih datotek.

V analizah spletnih strani je ocena za število zahtev za datoteke podana kot ‘število HTTP zahtev‘ oziroma ‘Number of Requests‘. Rešitev za izboljšanje rezultata in hitrejšo spletno stran je združevanje datotek. V eno večjo enoto združimo tiste datoteke, ki služijo istemu namenu. To pomeni, da združimo CSS in JS datoteke v čim manjše število. Namesto, da strežnik posamezno prenaša 12 CSS datotek tako prenese le eno večjo CSS datoteko. Enako velja za JavaScript datoteke, ki služijo funkcionalnosti spletne strani.

Izogibanje preusmeritvam

Spletne strani oziroma njeni razvijalci se poslužujejo različnim tehnikam, da vsebino na strani prikažejo njenim obiskovalcem različno glede na lokacijo, kjer se nahaja obiskovalec. To velja predvsem za večjezične spletne strani. Čeprav obstaja več različnih načinov reševanja takih želja, so smernice za pravilno izvedbo le tega jasno podane. V analizah so preusmeritve najdene pod pojmom ‘Server redirects’ ali samo ‘Redirects’.

Preusmeritve so skoraj nujne pri večjezičnih spletnih straneh.

Preusmeritev pomeni, da se obiskovalca spletne strani iz Nemčije preusmeri na ustrezno stran, kot je ‘www.dweb.si/de’, zaradi česar obiskovalec vidi stran v svojem jeziku. Slednji način izvedbe preusmeritve je najbolj primerna rešitev v kolikor se za posamezen jezik ne bi uporabile individualne domene. Vendar pa je bil za pravilno preusmeritev potreben čas, saj je najprej naložilo glavno stran in nato preusmerilo uporabnika na pravo stran glede na lokacijo.

Nekatere spletne strani vsebujejo dodatno preusmeritev, v kolikor se stran obišče preko mobilnega telefona. Tako bi se v zgornjem primeru obiskovalca preusmerilo na naslov ‘mobile.dweb.si/en’. V tem primeru imamo že dve zaporedni preusmeritvi. Vsaka preusmeritev pa zahteva dodaten čas za vzpostavitev povezave do strežnika in uspešnega pričetka prenosa datotek. Zaradi tega se poskušamo izogniti nepotrebnim preusmeritvam in prihraniti na času nalaganja strani.

Za vrhunsko delovanje spletne strani z veliko obiska je kvalitetno gostovanje nujno potrebno.

Rešitev za izboljšanje časa, v kolikor so preumeritve potrebne, je izboljšanje gostovanja. Najboljša rešitev je prehod na virtualni strežnik ali zasebnega. S tem se zmanjša čas do odziva strežnika, s čimer lahko strežnik hitreje posreduje pravilne informacije. 

Prednost vidni vsebini oz. Prioritize Visible Content

Obiskovalec spletne strani ne potrebuje vseh datotek hkrati. Ob prikazu spletne strani vidi le njen najbolj zgornji del spletne strani. Za prikaz potrebuje datoteke, ki služijo prikazu strukture spletne strani in zgornjih elementov, kot so navigacijski meni, sider in podobno. Ostalih datotek obiskovalec ne potrebuje, zaradi česar jih je nesmiselno pričeti nemudoma pošiljati.  V ta namen je potrebno “preurediti" vrstni red dostavljanja datotek uporabniku.

V testih za analizo optimizacije spletne strani se temu kriteriju reče ‘Prednost vidni vsebini’. Optimizacija tega področja je kompleksnejši postopek in zahteva dobro tehnološko znanje.  

Postopno nalaganje oz. Lazy Loading

Smiselna funkcionalnost spletnih strani je tako imenovan ‘Lazy Loading’. Dobesedni prevod ne pove veliko o namenu te funkcionalnosti, boljši prevod pa bi bil ‘Postopno nalaganje‘. Ker uporabniki ne vidijo celotne spletne strani naenkrat ni smiselno, da se takoj pričnejo prenašati vse slike s strežnika na obiskovalčevo napravo. Lazy Loading poskrbi, da se naložijo le tiste slike, ki se nahajajo v obiskovalčevem vidnem polju. Ko je enkrat naložena se seveda stalno vidi, vendar v kolikor do nje na spletni strani ne pridemo, se ta ne naloži. Tako se stran del strani, ki jo obiskovalec vidi veliko hitreje prikaže, saj ne potrebuje prenašati slik, ki jih obiskovalec trenutno sploh ne more videti.

Rezultati analiz

Rezultati analiz spletnih strani lahko podajo dober vpogled v začetek procesa optimizacije spletne strani. Čeprav podajo jasne odgovore, kaj je pravilno nastavljeno in kje so možnosti za izboljšave, so rezultati nekaterih kriterijie premalo natančni, da bi lahko razbrali konkretne razloge, ki upočasnjujejo spletno stran.

Rezultati so lahko zavajujoči in je v primeru, da je spletna stran dobro ocenjena a kljub temu počasna, potrebno ponovno preveriti posamezne nastavitve. Obenem pa je potrebno poudariti smiselnost optimizacije nekaterih kriterijev. Minimizacija datotek in Gzip kompresija nista ključnega pomena za spletne strani, ki nimajo veliko obiska. Podobno bi se lahko vprašali za dajanje prednosti vidni vsebini in postopnemu nalaganju vsebine.