{"id":2376,"date":"2020-12-02T15:49:21","date_gmt":"2020-12-02T15:49:21","guid":{"rendered":"https:\/\/www.seoexpert.rs\/blog\/?p=2376"},"modified":"2023-08-14T22:12:57","modified_gmt":"2023-08-14T22:12:57","slug":"povecanje-brzine-sajta","status":"publish","type":"post","link":"https:\/\/www.seoexpert.rs\/blog\/povecanje-brzine-sajta\/","title":{"rendered":"Pove\u0107anje brzine sajta – profesionalni saveti"},"content":{"rendered":"

Brzina web sajta<\/strong> je na prvi pogled jasan pokazatelj efikasnosti i ozbiljnosti rada va\u0161eg sajta. Brzi sajtovi u elegantnom dizajnu \u010dine surfera sre\u0107nim, \u0161tede njegovo vreme, prezentuju brend u lepom svetlu i maksimalno ga motivi\u0161u da izvr\u0161i konverziju.<\/p>\n

Pored toga, brzina sajta uti\u010de i na pozicije klju\u010dnih re\u010di<\/strong> na rezultatima pretrage. Najave su da \u0107e u 2021. ovo biti sve uticajniji SEO<\/a> faktor. U tom smislu spremaju i specijalan updejt zakazan za 15. jun 2021. pod nazivom Core Web Vitals<\/strong>.<\/p>\n

Core Web Vitals<\/strong>, je svojevrsni set metrika koji je u direktnoj korelaciji sa brzinom, responsabilno\u0161\u0107u, vizualnom stabilno\u0161\u0107u i interaktivnosti sajta tokom u\u010ditavanja koda.<\/p>\n

„Core Web Vitals“ nagradi\u0107e dramati\u010dno boljim pozicijama sajtove koji imaju vrhunsko korisni\u010dko iskusvo.<\/div>Drugim re\u010dima, glasnogovornici iz Gugl tvrde da \u0107e „Core Web Vitals“ nagraditi dramati\u010dno boljim pozicijama sajtove koji imaju vrhunsko korisni\u010dko iskusvo (brz kod koji stabilno radi na svim ure\u0111ajima).<\/p>\n

\u010cinjenica da Google puno ula\u017ee u svoj javni alat<\/a> govori da brzinu ne treba prepu\u0161tati slu\u010daju i da jako ozbiljno razmislite o investiciji u ovu oblast<\/strong>.<\/p>\n

\"Milo\u0161
Milo\u0161 Stojanovi\u0107, dipl. ing.<\/figcaption><\/figure>\n

U nastavku teksta, moj partner za optimizaciju brzine sajta, Milo\u0161 Stojanovi\u0107<\/strong> poznat po svom portalu za izdavanje i prodaju nekretnina Roommateor.com<\/a>,<\/strong> koji je napravio sa svojom devojkom Nata\u0161om, objasni\u0107e najbitnije parematre i preporuke.<\/p>\n

Milo\u0161 je dimplomirani in\u017eenjer, programer sa 10 godina iskustva i ekspertizom u optimizaciji brzine rada web sajtova.<\/p>\n

Milo\u0161 \u0107e izneti iskustvena zapa\u017eanja i po prioritetima objasniti najva\u017enije parametare (\u0161ta zna\u010de, koliko uti\u010du, koje su vrednosti koje su prihvatljive) da bi sajt odu\u0161evio surfere, ubedio Gugl da su surferi sre\u0107ni i time maksimalno pospe\u0161io „customer journey“, tj. aktivnosti korisnika ka nama \u017eeljenim transakcijama.<\/p>\n

Najbitniji parametri i akronimi<\/h2>\n

Najpre bih napomenuo da se ne treba fokusirati na ispravljanju ovih parametara ponaosob, ve\u0107 kompletan fokus treba posvetiti savetima za unapre\u0111enje sajta koji su opisani u drugom delu. Ovi parametri su samo rezultati analize sajta, ali najbolji na\u010din da se pobolj\u0161aju jeste unapre\u0111enje sajta primenom saveta<\/strong>. Smanjivanjem broja saveta indirektno \u0107ete pobolj\u0161ati rezultate ovih parametara.<\/p>\n

Kliknite na parametar za vi\u0161e informacija.<\/p>\n

\n
\r\n
First Contentful Paint (FCP)<\/i><\/i><\/div>\r\n
\nPredstavlja vreme od trenutka kada stranica krene da se u\u010ditava do prikazivanja prvog sadr\u017eaja na ekranu (tekst, slike, pozadinske slike, svg elementi).
\n<\/div>\r\n <\/div>\n
\r\n
First Input Delay (FID)<\/i><\/i><\/div>\r\n
\nVreme od kada korisnik prvi put stupi u interakciju sa stranicom i odradi neku akciju zasnovanu na JavaScript-u do trenutka kada je stranica zavr\u0161ila sa u\u010ditavanjem i mo\u017ee da odgovori na tu akciju. Smatra se ok do 100ms<\/strong>, od 100ms do 300ms treba unaprediti, dok je 300+ms lo\u0161 rezultat.
\n<\/div>\r\n <\/div>\n
\r\n
Largest Contentful Paint (LCP)<\/i><\/i><\/div>\r\n
\nPredstavlja vreme koje je potrebno da se prika\u017ee najve\u0107i element na ekranu (slika ili blok teksta). Do 2.5s je ok<\/strong>, od 2.5s do 4s treba unaprediti, dok je 4+s lo\u0161 rezultat.
\n<\/div>\r\n <\/div>\n
\r\n
Cumulative Layout Shift (CLS)<\/i><\/i><\/div>\r\n
\nUkupan zbir svih neo\u010dekivanih pomeranja elemenata na stranici nakon njenog u\u010ditavanja. Na primer, u\u010dita se neki tekst i posle nekog vremena se u\u010dita slika iznad teksta i pomeri tekst na dole na ekranu. Ovo je \u010dest slu\u010daj sa reklamama na sajtovima, gde se npr. u\u010ditaju baneri na vrhu stranice i onda pomere sav tekst na dole.
\n<\/div>\r\n <\/div>\n
\r\n
Speed Index<\/i><\/i><\/div>\r\n
\nMeri koliko se brzo sadr\u017eaj vizuelno prikazuje na stranici prilikom u\u010ditavanja stranice. Do 4.3s se smatra dobrim rezultatom<\/strong>, od 4.3s do 5.8s treba unaprediti, dok se 5.8+s smatra lo\u0161im rezultatom.
\n<\/div>\r\n <\/div>\n
\r\n
Time to Interactive<\/i><\/i><\/div>\r\n
\nPredstavlja vreme koje je potrebno stranici da postane potpuno iteraktivna za korisnika. Do 3.8s se smatra dobrim rezultatom<\/strong>, od 3.8s do 7.3 zahteva unapre\u0111enje, dok je 7.3+s lo\u0161 rezultat.
\n<\/div>\r\n <\/div>\n
\r\n
Total Blocking Time<\/i><\/i><\/div>\r\n
\nUkupno vremenski period u kom stranica ne reaguje na unos\/iterakciju korisnika, kao sto je klik mi\u0161em, dodirivanje ekrana ili pritisci tastature. Treba te\u017eiti ka tome da ovo vreme bude manje od 300ms<\/strong>.
\n<\/div>\r\n <\/div>\n<\/div>\n

Google pagespeed alat sugeri\u0161e puno saveta koji po primeni mogu da u\u0161tede resurse i pove\u0107aju brzinu sajta. Evo kratkog pregleda:<\/p>\n

Preporuke za pove\u0107anje brzina sajta<\/h2>\n

Kliknite na preporuku za vi\u0161e informacija:<\/p>\n

\n
\r\n
Prikazujte slike u formatima slede\u0107e generacije<\/i><\/i><\/div>\r\n
\n

Formate slede\u0107e generacije za slike je neophodno koristiti ukoliko \u017eelite da imate kvalitetan sajt<\/a>. Svi sajtovi imaju manje ili vi\u0161e slika, ukoliko se slike u\u010ditavaju sporo sajt gubi ozbiljnost u o\u010dima korisnika koji su nestpljivi da \u0161to pre na\u0111u ono \u0161to ih interesuje. Neke slike su toliko velike, da mogu onemogu\u0107iti koris\u0107enje sajta ili \u010dak uko\u010diti ceo ure\u0111aj sa kojeg su otvorene slike. Iz tih razloga su nastali formati koji imaju u sebi automatski kompresiju.<\/p>\n

Najbolji formati su: JPEG 2000 i WebP. Oni omogu\u0107avaju da imate odli\u010dan kvalitet slika, optimizuju fotografije, a to zna\u010di da fotografije zauzimaju malu memoriju na ure\u0111ajima i zbog toga se brzo u\u010ditavaju.<\/p>\n

Sajtovi koji su uspunili sve uslove za brzinu u\u010ditavanja 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.<\/p>\n

Ne podr\u017eavaju svi pretra\u017eiva\u010di novije formate slika. HTML5 je to re\u0161io tako \u0161to kombinacijom <picture> i <source> taga mo\u017eete da proverite da li pretra\u017eiva\u010d podr\u017eava odre\u0111eni format i ukoliko podr\u017eava, da prika\u017eete sliku u tom formatu. Ukoliko ne podr\u017eava, uvek imate opciju da prika\u017eete sliku u formatu koji je podr\u017ean na svim pretra\u017eiva\u010dima, naj\u010de\u0161\u0107e 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\u010dinu slike bez da se izgubi na kvalitetu slike.
\n<\/div>\r\n <\/div>\n

\r\n
Elimini\u0161ite resurse koji blokiraju prikazivanje<\/i><\/i><\/div>\r\n
\nBootstrap i jQuery spadaju u top 5 biblioteka koje postoje na ve\u0107ini sajtova. One omogu\u0107avaju jako brzu implementaciju funkcionalnosti na sajtu i nude dosta gotovih re\u0161enja 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\u0111ivanjem u header samog sajta zna\u010di da je sajtu potrebno odre\u0111eno vreme kako bi se sav taj kod u\u010ditao, time optere\u0107ujemo sajt i usporavamo brzinu u\u010ditavanja stranice. Najve\u0107a mana celog tog procesa je \u0161to imamo previ\u0161e koda za u\u010ditavanje i to koda koji se ne koristi na samom sajtu ve\u0107 se koristi samo mali deo onoga \u0161to poseduju te biblioteke. Postoji jo\u0161 mnogo primera ekternih u\u010ditavanja, ovo su samo neki od njih, a neke od biblioteka zahtevaju dodatne biblioteke kao bi bile funkcionalne, npr. da biste koristili\u00a0 Bootstrap 4 morate pre njega u\u010ditati biblioteke jQuery i Pooper.js.<\/p>\n

Najbolje je koristiti samo ono \u0161to je neophodno. Potrebno je napisati kod samo za ono \u0161to postoji na sajtu bez u\u010ditavanja koda koji nema nikakvu funkciju jer takav kod usporava rad sajta. Izrada sajta bez eksternih biblioteka \u0107e trajati du\u017ee, ali \u0107e takav sajt biti brz i funkcionalan. Ukoliko je neophodno kori\u0161\u0107enje eksternih biblioteka, potrudite se da ih u\u010ditate na dnu stranice i da ih zakasnite kako ne bi remetile u\u010ditavanje samog sajta.<\/div>\r\n <\/div>\n

\r\n
Uklonite nekori\u0161\u0107eni JavaScript<\/i><\/i><\/div>\r\n
\nU prethodnom odgovoru sam rekao da nekori\u0161\u0107eni 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\u010dno kako ne bismo imali suvi\u0161ne kodove. Najvi\u0161e problema u razvoju sajta nastaje kada imamo generalne kodove koji se u\u010ditavaju na svakoj stranici.
\n<\/div>\r\n <\/div>\n
\r\n
Uklonite nekori\u0161\u0107eni CSS<\/i><\/i><\/div>\r\n
\n

CSS je tako\u0111e potrebno pisati pojedina\u010dno za svaku stranicu. Naravno, na sajtu \u0107e postojati i generalni. Na sajtovina recimo postoje odre\u0111ene boje koje se provla\u010de kroz sve stranice. Klasu koja dodeljuje boju je dovoljno napisati na jednom mestu i primeniti je svuda.<\/p>\n

Trudite se da generalni CSS bude \u0161to manji i ugradite ga unutar head-a izme\u0111u <style> tagova. CSS koji se odnosi na pojedina\u010dnu stranicu sajta ukoliko nije veliki (a ne bi trebalo da bude) tako\u0111e mo\u017eete da ugradite u head stranice unutar <style>.<\/p>\n

Ukoliko je CSS kod pojedina\u010dne stranice veliki, treba razdvojiti kriti\u010dan CSS od nekriti\u010dnog. Kriti\u010dan je onaj CSS koji uti\u010de na izgled elemenata koji se prvi vide prilikom u\u010ditavanja stanice. Taj kriti\u010dan je potrebno ugraditi u <style> u head stranice, dok nekriti\u010dan css mo\u017eete u\u010ditati u dnu stranice, iznad <\/body> taga. Na internetu mo\u017eete prona\u0107i razne biblioteke\/sajtove koji mogu da vam pomognu u razdvajanju kriti\u010dnog i nekriti\u010dnog CSS koda.<\/p>\n

Na ovaj na\u010din, na svakoj stranici \u0107e se u\u010ditavati samo onaj CSS kod koji je neophodan za tu stranicu, \u0161to \u0107e dosta uticati na brzinu u\u010ditavanja sajta.<\/p>\n<\/div>\r\n <\/div>\n

\r\n
Umanjite CSS<\/i><\/i><\/div>\r\n
\nUkoliko osmi\u0161ljavanje CSS koda nije unapred isplanirano, dolazi do toga da se kroz CSS provla\u010de iste klase. Potrebno je umanjiti CSS, potom ga minifikovati i sa\u010duvati u fajlu [ime_fajla].min.css. Nekad je dobro minifikovati i iskoristiti CSS koji je ugra\u0111en u samu stranicu bez pravljenja posebnog fajla. Ovo se isto mora odraditi na svakom web sajtu.
\n<\/div>\r\n <\/div>\n
\r\n
Umanjite JavaScript<\/i><\/i><\/div>\r\n
\nMinifikujte JavaScript kod i smestite ga u [imefajla].min.js fajl da bi veli\u010dine prenosa bile male. Male fajlove ugradite direktno u dnu stranice, minifikovane. Ovo se mora odraditi na svakom web sajtu.
\n<\/div>\r\n <\/div>\n
\r\n
Prikazujte stati\u010dne elemente sa efikasnim smernicama ke\u0161a<\/i><\/i><\/div>\r\n
\nStati\u010dne elemente je potrebno u\u010ditati samo jednom, nakon toga treba da se povla\u010de iz ke\u0161a kako Vam se ne bi u\u010ditavali svaki put na ure\u0111aju sa kojeg ste ve\u0107 pristupili. Treba da se naprave takve smernice da se u\u010ditava samo ono \u0161to je promenljivo na sajtu, sve \u0161to je stati\u010dno bi se prikazivalo iz ke\u0161a iz pretra\u017eiva\u010da direktno. Prednost ke\u0161iranja je \u0161to se sajt u\u010ditava veoma brzo. Npr. minifikovani js fajlovi se mogu ke\u0161irati u pretra\u017eiva\u010du, tako \u0161to se na ime fajla doda sufiks ?v=1.0 gde 1.0 predstavlja verziju fajla. Sve dok se broj ne promeni, pretra\u017eiva\u010d \u0107e u\u010ditavati fajl iz ke\u0161a. Ukoliko napravite promenu u fajlu, onda je potrebno i da pove\u0107ate broj, npr na ?v=1.1, tada \u0107e pretra\u017eiva\u010d da preuzme sa servera novu verziju fajla i da ga ke\u0161ira. Ovo je primenjivo i za CSS fajlove.
\n<\/div>\r\n <\/div>\n
\r\n
Izbegavajte ogromne mre\u017ene resurse<\/i><\/i><\/div>\r\n
\nTreba izbegavati velike slike ili fajlove, zato \u0161to oni ote\u017eavaju funkcionisanje sajta odnosno dovode do sporog u\u010ditavanja stranica na kojima se nalaze.
\n<\/div>\r\n <\/div>\n
\r\n
Izbegavajte preveliku veli\u010dinu DOM-a<\/i><\/i><\/div>\r\n
\nPotrebno je imati minimalnu strukturu u izradi koda. \u00a0Mo\u017eete imati maksimum 1500 node-ova i HTML elemente mo\u017eete ulan\u010davati maksimum do 60 child-ova. Jedan nod predstavlja jedan HTML element.
\n<\/div>\r\n <\/div>\n
\r\n
Izbegavajte pravljenje lanaca kriti\u010dnih zahteva<\/i><\/i><\/div>\r\n
\nNa sajtu treba da postoji \u0161to kra\u0107a putanja do fajlova kako bi se lak\u0161e dovla\u010dili sa servera. Ovo posebno va\u017ei za fajlove koji se u\u010ditavaju na velikom broju stranica. Izbegavajte sajt.rs\/a\/b\/c\/d\/e\/f\/common.css, ve\u0107 postavite common.css u root samog sajta, sajt.rs\/common.css.
\n<\/div>\r\n <\/div>\n
\r\n
Omogu\u0107i da broj zahteva i veli\u010dine prenosa budu mali<\/i><\/i><\/div>\r\n
\nPotrudite se da naslovna strana sajta, kao i one stranice koje su vam najbitnije na sajtu, imaju \u0161to manje zahteva prilikom u\u010ditavanja stranica. To se pre svega odnosi na broj slika, broj js i css fajlova. Slike treba re\u0161iti kompresijom, odgovaraju\u0107im veli\u010dinama i lazyload u\u010ditavanjem \u010dime \u0107e se slike dovla\u010diti tek kada budu prikazane na sajtu, dok js i css minifikujte i po mogu\u0107stvu inline u kod ukoliko nisu veliki, a na glavnim stranicama svakako treba da budu \u0161to manji.
\n<\/div>\r\n <\/div>\n
\r\n
Odredite odgovaraju\u0107u veli\u010dinu slika<\/i><\/i><\/div>\r\n
\nOdgovaraju\u0107a veli\u010dina slika je ona veli\u010dina koliki je prostor na ekranu gde se slika prikazuje. Nemojte prikazivati slike iste veli\u010dine na svim ure\u0111ajima ve\u0107 svakom ure\u0111aju prilagodite sliku ponaosob. Npr. nema potrebe da sliku dimenzija 1000×750 prikazujete na mobilnom ure\u0111aju, ve\u0107 za mobilne ure\u0111aje kreirajte novu sliku dimenzija 425×320.\u00a0 Postoje razli\u010diti programi za resize slika na internetu koje je jednostavno koristiti.\u00a0Dobra praksa je da
\nza svaku sliku na sajtu kreiramo slede\u0107e verzije:
\n1366×820, 1024×615, 768×460, 480×290, 415×250, 375×225, 360×215 i 320×190
\nKori\u0161\u0107enjem <figure>, <picture> i <source> HTML5 elemenata kontroli\u0161ite koja slika \u0107e biti prikazana na ekranu u zavisnosti od veli\u010dine ekrana ure\u0111aja sa kog se pristupa sajtu.
\n<\/div>\r\n <\/div>\n
\r\n
Odlo\u017eite slike van ekrana<\/i><\/i><\/div>\r\n
\nSlike u\u010ditajte sa ka\u0161njenjem ili kada korisnik do\u0111e do njih (lazyload). Dakle, nije potrebno da u\u010ditavate sve slike sa stranice, ve\u0107 da se slike u\u010ditavaju tek kada budu vidljive na ekranu. S\u2019 obzirom da je to kasnije u\u010ditavanje potpuno neprimetno u o\u010dima korisnika, mo\u017ee se upotrebiti \u010dak i ako se slika nalazi na po\u010detku stranice na kojoj se korisnik trenutno nalazi.
\n<\/div>\r\n <\/div>\n
\r\n
Omogu\u0107ite kompresiju teksta<\/i><\/i><\/div>\r\n
\nOmogu\u0107ite kompresiju teksta prilikom dovla\u010denja sa servera uklju\u010divanjem gzip kompresije na serveru. Time \u0107e vreme dovla\u010denja fajlova sa servera biti minimalno.
\n<\/div>\r\n <\/div>\n
\r\n
Po\u010detno vreme odgovora servera<\/i><\/i><\/div>\r\n
\nJa\u010dina servera ovde igra veliku ulogu. Najpose\u0107enije stranice ke\u0161irajte na serveru i samo ih isporu\u010dujte na zahtev bez konekcije sa bazom i bilo kakve obrade. Tako\u0111e, optimizujte upite ka bazi podataka, sve \u0161to mo\u017eete da uradite u SQL uradite u SQL, nemojte dovla\u010diti podatke iz baze pa ih dodatno obra\u0111ivati u nekom od serverskih programskih jezika ve\u0107 sve uradite u SQL upitu.
\n<\/div>\r\n <\/div>\n
\r\n
Izbegavajte vi\u0161estruka preusmeravanja stranice<\/i><\/i><\/div>\r\n
\nUkoliko imate 301 redirekcije na sajtu, izbegnite vi\u0161estruke 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\u010di logi\u010dno, ali dosta sajtova ima ovu manu, a da programeri nisu ni svesni toga.
\n<\/div>\r\n <\/div>\n
\r\n
Koristite video formate za animirani sadr\u017eaj<\/i><\/i><\/div>\r\n
\nIzbegavajte GIF-ove, posebno ukoliko traju dugo. Umesto .gif koristite MPEG4\/WebM video formate. Vodite ra\u010duna o tome da pokrijete sve osobine GIF-ova u svom videu, a to je da video podrazumevano isklju\u010den ton, da se ponavlja i da kre\u0107e automatski.
\n<\/div>\r\n <\/div>\n
\r\n
Uklonite duplirane module iz JavaScript paketa<\/i><\/i><\/div>\r\n
\nNeki js moduli u sebi u\u010ditavaju dodatne js module koji su im neophodni za funkcionisanje. Naj\u010de\u0161\u0107e je to jQuery biblioteka. Zamislite da imate 2 modula, modul A i modul B koje \u017eelite da dodate na sajt i da oba modula funkcioni\u0161u uz pomo\u0107 jQuery (ovo je \u010dest slu\u010daj kada u\u010ditavate neke od gotovih galerija na sajt). Ukoliko samo u\u010ditate oba modula, desi\u0107e se da 2 puta skinete jQuery \u0161to dosta usporava sajt. Potrebno je da na\u0111ete na\u010din da svaki modul koji je neophodan u\u010ditate samo jednom, \u0161to bi u primeru zna\u010dilo da na\u0111ete na\u010dina da jQuery biblioteku u\u010ditate samo jednom pre u\u010ditavanja modula A i B.
\n<\/div>\r\n <\/div>\n
\r\n
Izbegavajte atribut document.write<\/i><\/i><\/div>\r\n
\nNemojte koristiti document.write() jer ima jako lo\u0161e performanse i mo\u017ee zna\u010dajno da uspori u\u010ditavanje stranice. Google Chrome blokira izvr\u0161avanje ove funkcije u ve\u0107ini slu\u010dajeva. Umesto nje, poku\u0161ajte da asinhrono u\u010ditate sadr\u017eaj koji \u017eelite, nakon u\u010ditavanja glavnog sadr\u017eaja.
\n<\/div>\r\n <\/div>\n
\r\n
Smanjite kori\u0161\u0107enje sadr\u017eaja tre\u0107e strane<\/i><\/i><\/div>\r\n
\nGeneralno sam protiv kori\u0161\u0107enja third party biblioteka na sajtovima ali ako ba\u0161 morate onda se potrudite da ih u\u010ditate tako da ne uti\u010du na u\u010ditavanje stranice. U\u010ditajte ih na dnu, zaka\u0161njene u odnosu na u\u010ditavanje stranice.<\/p>\n

Tako\u0111e, jedna od opcija je da koristite i defer i async atribute za u\u010ditavanje js biblioteka. Defer u\u010ditava js fajl paralelno sa u\u010ditavanjem stranice, ali ga izvr\u0161ava nakon \u0161to se u\u010dita kompletna stranica, dok async isto u\u010ditava js fajl paralelno sa u\u010ditavanjem stranice i nakon \u0161to se fajl u\u010dita prekine se u\u010ditavanje stranice dok se fajl ne izvr\u0161i. Bez defer i async, u\u010ditavanje stranice se prekida i tokom dovla\u010denja fajla i tokom izvr\u0161enja.<\/p>\n

Potrudite se da korisnicima pru\u017eite zadovoljavaju\u0107e korisni\u010dko iskustvo dok traje u\u010ditavanje biblioteke u vidu spinera kako stranica ne bi delovala izlomljeno. Jo\u0161 bolja varijanta je da biblioteku u\u010ditate na neku akciju u trenutku kada je ona zaista potrebna, recimo ukoliko imate kalendar na stranici koji zahteva jQuery biblioteku, u\u010ditajte je tek na klik korisnika na kalendar i prika\u017eite spiner dok u\u010ditavanje traje.<\/p>\n

Ovo je jedna od naj\u010de\u0161\u0107ih gre\u0161aka na sajtovima, gde se biblioteke u\u010ditavaju odmah i neretko u head-u \u0161to je najgora mogu\u0107a opcija.<\/div>\r\n <\/div>\n

\r\n
Izbegavajte velike promene rasporeda<\/i><\/i><\/div>\r\n
\nOvo sam ve\u0107 objasnio kada sam pri\u010dao o Cumulative Layout Shift (CLS). Potrudite se da nemate zakasnele promene sadr\u017eaja na stranici. Ukoliko imate sliku koja se u\u010ditava kasnije, ostavite prazan prostor ili prazan HTML element koji \u0107e biti zamenjen slikom, tako da se raspored elemenata ne promeni nakon u\u010ditavanja slike. Korisnike sajta veoma nervira kada im sadr\u017eaj sajta posko\u010di na dole dok ga \u010ditaju, a mo\u017ee se desiti i da gre\u0161kom kliknu na neko dugme koje se pojavi na ekranu gde ga nisu o\u010dekivali u trenutku iterakcije sa sajtom.
\n<\/div>\r\n <\/div>\n
\r\n
Smanjite vreme izvr\u0161avanja JavaScript datoteka<\/i><\/i><\/div>\r\n
\nPod izvr\u0161avanjem se podrazumeva sve, od vremena potrebnog za dovla\u010denje js biblioteka sa servera, preko vremena potrebnog za izvr\u0161avanje koda, do memorije koja je iskori\u0161\u0107ena. Potrebno je da primenite savete koje sam ve\u0107 naveo kako biste smanjili vreme izvr\u0161avanja js datoteka, a to su minifikacija koda, eliminisanje koda koji nije potreban na stranici i ke\u0161iranje js fajlova.
\n<\/div>\r\n <\/div>\n
\r\n
Efikasno kodirajte slike<\/i><\/i><\/div>\r\n
\nAko \u017eelite da imate najbr\u017ei sajt u svojoj ni\u0161i potrebno je da primenite sve savete koje sam naveo, a to su: kompresujte slike, sve .gif zamenite videom, koristite lazyloda za u\u010ditavanje slika, prikazujte responzivne slike sa odgovaraju\u0107im dimenzijama u odnosu na ure\u0111aj na kom se prikazuju i koristite WebP format za slike kad god je podr\u017ean u pretra\u017eiva\u010du.<\/p>\n

Iz iskustva smatram korisnim ako slike \u010duvate na CDN serverima, koji su optimizovani za brzinu isporu\u010divanja slika, a tako\u0111e mogu da isporu\u010duju i slike u najboljem formatu koji podr\u017eava pretra\u017eiva\u010d sa kog se pristupa.
\n<\/div>\r\n <\/div>\n<\/div>\n

Naj\u010de\u0161\u0107a pitanja u razgovoru sa klijentima<\/h2>\n

Koja je cena optimizacije brzine sajta?<\/h3>\n

Cena optimizacije brzine sajta zavisi od veli\u010dine projekta, ciljeva koji se tra\u017ee i vremena realizacije. Vreme potrebno za optimizaciju zavisi od dosta faktora, potrebno je da izanaliziram sajt pa mogu da uradim procenu ukupne cene.<\/p>\n

Da li optimizujete stati\u010dne html, css sajtove?<\/h3>\n

Da, s tim da ukoliko sajt nije slo\u017eene strukture, uvek savetujem izradu novog sajta sa istim dizajnom, nekad je br\u017ee i lak\u0161e napraviti novi sajt nego optimizovati postoje\u0107i.<\/p>\n

Da li optimizujete word press sajtove?<\/h3>\n

WordPress sajtovi sadr\u017ee dosta dodatnih pluginova koji u\u010ditavaju brdo eksternih biblioteka koje dramati\u010dno usporavaju brzinu sajta. Postoje sajtovi koje nije uop\u0161te lako optimizovati, jer se onda funkcionalnost dovodi u pitanje, tako da je \u010desto 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.<\/p>\n

Da li optimizujete brzinu kod internet prodavnica custom tipa?<\/h3>\n

Da, svakako. Napomenuo bih da vlasnici internet prodavnica<\/a> jo\u0161 uvek ne investiraju kako i koliko bi trebalo, tako da u Srbiji \u0161tede\u0107i vreme svojim kupcima mogu da ostvare pristojnu komparativna prednost. O\u010dekujem da od 2021. ova \u010dinjenica po\u010dne da se menja.<\/p>\n

Koju brzinu po Google page speed test alatu mo\u017eete garantovati?<\/h3>\n

Zavisi od trenutnog stanja sajta i tehnologija u kojima je ra\u0111en. Kao profesionalac uglavnom garantujem zelenu zonu (90+)<\/strong>, a za sajtove koje izra\u0111ujem od nule 97+, \u010desto to bude i 100 od 100.<\/p>\n

Koliko treba vremena za maksimizaciju brzine prezentacionog sajta?<\/h3>\n

Do sada sam radio svaki projekat optimizacije u proseku po mesec dana, ali ne uzimam sajtove za koje procenim da nije mogu\u0107e izvr\u0161iti \u017eeljenu optimizaciju i posti\u0107i visoke rezultate. Za precizniju procenu vremena je potrebno da pogledam sajt detaljnije.<\/p>\n

Da li uz optimizaciju brzine sajta mo\u017eete uraditi i tehni\u010dki SEO?<\/h3>\n

Proces pove\u0107anja brzine sajta idealan je trenutak da se isprave i naj\u010de\u0161\u0107e SEO gre\u0161ke i uvedu pobolj\u0161anja kao \u0161to su, pravilno uvo\u0111enje canonical taga, h1-h4 struktura, strategija linkovanja, pravilno setovanje robots direktiva, eliminacija dupliciranih titlova i meta opisa i tako dalje. Potpuno profesionalno, zar ne?<\/p>\n

Ukoliko \u017eelite da pove\u0107ate brzinu va\u0161eg sajta ili postavite dodatno pitanje iskoristite donju formu.\u00a0<\/strong><\/p>\n\n

\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n