Brzina web sajta je na prvi pogled jasan pokazatelj efikasnosti i ozbiljnosti rada vašeg sajta. Brzi sajtovi u elegantnom dizajnu čine surfera srećnim, štede njegovo vreme, prezentuju brend u lepom svetlu i maksimalno ga motivišu da izvrši konverziju.
Pored toga, brzina sajta utiče i na pozicije ključnih reči na rezultatima pretrage. Najave su da će u 2021. ovo biti sve uticajniji SEO faktor. U tom smislu spremaju i specijalan updejt zakazan za 15. jun 2021. pod nazivom Core Web Vitals.
Core Web Vitals, je svojevrsni set metrika koji je u direktnoj korelaciji sa brzinom, responsabilnošću, vizualnom stabilnošću i interaktivnosti sajta tokom učitavanja koda.
„Core Web Vitals“ nagradiće dramatično boljim pozicijama sajtove koji imaju vrhunsko korisničko iskusvo.
Drugim rečima, glasnogovornici iz Gugl tvrde da će „Core Web Vitals“ nagraditi dramatično boljim pozicijama sajtove koji imaju vrhunsko korisničko iskusvo (brz kod koji stabilno radi na svim uređajima).
Činjenica da Google puno ulaže u svoj javni alat govori da brzinu ne treba prepuštati slučaju i da jako ozbiljno razmislite o investiciji u ovu oblast.
Miloš Stojanović, dipl. ing.
U nastavku teksta, moj partner za optimizaciju brzine sajta, Miloš Stojanović poznat po svom portalu za izdavanje i prodaju nekretnina Roommateor.com, koji je napravio sa svojom devojkom Natašom, objasniće najbitnije parematre i preporuke.
Miloš je dimplomirani inženjer, programer sa 10 godina iskustva i ekspertizom u optimizaciji brzine rada web sajtova.
Miloš će izneti iskustvena zapažanja i po prioritetima objasniti najvažnije parametare (šta znače, koliko utiču, koje su vrednosti koje su prihvatljive) da bi sajt oduševio surfere, ubedio Gugl da su surferi srećni i time maksimalno pospešio „customer journey“, tj. aktivnosti korisnika ka nama željenim transakcijama.
Najbitniji parametri i akronimi
Najpre bih napomenuo da se ne treba fokusirati na ispravljanju ovih parametara ponaosob, već kompletan fokus treba posvetiti savetima za unapređenje sajta koji su opisani u drugom delu. Ovi parametri su samo rezultati analize sajta, ali najbolji način da se poboljšaju jeste unapređenje sajta primenom saveta. Smanjivanjem broja saveta indirektno ćete poboljšati rezultate ovih parametara.
Kliknite na parametar za više informacija.
First Contentful Paint (FCP)
Predstavlja vreme od trenutka kada stranica krene da se učitava do prikazivanja prvog sadržaja na ekranu (tekst, slike, pozadinske slike, svg elementi).
First Input Delay (FID)
Vreme od kada korisnik prvi put stupi u interakciju sa stranicom i odradi neku akciju zasnovanu na JavaScript-u do trenutka kada je stranica završila sa učitavanjem i može da odgovori na tu akciju. Smatra se ok do 100ms, od 100ms do 300ms treba unaprediti, dok je 300+ms loš rezultat.
Largest Contentful Paint (LCP)
Predstavlja vreme koje je potrebno da se prikaže najveći element na ekranu (slika ili blok teksta). Do 2.5s je ok, od 2.5s do 4s treba unaprediti, dok je 4+s loš rezultat.
Cumulative Layout Shift (CLS)
Ukupan zbir svih neočekivanih pomeranja elemenata na stranici nakon njenog učitavanja. Na primer, učita se neki tekst i posle nekog vremena se učita slika iznad teksta i pomeri tekst na dole na ekranu. Ovo je čest slučaj sa reklamama na sajtovima, gde se npr. učitaju baneri na vrhu stranice i onda pomere sav tekst na dole.
Speed Index
Meri koliko se brzo sadržaj vizuelno prikazuje na stranici prilikom učitavanja stranice. Do 4.3s se smatra dobrim rezultatom, od 4.3s do 5.8s treba unaprediti, dok se 5.8+s smatra lošim rezultatom.
Time to Interactive
Predstavlja vreme koje je potrebno stranici da postane potpuno iteraktivna za korisnika. Do 3.8s se smatra dobrim rezultatom, od 3.8s do 7.3 zahteva unapređenje, dok je 7.3+s loš rezultat.
Total Blocking Time
Ukupno vremenski period u kom stranica ne reaguje na unos/iterakciju korisnika, kao sto je klik mišem, dodirivanje ekrana ili pritisci tastature. Treba težiti ka tome da ovo vreme bude manje od 300ms.
Google pagespeed alat sugeriše puno saveta koji po primeni mogu da uštede resurse i povećaju brzinu sajta. Evo kratkog pregleda:
Preporuke za povećanje brzina sajta
Kliknite na preporuku za više informacija:
Prikazujte slike u formatima sledeće generacije
Formate sledeće generacije za slike je neophodno koristiti ukoliko želite da imate kvalitetan sajt. Svi sajtovi imaju manje ili više slika, ukoliko se slike učitavaju sporo sajt gubi ozbiljnost u očima korisnika koji su nestpljivi da što pre nađu ono što ih interesuje. Neke slike su toliko velike, da mogu onemogućiti korisćenje sajta ili čak ukočiti ceo uređaj sa kojeg su otvorene slike. Iz tih razloga su nastali formati koji imaju u sebi automatski kompresiju.
Najbolji formati su: JPEG 2000 i WebP. Oni omogućavaju da imate odličan kvalitet slika, optimizuju fotografije, a to znači da fotografije zauzimaju malu memoriju na uređajima i zbog toga se brzo učitavaju.
Sajtovi koji su uspunili sve uslove za brzinu učitavanja stranica zbog jedne neoptimizovane slike dobijaju brzinu koja je daleko ispod proseka po kriterijumima koje je propisao Google. To sve govori o tome koliko je bitno imati optimizovane slike.
Ne podržavaju svi pretraživači novije formate slika. HTML5 je to rešio tako što kombinacijom <picture> i <source> taga možete da proverite da li pretraživač podržava određeni format i ukoliko podržava, da prikažete sliku u tom formatu. Ukoliko ne podržava, uvek imate opciju da prikažete sliku u formatu koji je podržan na svim pretraživačima, najčešće su to JPG ili PNG. Potrudite se da slike koje su u JPG ili PNG formatu budu kompresovane, na internetu imate dosta programa koji mogu da umanje veličinu slike bez da se izgubi na kvalitetu slike.
Eliminišite resurse koji blokiraju prikazivanje
Bootstrap i jQuery spadaju u top 5 biblioteka koje postoje na većini sajtova. One omogućavaju jako brzu implementaciju funkcionalnosti na sajtu i nude dosta gotovih rešenja koji smanjuju vreme izrade. Ova dva primera koje sam naveo su zapravo eksterne biblioteke koje je potrebno ugraditi u sam sajt kako bi mogli da ih koristimo. Ugrađivanjem u header samog sajta znači da je sajtu potrebno određeno vreme kako bi se sav taj kod učitao, time opterećujemo sajt i usporavamo brzinu učitavanja stranice. Najveća mana celog tog procesa je što imamo previše koda za učitavanje i to koda koji se ne koristi na samom sajtu već se koristi samo mali deo onoga što poseduju te biblioteke. Postoji još mnogo primera ekternih učitavanja, ovo su samo neki od njih, a neke od biblioteka zahtevaju dodatne biblioteke kao bi bile funkcionalne, npr. da biste koristili Bootstrap 4 morate pre njega učitati biblioteke jQuery i Pooper.js.
Najbolje je koristiti samo ono što je neophodno. Potrebno je napisati kod samo za ono što postoji na sajtu bez učitavanja koda koji nema nikakvu funkciju jer takav kod usporava rad sajta. Izrada sajta bez eksternih biblioteka će trajati duže, ali će takav sajt biti brz i funkcionalan. Ukoliko je neophodno korišćenje eksternih biblioteka, potrudite se da ih učitate na dnu stranice i da ih zakasnite kako ne bi remetile učitavanje samog sajta.
Uklonite nekorišćeni JavaScript
U prethodnom odgovoru sam rekao da nekorišćeni kod treba eliminisati. Tu sam mislio na CSS i Javascript. Svaka stranica na sajtu treba da ima svoj JavaScript kod jer se sigurno ne koristi na svakoj stranici isti kod. Potrebno je posvetiti se svakoj stranici pojedinačno kako ne bismo imali suvišne kodove. Najviše problema u razvoju sajta nastaje kada imamo generalne kodove koji se učitavaju na svakoj stranici.
Uklonite nekorišćeni CSS
CSS je takođe potrebno pisati pojedinačno za svaku stranicu. Naravno, na sajtu će postojati i generalni. Na sajtovina recimo postoje određene boje koje se provlače kroz sve stranice. Klasu koja dodeljuje boju je dovoljno napisati na jednom mestu i primeniti je svuda.
Trudite se da generalni CSS bude što manji i ugradite ga unutar head-a između <style> tagova. CSS koji se odnosi na pojedinačnu stranicu sajta ukoliko nije veliki (a ne bi trebalo da bude) takođe možete da ugradite u head stranice unutar <style>.
Ukoliko je CSS kod pojedinačne stranice veliki, treba razdvojiti kritičan CSS od nekritičnog. Kritičan je onaj CSS koji utiče na izgled elemenata koji se prvi vide prilikom učitavanja stanice. Taj kritičan je potrebno ugraditi u <style> u head stranice, dok nekritičan css možete učitati u dnu stranice, iznad </body> taga. Na internetu možete pronaći razne biblioteke/sajtove koji mogu da vam pomognu u razdvajanju kritičnog i nekritičnog CSS koda.
Na ovaj način, na svakoj stranici će se učitavati samo onaj CSS kod koji je neophodan za tu stranicu, što će dosta uticati na brzinu učitavanja sajta.
Umanjite CSS
Ukoliko osmišljavanje CSS koda nije unapred isplanirano, dolazi do toga da se kroz CSS provlače iste klase. Potrebno je umanjiti CSS, potom ga minifikovati i sačuvati u fajlu [ime_fajla].min.css. Nekad je dobro minifikovati i iskoristiti CSS koji je ugrađen u samu stranicu bez pravljenja posebnog fajla. Ovo se isto mora odraditi na svakom web sajtu.
Umanjite JavaScript
Minifikujte JavaScript kod i smestite ga u [imefajla].min.js fajl da bi veličine prenosa bile male. Male fajlove ugradite direktno u dnu stranice, minifikovane. Ovo se mora odraditi na svakom web sajtu.
Prikazujte statične elemente sa efikasnim smernicama keša
Statične elemente je potrebno učitati samo jednom, nakon toga treba da se povlače iz keša kako Vam se ne bi učitavali svaki put na uređaju sa kojeg ste već pristupili. Treba da se naprave takve smernice da se učitava samo ono što je promenljivo na sajtu, sve što je statično bi se prikazivalo iz keša iz pretraživača direktno. Prednost keširanja je što se sajt učitava veoma brzo. Npr. minifikovani js fajlovi se mogu keširati u pretraživaču, tako što se na ime fajla doda sufiks ?v=1.0 gde 1.0 predstavlja verziju fajla. Sve dok se broj ne promeni, pretraživač će učitavati fajl iz keša. Ukoliko napravite promenu u fajlu, onda je potrebno i da povećate broj, npr na ?v=1.1, tada će pretraživač da preuzme sa servera novu verziju fajla i da ga kešira. Ovo je primenjivo i za CSS fajlove.
Izbegavajte ogromne mrežne resurse
Treba izbegavati velike slike ili fajlove, zato što oni otežavaju funkcionisanje sajta odnosno dovode do sporog učitavanja stranica na kojima se nalaze.
Izbegavajte preveliku veličinu DOM-a
Potrebno je imati minimalnu strukturu u izradi koda. Možete imati maksimum 1500 node-ova i HTML elemente možete ulančavati maksimum do 60 child-ova. Jedan nod predstavlja jedan HTML element.
Izbegavajte pravljenje lanaca kritičnih zahteva
Na sajtu treba da postoji što kraća putanja do fajlova kako bi se lakše dovlačili sa servera. Ovo posebno važi za fajlove koji se učitavaju na velikom broju stranica. Izbegavajte sajt.rs/a/b/c/d/e/f/common.css, već postavite common.css u root samog sajta, sajt.rs/common.css.
Omogući da broj zahteva i veličine prenosa budu mali
Potrudite se da naslovna strana sajta, kao i one stranice koje su vam najbitnije na sajtu, imaju što manje zahteva prilikom učitavanja stranica. To se pre svega odnosi na broj slika, broj js i css fajlova. Slike treba rešiti kompresijom, odgovarajućim veličinama i lazyload učitavanjem čime će se slike dovlačiti tek kada budu prikazane na sajtu, dok js i css minifikujte i po mogućstvu inline u kod ukoliko nisu veliki, a na glavnim stranicama svakako treba da budu što manji.
Odredite odgovarajuću veličinu slika
Odgovarajuća veličina slika je ona veličina koliki je prostor na ekranu gde se slika prikazuje. Nemojte prikazivati slike iste veličine na svim uređajima već svakom uređaju prilagodite sliku ponaosob. Npr. nema potrebe da sliku dimenzija 1000×750 prikazujete na mobilnom uređaju, već za mobilne uređaje kreirajte novu sliku dimenzija 425×320. Postoje različiti programi za resize slika na internetu koje je jednostavno koristiti. Dobra praksa je da
za svaku sliku na sajtu kreiramo sledeće verzije:
1366×820, 1024×615, 768×460, 480×290, 415×250, 375×225, 360×215 i 320×190
Korišćenjem <figure>, <picture> i <source> HTML5 elemenata kontrolišite koja slika će biti prikazana na ekranu u zavisnosti od veličine ekrana uređaja sa kog se pristupa sajtu.
Odložite slike van ekrana
Slike učitajte sa kašnjenjem ili kada korisnik dođe do njih (lazyload). Dakle, nije potrebno da učitavate sve slike sa stranice, već da se slike učitavaju tek kada budu vidljive na ekranu. S’ obzirom da je to kasnije učitavanje potpuno neprimetno u očima korisnika, može se upotrebiti čak i ako se slika nalazi na početku stranice na kojoj se korisnik trenutno nalazi.
Omogućite kompresiju teksta
Omogućite kompresiju teksta prilikom dovlačenja sa servera uključivanjem gzip kompresije na serveru. Time će vreme dovlačenja fajlova sa servera biti minimalno.
Početno vreme odgovora servera
Jačina servera ovde igra veliku ulogu. Najposećenije stranice keširajte na serveru i samo ih isporučujte na zahtev bez konekcije sa bazom i bilo kakve obrade. Takođe, optimizujte upite ka bazi podataka, sve što možete da uradite u SQL uradite u SQL, nemojte dovlačiti podatke iz baze pa ih dodatno obrađivati u nekom od serverskih programskih jezika već sve uradite u SQL upitu.
Izbegavajte višestruka preusmeravanja stranice
Ukoliko imate 301 redirekcije na sajtu, izbegnite višestruke redirekcije. Npr. ako imate redirekciju sa stranice A na stranicu B, koja ima redirekciju na stranicu C, namestite odmah redirekciju sa stranice A na stranicu C. Zvuči logično, ali dosta sajtova ima ovu manu, a da programeri nisu ni svesni toga.
Koristite video formate za animirani sadržaj
Izbegavajte GIF-ove, posebno ukoliko traju dugo. Umesto .gif koristite MPEG4/WebM video formate. Vodite računa o tome da pokrijete sve osobine GIF-ova u svom videu, a to je da video podrazumevano isključen ton, da se ponavlja i da kreće automatski.
Uklonite duplirane module iz JavaScript paketa
Neki js moduli u sebi učitavaju dodatne js module koji su im neophodni za funkcionisanje. Najčešće je to jQuery biblioteka. Zamislite da imate 2 modula, modul A i modul B koje želite da dodate na sajt i da oba modula funkcionišu uz pomoć jQuery (ovo je čest slučaj kada učitavate neke od gotovih galerija na sajt). Ukoliko samo učitate oba modula, desiće se da 2 puta skinete jQuery što dosta usporava sajt. Potrebno je da nađete način da svaki modul koji je neophodan učitate samo jednom, što bi u primeru značilo da nađete načina da jQuery biblioteku učitate samo jednom pre učitavanja modula A i B.
Izbegavajte atribut document.write
Nemojte koristiti document.write() jer ima jako loše performanse i može značajno da uspori učitavanje stranice. Google Chrome blokira izvršavanje ove funkcije u većini slučajeva. Umesto nje, pokušajte da asinhrono učitate sadržaj koji želite, nakon učitavanja glavnog sadržaja.
Smanjite korišćenje sadržaja treće strane
Generalno sam protiv korišćenja third party biblioteka na sajtovima ali ako baš morate onda se potrudite da ih učitate tako da ne utiču na učitavanje stranice. Učitajte ih na dnu, zakašnjene u odnosu na učitavanje stranice.
Takođe, jedna od opcija je da koristite i defer i async atribute za učitavanje js biblioteka. Defer učitava js fajl paralelno sa učitavanjem stranice, ali ga izvršava nakon što se učita kompletna stranica, dok async isto učitava js fajl paralelno sa učitavanjem stranice i nakon što se fajl učita prekine se učitavanje stranice dok se fajl ne izvrši. Bez defer i async, učitavanje stranice se prekida i tokom dovlačenja fajla i tokom izvršenja.
Potrudite se da korisnicima pružite zadovoljavajuće korisničko iskustvo dok traje učitavanje biblioteke u vidu spinera kako stranica ne bi delovala izlomljeno. Još bolja varijanta je da biblioteku učitate na neku akciju u trenutku kada je ona zaista potrebna, recimo ukoliko imate kalendar na stranici koji zahteva jQuery biblioteku, učitajte je tek na klik korisnika na kalendar i prikažite spiner dok učitavanje traje.
Ovo je jedna od najčešćih grešaka na sajtovima, gde se biblioteke učitavaju odmah i neretko u head-u što je najgora moguća opcija.
Izbegavajte velike promene rasporeda
Ovo sam već objasnio kada sam pričao o Cumulative Layout Shift (CLS). Potrudite se da nemate zakasnele promene sadržaja na stranici. Ukoliko imate sliku koja se učitava kasnije, ostavite prazan prostor ili prazan HTML element koji će biti zamenjen slikom, tako da se raspored elemenata ne promeni nakon učitavanja slike. Korisnike sajta veoma nervira kada im sadržaj sajta poskoči na dole dok ga čitaju, a može se desiti i da greškom kliknu na neko dugme koje se pojavi na ekranu gde ga nisu očekivali u trenutku iterakcije sa sajtom.
Smanjite vreme izvršavanja JavaScript datoteka
Pod izvršavanjem se podrazumeva sve, od vremena potrebnog za dovlačenje js biblioteka sa servera, preko vremena potrebnog za izvršavanje koda, do memorije koja je iskorišćena. Potrebno je da primenite savete koje sam već naveo kako biste smanjili vreme izvršavanja js datoteka, a to su minifikacija koda, eliminisanje koda koji nije potreban na stranici i keširanje js fajlova.
Efikasno kodirajte slike
Ako želite da imate najbrži sajt u svojoj niši potrebno je da primenite sve savete koje sam naveo, a to su: kompresujte slike, sve .gif zamenite videom, koristite lazyloda za učitavanje slika, prikazujte responzivne slike sa odgovarajućim dimenzijama u odnosu na uređaj na kom se prikazuju i koristite WebP format za slike kad god je podržan u pretraživaču.
Iz iskustva smatram korisnim ako slike čuvate na CDN serverima, koji su optimizovani za brzinu isporučivanja slika, a takođe mogu da isporučuju i slike u najboljem formatu koji podržava pretraživač sa kog se pristupa.
Najčešća pitanja u razgovoru sa klijentima
Koja je cena optimizacije brzine sajta?
Cena optimizacije brzine sajta zavisi od veličine projekta, ciljeva koji se traže i vremena realizacije. Vreme potrebno za optimizaciju zavisi od dosta faktora, potrebno je da izanaliziram sajt pa mogu da uradim procenu ukupne cene.
Da li optimizujete statične html, css sajtove?
Da, s tim da ukoliko sajt nije složene strukture, uvek savetujem izradu novog sajta sa istim dizajnom, nekad je brže i lakše napraviti novi sajt nego optimizovati postojeći.
Da li optimizujete word press sajtove?
WordPress sajtovi sadrže dosta dodatnih pluginova koji učitavaju brdo eksternih biblioteka koje dramatično usporavaju brzinu sajta. Postoje sajtovi koje nije uopšte lako optimizovati, jer se onda funkcionalnost dovodi u pitanje, tako da je često moj savet da se odradi novi sajt bez WordPress-a. WordPress se uglavnom koristi za sajtove koji nisu veoma kompleksni (njegova glavna namena su blogovi), pa izrada novog sajta nije skupa, jer ne zahteva mnogo vremena.
Da li optimizujete brzinu kod internet prodavnica custom tipa?
Da, svakako. Napomenuo bih da vlasnici internet prodavnica još uvek ne investiraju kako i koliko bi trebalo, tako da u Srbiji štedeći vreme svojim kupcima mogu da ostvare pristojnu komparativna prednost. Očekujem da od 2021. ova činjenica počne da se menja.
Koju brzinu po Google page speed test alatu možete garantovati?
Zavisi od trenutnog stanja sajta i tehnologija u kojima je rađen. Kao profesionalac uglavnom garantujem zelenu zonu (90+), a za sajtove koje izrađujem od nule 97+, često to bude i 100 od 100.
Koliko treba vremena za maksimizaciju brzine prezentacionog sajta?
Do sada sam radio svaki projekat optimizacije u proseku po mesec dana, ali ne uzimam sajtove za koje procenim da nije moguće izvršiti željenu optimizaciju i postići visoke rezultate. Za precizniju procenu vremena je potrebno da pogledam sajt detaljnije.
Da li uz optimizaciju brzine sajta možete uraditi i tehnički SEO?
Proces povećanja brzine sajta idealan je trenutak da se isprave i najčešće SEO greške i uvedu poboljšanja kao što su, pravilno uvođenje canonical taga, h1-h4 struktura, strategija linkovanja, pravilno setovanje robots direktiva, eliminacija dupliciranih titlova i meta opisa i tako dalje. Potpuno profesionalno, zar ne?
Ukoliko želite da povećate brzinu vašeg sajta ili postavite dodatno pitanje iskoristite donju formu.
Milan Todorović je diplomirani inženjer elektronike, SEO stručnjak sa iskustvom od skoro 15 godina. Vlasnik je specijalizovane SEO agencije SeoExpert.rs. Aktivan na Instagramu @seoexpert.rs. Uvek spreman za kvalitetnu SEO diskusiju!
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
Sve moze da se optimizuje za odredjenu cenu, jer zahteva odredjeni napor i trud, ali dok god se prate pravila i radi na sajtu, moze se uraditi.