Smanjenje TBT vremena na vašoj web-stranici pomoću odložene JavaScript učitavanja (Defer/Async)

Odloženo učitavanje JavaScript-a je metoda kojom se smanjuje Total Blocking Time (TBT) tako što se skripte koje blokiraju renderiranje stranice odgađaju na pravilan način. Ukratko, dodavanjem defer ili async atributa na ne-kritične JavaScript datoteke smanjujemo blokadu glavnog thread-a; korisnik brže vidi sadržaj, ranije može kliknuti, a Core Web Vitals metrike se poboljšavaju. Da biste primijenili odloženo učitavanje JavaScript-a na svojoj stranici, potrebno je prvo identificirati koje skripte su kritične, kod zavisnih scriptova uglavnom koristiti defer, kod nezavisnih third-party skripti async, te nakon izmjena izmjeriti TBT vrijednost pomoću PageSpeed Insights, Lighthouse i Chrome DevTools.

Na modernim web stranicama performanse češće pate zbog nekontrolisanog JavaScript-a nego zbog slika. Na primjer, na webshopu istovremeno se učitavaju filteri proizvoda, live chat, reklamni pixel, analitika, komentari, A/B test alati i tematski skripti, pa browserov glavni thread ostaje dugo zauzet. To je još izraženije na mobitelima. Iako korisnik vidi naslov, klik na meni može ostati bez reakcije – Lighthouse izvještaj tada pokazuje visoki Total Blocking Time.

Ovaj vodič detaljno objašnjava šta rade defer i async atributi, kada ih treba primijeniti, kako ih implementirati na WordPress i custom projektima, na šta obratiti pažnju pri mjerenju i kakve realne TBT dobitke možete očekivati. Preporuke za stranice na Hostragons infrastrukturi prate opće web standarde; takođe ćemo objasniti kako pravi hosting, CDN, SSL i keširanje podržavaju optimizaciju JavaScript-a. Hostragons paketi web hostinga

Šta je TBT i kakva je njegova veza s JavaScript-om?

TBT je skraćenica za Total Blocking Time, i mjeri koliko dugo je glavni thread browsera blokiran prije nego stranica postane interaktivna. U Lighthouse laboratorijskim testovima, broj dugih JavaScript zadataka između First Contentful Paint i Time to Interactive koji premašuju 50 ms povećava TBT. Recimo, ako JavaScript zadatak traje 180 ms, njegov doprinos TBT-u je 130 ms (180 - 50).

Ova metrika je presudna za korisničko iskustvo. Kada posjetilac otvori stranicu pa klikne na meni, dodaj u korpu ili tražilicu, a browser još uvijek izvršava JavaScript, interakcija kasni. To korisnik doživljava kao zamrzavanje, spor odziv ili neispravnu stranicu. U SEO standardima za 2026, Google neće rangirati samo po jednom score-u, ali brze i stabilne stranice imaju prednost u zadovoljstvu i konverzijama.

Tipični simptomi visokog TBT-a

• Mobilni PageSpeed Insights izvještaj pokazuje TBT iznad 300 ms.
• Lighthouse prikazuje upozorenja kao Reduce JavaScript execution time ili Minimize main-thread work.
• Iako je stranica vidljiva, meni, slider, filter ili forma kasno reaguje.
• Third-party reklame, chat ili analitika skripte su označene kao "teške" u izvještaju.
• Pogotovo na slabijim Android uređajima dolazi do kašnjenja pri skrolanju i klikovima.

Kao opći cilj, TBT ispod 200 ms smatra se dobrim za većinu sadržajnih stranica. Za kompleksne e-commerce ili SaaS aplikacije, samo defer i async često nisu dovoljni – potrebno je i code splitting, uklanjanje suvišnih paketa, keširanje, optimizacija servera i kritičnog CSS-a. Ipak, odloženo učitavanje JavaScript-a je najbrža i najlakša optimizacija s vidljivim rezultatima.

Šta su Defer i Async?

Kada se standardno koristi script tag u HTML-u, browser zaustavlja parsiranje HTML-a, preuzima JavaScript, izvršava ga i tek onda nastavlja sa renderiranjem stranice. To je ponekad potrebno za kritične skripte, ali za većinu datoteka izaziva nepotrebno čekanje. defer i async atributi mijenjaju ovo ponašanje, dozvoljavajući različite strategije učitavanja i izvršavanja.

Kako radi defer?

Skripta s defer atributom se preuzima u pozadini dok se HTML parsira; ali se izvršava tek kad je HTML dokument u potpunosti parsiran. Defer skripte se izvršavaju redom kako su označene u HTML-u, što ih čini sigurnim za zavisne JavaScript datoteke. Na primjer, prvo biblioteka, zatim tematski skript koji zavisi od nje – defer je idealan.

Primjer korištenja: <script defer src=/js/app.js></script>. Ovdje se app.js preuzima bez blokiranja početnog rendera, i izvršava čim je DOM spreman. Svi moderni browseri podržavaju defer i to je pouzdana opcija za standardne skripte.

Kako radi async?

Async skripte se takođe preuzimaju dok HTML parsira, ali se izvršavaju čim preuzimanje završi – može za kratko zaustaviti HTML parsiranje. Async ne garantuje redoslijed: prvo preuzeta skripta se prva izvršava. To je najbolje za nezavisne analitičke, reklamne, pixel, widget ili social media skripte.

Primjer: <script async src=/js/analytics.js></script>. Ova skripta ne smije zavisiti od drugih lokalnih skripti ili biblioteka. Ako analytics.js treba jQuery ili promjenjivu definisanu kasnije, async može izazvati grešku. Zato async daje brzinu, ali traži pažljivu klasifikaciju.

Defer vs. Async: Tabela poređenja

Praktično pravilo: Ako skripta mora biti izvršena po redoslijedu, koristite defer. Ako je potpuno nezavisna, async. Niste sigurni? Prvo testirajte defer na stagingu, pratite konzolne greške i provjerite interakcije. Vodič za staging okruženje i backup

Plan implementacije za odloženo JavaScript učitavanje

Dodavanje defer ili async na svaki script tag može privremeno popraviti score, ali može pokvariti plaćanje, pretragu, meni, validaciju formi ili korpu. Pravi pristup je: mjerenje, klasifikacija, male promjene, testiranje i monitoring.

1. Izmjerite postojeće performanse

Prvo postavite baznu liniju. Zabilježite PageSpeed Insights score za mobilne i desktop, te Lighthouse metrike TBT, First Contentful Paint, Largest Contentful Paint i Speed Index. U Chrome DevTools Performance pratite main thread – dugi žuti blokovi označavaju JavaScript troškove.

Primjer tablice: mobilni TBT 780 ms, JavaScript execution time 2,8 sekundi, main-thread work 4,5 sekundi. Ako nakon optimizacije TBT padne na 280 ms, to je oko 64% poboljšanja. Takvi konkretni podaci olakšavaju timski rad.

2. Napravite inventar skripti

Pogledajte source stranice ili Network u DevTools, popišite sve JavaScript datoteke. Provjerite izvor, veličinu, potrebu i zavisnosti. Grupirajte skripte ovako:

• Kritične skripte: odmah potrebne za prvi prikaz i navigaciju.
• Zavisni lokalni skripti: tema, slideri, galerija, aplikacijski moduli.
• Nezavisni third-party skripti: analitika, reklame, pixel, chat i social media.
• Suvišni ili zastarjeli skripti: ostaci od neaktivnih plugina.
• Skripte za uvjetno učitavanje: npr. validacija forme samo na kontakt stranici.

Najbolji rezultat nekad nije defer, već potpuno uklanjanje nepotrebne skripte. 90 KB kompresovane skripte može na mobitelu dodati 300 ms samo za parsiranje i izvršavanje, pa je prvo čišćenje suvišnog, zatim odlaganje, optimalan pristup.

3. Odredite koje skripte treba defer

Tipično, tematske skripte, kod za meni, slideri, galerije i glavni bundle su dobri kandidati za defer. Bitno je da skripta ne koristi blokirajuće metode kao document.write, i da može čekati DOM ready. Na WordPress temama, jquery-migrate, tematski skript i plugin skripte često su zavisne – async na jQuery je rizično, jer mnogi plugin-i očekuju određeni redoslijed. Bolje je defer na jQuery zavisne skripte ili koristiti plugin-level optimizaciju. Vodič za optimizaciju brzine WordPress-a

4. Odaberite skripte za async

Google Analytics, reklamne tagove, Facebook Pixel, LinkedIn Insight Tag, chat widgeti i social share skripte su kandidati za async. Svaka third-party skripta nije ista: neki chat alati žele user session odmah, reklame čekaju određene containere. Provjerite dokumentaciju.

Analitička skripta async obično ne šteti korisničkom iskustvu. Ipak, radi sigurnosti provjerite trigger-e u real time izvještajima. Ako koristite tag manager, ne gomilajte sve tagove u jednu kutiju – podešavajte uvjete. Npr. skripta za komentare samo na stranicama sa formom, skripta za praćenje proizvoda samo na proizvodima.

5. Dodajte uvjetno i event-based učitavanje

Defer i async su odličan start, ali napredna strategija je učitavanje skripti na osnovu korisničkog ponašanja. Live chat ne mora odmah, može nakon 5 sekundi ili na klik. Map script samo kad korisnik scrolla na kontakt sekciju. Video player skripta tek na play klik.

Ovo je osobito efikasno na content i poslovnim stranicama, jer korisnik ne treba svaki widget na svakoj stranici. Uklanjanje 200 KB JavaScript-a iz prvog učitavanja može smanjiti TBT na slabim mobitelima za stotine milisekundi.

6. Testirajte i uvodite postepeno

Ne uvodite promjene direktno na live – testirajte na stagingu. Provjerite homepage, kategorije, proizvode, kontakt, login i checkout. U konzoli tražite greške: Cannot read property, is not defined, undefined function – to su znaci problema s redoslijedom ili zavisnostima.

Live uvodite promjene postepeno: prvo optimizujte third-party skripte, zatim tematske. Svaki put obavite Lighthouse test na istoj mreži i uređaju. Ne vjerujte jednom testu – uzmite prosjek od tri.

WordPress: Specifičnosti defer i async primjene

Na WordPressu se JavaScript učitava preko wp_enqueue_script funkcije. U novim verzijama WordPressa (2026) strategije učitavanja su preciznije, ali stari theme-ovi, page builder-i i neskladni plugin-i mogu praviti probleme.

Ako koristite performance plugin, nemojte odjednom odložiti sve skripte – napravite exclude listu. Checkout, login, admin bar, sigurnosni i captcha skripti su osjetljivi. Na WooCommerce stranicama testirajte korpu, gateway skripte i varijacijske selektore. Rješenja za WooCommerce hosting

Praktični redoslijed za WordPress: prvo uklonite nepotrebne plugin-e. Zatim uvjetno učitavajte skripte koje trebaju samo na određenim stranicama. Potom defer na tematske i plugin skripte. Na kraju async ili odloženo učitavanje za nezavisne third-party kodove. Tako ćete izbjeći velike greške odjednom.

Custom i framework projekti: Šta paziti?

Na modernim framework-ima kao React, Vue, Angular, Next.js, Nuxt, optimizacija JavaScript-a nije samo defer u HTML-u. Veličina bundle-a, code splitting, tree shaking, dynamic import i hydration značajno utiču na TBT. Ako je bundle 700 KB, defer neće spriječiti blokadu pri izvršavanju.

Koristite route-based code splitting: dok je korisnik na homepage-u, nemojte učitavati admin panel, grafičke ili editor skripte. Teške komponente učitavajte dinamički. Uklonite nepotrebne zavisnosti alatima za analizu paketa. Zamijenite teške biblioteke za datum, grafiku ili animaciju lakšim alternativama.

Na projektima sa server-side renderingom ili statičkom izradom, pazite na hydration – ako odjednom aktivirate stotine komponenti, TBT raste. Izbjegavajte JavaScript gdje nije potreban, pogotovo na neinteraktivnim sadržajima – to je osnovni princip performansi za 2026.

Hosting, server response time i JavaScript performanse

TBT direktno zavisi od JavaScript-a u browseru, ali hosting utječe indirektno. Sporo TTFB, bez kompresije, bez HTTP/2 ili HTTP/3, slab cache i udaljeni server produžuju vrijeme učitavanja JavaScript-a. To produžuje lifecycle stranice i pogoršava UX.

Kvalitetan hosting omogućuje optimizaciju uz Brotli ili Gzip kompresiju, efektivan browser cache, aktuelni PHP, brze diskove, CDN integraciju. SSL pravilno instaliran je bitan za browser features, HTTP/2 i sigurne third-party integracije. Hostragons SSL certifikati Hostragons pretraga domene

Recimo, ista JavaScript datoteka bez kompresije je 320 KB, a s Brotli 95 KB. To direktno ne smanjuje TBT (koji mjeri runtime), ali ubrzava download, olakšava prioritizaciju resursa i poboljšava ukupni loading. Defer, async, cache i hosting treba razmatrati zajedno.

Lista za mjerenje i verifikaciju

• Jeste li uporedili mobilni TBT prije i poslije optimizacije?
• Jesu li najskuplje JavaScript datoteke smanjile execution time?
• Je li broj dugih taskova u DevTools Performance pao?
• Ima li JavaScript grešaka u konzoli?
• Da li meni, search, filter, forma, korpa i checkout rade bez problema?
• Da li third-party analitika i reklame ispravno triggeruju?
• Da li realni korisnički podaci (INP, delay) pokazuju poboljšanje?
• Jeste li testirali promjene nakon čišćenja cache-a?

Bitno je razlikovati laboratorijske i field podatke. TBT je laboratorijski metric iz Lighthouse-a, dok Interaction to Next Paint (INP) sve više pokazuje realno iskustvo. Smanjen TBT često pomaže i INP-u, jer manje blokiran main thread.

Najčešće greške i kako ih izbjeći

Svi skripti async odjednom

Ovo je česta greška. Async ne garantuje redoslijed – zavisne skripte mogu random praviti greške. Stranica može raditi na brzom internetu, ali se raspasti na sporom ili drugom browseru. Defer je sigurniji za zavisne datoteke.

Nepravilno odlaganje jQuery-a i plugin-a

Na WordPressu mnogi plugin-i zavise od jQuery redoslijeda. Async na jQuery može dovesti do toga da plugin kod radi prije nego što je jQuery učitan. Rješenje je pregledati zavisnosti i kritične datoteke staviti na exclude listu.

Neoptimizirani third-party skripti

Vlasnici često optimizuju svoje tematske skripte, ali zaborave na reklame, chat i analitiku. Najteže taskove u Lighthouse-u često generišu third-party izvori. Uklonite nepotrebne tagove, triggerujte uvjetno i odložite za korisničku interakciju.

Instalacija plugina bez mjerenja

Performance plugin-i mogu biti korisni, ali svaki dodatni alat donosi novi JavaScript i CSS. Prvo identificirajte problem, zatim birajte alat. Provjerite da li plugin stvarno smanjuje TBT kroz izvještaje.

Ignoriranje konflikta keširanja i minifikacije

Kada kombinujete minifikaciju, spajanje, defer i async, redoslijed datoteka može se poremetiti. To može uzrokovati nepredviđene greške u produkciji. Ako koristite CDN, server cache i aplikacijski cache, obavezno očistite sve slojeve nakon izmjena.

Primjer realne optimizacije

Zamislite korporativnu stranicu sa 18 JavaScript zahtjeva na homepage-u: 5 za temu i meni, 4 za slider i animacije, 3 za formu i mapu, 6 za analitiku, pixel i chat. Početni Lighthouse mobilni TBT je 920 ms.

Prvi korak: uklonjeni su dva nepotrebna animacijska plugina, smanjeno 140 KB JavaScript. TBT pada na 760 ms. Drugi korak: tematski i slider skripti su deferirani, testiran redoslijed. TBT je 480 ms. Treći: map script učitava se samo na scroll do kontakta, chat nakon 7 sekundi, analitika i pixel async. Finalni TBT je 210 ms.

Ovaj primjer pokazuje da nema magične postavke – slojeviti pristup daje najbolje rezultate. Defer i async su moćni alati, ali pravi rezultat dolazi uz čišćenje koda, uvjetno učitavanje, keširanje i kvalitetnu infrastrukturu.

Zaključak: Uravnotežena i testirana JavaScript strategija za niži TBT

Odloženo učitavanje JavaScript-a je najpraktičniji i najefikasniji način za smanjenje TBT vremena. Defer je siguran za skripte koje mogu čekati DOM i zahtijevaju redoslijed; async je idealan za nezavisne third-party skripte. Za uspješnu optimizaciju – prvo mjerite, klasificirajte skripte, uklonite suvišne, testirajte promjene postepeno, pratite korisničko iskustvo.

Na Hostragons infrastrukturi dobijate brzu, sigurnu i skalabilnu platformu; uz optimizaciju JavaScript-a, keširanje i SSL možete ostvariti stabilne performanse. Za poboljšanje TBT-a prvo napravite izvještaj, pa korak po korak testirajte promjene. Za pravi hosting i performanse, pogledajte Hostragons rješenja. Hostragons paketi web hostinga

Često postavljena pitanja

Može li se defer i async koristiti zajedno?

Ako se defer i async stave na isti script tag, moderni browseri će dati prednost async, što poništava redoslijed. Zato se ne preporučuje kombinacija na istoj skripti. Za zavisne datoteke koristite defer, za nezavisne async.

Da li odloženo učitavanje JavaScript-a direktno poboljšava SEO?

Ne garantuje direktno bolji rang, ali poboljšava user experience, brzinu interakcije i Core Web Vitals, što pomaže SEO uspjehu. Brži odgovor stranice podiže zadovoljstvo, konverzije i percepciju kvalitete.

Je li sigurno staviti defer na sve JavaScript skripte?

Ne. Neke skripte moraju raditi odmah ili ovise o redoslijedu. Zato uvijek provjerite svrhu, zavisnosti i vrijeme izvršavanja – testirajte na stagingu prije promjena.

Može li samo defer i async smanjiti TBT?

Na malim i srednjim stranicama često daju veliki napredak, ali za teške framework-e, mnogo third-party koda i velike bundle-ove treba koristiti i code splitting, uklanjanje suvišnog JavaScript-a, uvjetno učitavanje, keširanje i dobar hosting.

Koje WordPress skripte ne smijem async-irati?

Skripte zavisne od jQuery-a, checkout, korpa, validacija formi, sigurnosna provjera i kritične tematske funkcije ne smiju biti async bez testiranja. Ako se redoslijed poremeti, korisničke funkcije mogu prestati raditi. Prvo defer, ili izuzmete kritične skripte.