V trgovini izberete blagajno, kjer pred vami v vrsti stoji ena oseba, in si mislite: »Tukaj bom hitro opravil, hitreje kot na drugi blagajni, kjer jih v vrsti stoji pet.« A glej ga, zlomka, izdelek kupca pred vami ima napako s ceno, zato mora prodajalka počakati vodjo izmene. Postajate nestrpni, vodje še ni, na sosednji blagajni se vrsta pomika naprej. Vodja le pride, uredi napako s ceno in končno tudi vi končate nakup. Pogledate na drugo blagajno, kjer petih oseb ni več na vidiku, saj so že zapustile trgovino. V fizični trgovini kupci takšen zastoj še potrpijo, na spletu nikakor. Vašo stran zapustijo in gredo h konkurenci.
Zakaj se potem vaše strani še kar nalagajo počasi? Zakaj potencialnim kupcem otežujemo nakup in po nepotrebnem izgubljamo prihodek?
Spodnja tabela pa nam prikazuje, kako se z vsako dodatno sekundo nalaganja spletne strani poveča odstotek zapustne stopnje.
Hitrost spletne strani je ključna za razvoj vašega spletnega posla! Uporabniki so danes zelo zahtevni in pričakujejo takojšen dostop do informacij. Vsaka dodatna sekunda čakanja ustvarja frustracijo in potrebo po zapustitvi vaše spletne strani.
Vpliv indeksa »mobile first« na organsko pozicioniranje
Marca 2018 je »stric« Google oznanil, da uvaja indeks »mobile first«, ki bo na podlagi prilagojenosti vaše spletne strani za mobilnike indeksiral in pozicioniral vašo stran med iskalnimi rezultati. Več o mobilni prevladi je bilo napisano tudi v tem članku.
Pa čeprav imate v primerjavi s konkurenti najhitrejšo stran za uporabnike namiznih naprav.
Pogosto opažamo, da so spletne strani za namizne naprave dobro optimizirane, hkrati pa obupno počasne za mobilnike. Na primer, ko prek mobilnika vstopimo na spletno stran, ni potrebe po nalaganju elementov strani, ki niso na vidnem območju zaslona. Preostali elementi naj se raje naložijo sproti, ko se uporabnik pomika nižje. Za učinkovitost hitrosti nalaganja so pomembni izrazi v nadaljevanju.
»First meaningful paint«
Glede na zahtevnost današnjih uporabnikov je ključno, kako se elementi strani nalagajo. Ko nekdo klikne na vašo stran in po prvih sekundah še vedno vidi belo ozadje, je večja verjetnost, da bo stran zapustil, kot pa če se elementi strani nalagajo postopno (»progressive rendering«). Postopno nalaganje elementov uporabniku nakazuje, da se s stranjo nekaj dogaja in se bo ta kmalu naložila.
»First meaningful paint« predstavlja čas nalaganja strani, ki je potreben za prikaz vsebine na celotnem zaslonu.
»First interactive«
Obiskovalci želijo vašo stran uporabljati, zato je »First interactive paint« (FI) naslednji pomemben mejnik pri nalaganju strani. FI predstavlja čas nalaganja strani, ki je potreben, da prvi elementi strani postanejo interaktivni (da jih uporabniki lahko kliknejo).
»Consistently interactive«
Naslednja stopnja nalaganja spletne strani je »consistently interactive«, ki pomeni, kdaj je spletna stran v celoti interaktivna – torej, da so naloženi vsi interaktivni elementi.
Orodje Google Lighthouse
Za pregledovanje hitrosti nalaganja spletne strani je Google v letu 2018 dal na tržišče odlično orodje Lighthouse, ki omogoča podroben vpogled v kritične elemente strani in priložnosti za izboljšave. Orodje prikaže stopnje nalaganja strani, kot je razvidno iz spodnje slike.
Poleg tega lahko vidimo, kateri elementi strani so najbolj problematični in imajo lahko največji vpliv na izboljšanje hitrosti nalaganja. Pri vsaki od teh postavk je na voljo povezava »Learn more«, ki vodi do Googlove strani s priporočili za rešitev.
5 rešitev za hitrejšo spletno stran
Preden se spustimo v podrobnosti, je vredno preveriti, ali so na vaši strani urejene naslednje stvari:
1. Kompresija GZIP
Predstavlja hitro in učinkovito rešitev za izboljšanje nalaganja spletne strani. Deluje tako, da zmanjša velikost HTTP-odziva, kar pomeni, da izboljša odzivni čas spletne strani. Implementacija je enostavna – z vnosom kode v datoteko .htaccess ali uporabo »plug in-a« GZIP, če uporabljate CMS.
2. Predpomnilnik za določene tipe vsebine (»Leverage browser caching«)
S to rešitvijo določimo, koliko časa bodo različni tipi vsebine (slike, css, skripte …) shranjeni v brskalniku, kar pomeni, da ko bo naslednjič obiskovalec prišel na vašo stran, se bo ta naložila hitreje.
3. Odstranitev nepotrebnih preusmeritev
Pri brskanju po spletnih straneh se pogosto zgodi, da smo preusmerjeni na drugo pristajalno stran. V večini primerov se to zgodi tako hitro, da niti ne opazimo. Vseeno pa vsaka preusmeritev pomeni dodaten zahtevek na strežnik, in če je teh zahtevkov veliko, to lahko vpliva na hitrost nalaganja strani. Verige preusmeritev (»chain redirects«) upočasnjujejo nalaganje spletne strani, zato jih je smiselno odstraniti.
4. Združevanje CSS in datotek JavaScript
Čista koda olajša spletnim pajkom pregledovanje vaše spletne strani, zato se je treba izogibati vnosu CSS in kode JavaScript v kodo HTML. Število CSS in JavaScript naj bo čim manjše, saj vsaka datoteka pomeni dodaten zahtevek med stranjo in strežnikom. Te zahtevke zmanjšamo s tem, da datoteke združujemo (npr. da uporabljamo samo eno datoteko, kjer je koda CSS združena za celotno stran).
5. Optimizacija slik
Slike so pomemben del spletne strani, in ta jih pogosto vsebuje na desetine ali stotine. Morda se ne zdi veliko, če posamezno sliko zmanjšamo za 30 kB, vendar ko optimiziramo vse slike, bistveno izboljšamo hitrost nalaganja strani.
Opažamo, da so na nekaterih straneh posamezne slike velike tudi po 1 MB in več, kar je občutno preveč. Kadar dodajate nove slike, uporabite programe za kompresijo slik (Adobe Photoshop, Pixlr Editor …), ki omogočajo zmanjšanje velikosti datoteke brez pretirane izgube njene kakovosti.
Pri optimizaciji bodite pozorni tudi na resolucijo slike – namreč če bo slika na strani prikazana v razmerju 640 x 480, potem ni potrebe, da na strežnik nalagamo sliko v razmerju 1024 x 768.
Cilj optimizacije hitrosti vaše spletne strani je v tem, da se najprej lotite kritičnih elementov, ki najbolj upočasnjujejo nalaganje strani.
Optimizacija katerih elementov strani pa je pri vas najbolj vplivala na hitrost nalaganja?
Zelo dobro.
hvala !