Как да смањите TBT време на сајту кроз одложено учитавање JavaScript (Defer/Async)

Одложено учитавање JavaScript-а је техника којом се смањује Total Blocking Time (TBT) – укупно време блокаде главне нити у прегледачу – тако што се некритични JS фајлови одложе или асинхроно учитавају. Када на сајту примените defer или async на скрипте које нису кључне, главна нит остаје мање закључана; корисник брже види садржај, може раније да кликне, а Core Web Vitals метрике се побољшавају. Пре него што кренете са одложеним учитавањем, потребно је да идентификујете критичне и некритичне фајлове, на зависне скрипте углавном ставите defer, на независне треће стране async, а ефекат измерите преко PageSpeed Insights, Lighthouse и Chrome DevTools – посебно вредност TBT.

На савременим веб сајтовима, највећи проблем са перформансама долази од неконтролисане употребе JavaScript-а, не од слика. На пример, ако ваш е-трговински сајт истовремено учитава филтере производа, чат уживо, рекламне пикселе, аналитичке кодове, коментаре, A/B тестове и теме, главна нит прегледача може бити блокирана дуго. Ово се нарочито види на мобилним уређајима: корисник види наслов, али не може да отвори мени; Lighthouse показује висок TBT.

У овом водичу ћете сазнати шта defer и async раде, како их користити, како применити технику у WordPress-у и у сопственим пројектима, како мерити резултате и шта су реална побољшања TBT-а. Препоруке за сајтове на Hostragons инфраструктури су у складу са општим веб стандардима, а осврнућемо се и на то како прави хостинг, CDN, SSL и кеширање подржавају JS оптимизацију. Hostragons веб хостинг пакети

Шта је TBT и зашто је директно везан за JavaScript?

TBT је скраћеница за Total Blocking Time – укупно време блокаде главне нити, која одређује колико је страница спремна за интеракцију. У Lighthouse лабораторијским тестовима, TBT расте због дугих задатака (>50ms) између First Contentful Paint и Time to Interactive. На пример, ако JS задатак траје 180ms, првих 50ms не рачунају се као блокада, али преосталих 130ms доприносе TBT-у.

Ова метрика је кључна за UX: корисник кликне на мени, дода у корпу или тражи нешто, а прегледач и даље извршава JS – интеракција касни. Корисник ово доживљава као замрзавање или “оштећен” сајт. Google не своди SEO само на TBT, али стабилне и брзе интеракције доносе боље резултате у рангирању.

Типични знаци високог TBT-а

• У мобилном PageSpeed Insights-у TBT је преко 300ms.
• U Lighthouse-у се појављују упозорења Reduce JavaScript execution time или Minimize main-thread work.
• Страница је видљива, али мени, слајдер, филтер или форма реагују са закашњењем.
• Трећи JS фајлови (реклама, чат, аналитика) су у извештају најскупљи.
• На почетничким Android уређајима примећују се кашњења у скроловању и кликању.

Добар циљ је да TBT буде испод 200ms за већину сајтова. За комплексне e-commerce/SaaS интерфејсе, само defer/async није довољно – потребно је и раздвајање кода, уклањање непотребних пакета, кеширање, бржи сервер, критични CSS. Али одложено JS учитавање је брза и ефикасна почетна оптимизација.

Шта су Defer и Async?

Када script таг у HTML-у нема атрибуте, прегледач прекида парсирање HTML-а, преузима JS, извршава га, па наставља са страницом. Ово је потребно само за критичне скрипте. defer и async мењају овај процес.

Како ради defer?

Скрипта са defer се преузима у позадини док HTML парсирање траје, али се извршава тек када је цео документ парсиран. Више defer скрипти се извршава редом како су написане. Због тога је defer сигуран избор за зависне JS фајлове – на пример, библиотека па тема.

Пример: <script defer src="/js/app.js"></script>. app.js се преузима без блокаде, извршава када DOM буде спреман. Defer је добро подржан у модерним прегледачима – оптимизација без ризика.

Како ради async?

Скрипта са async се такође преузима док HTML парсирање траје, али се извршава чим се преузимање заврши – HTML парсирање може накратко стати. Async не гарантује редослед: скрипта која прва стигне, прва се извршава. Ово је идеално за независне скрипте као аналитика, реклама, пиксел, спољни виджет.

Пример: <script async src="/js/analytics.js"></script>. Ако analytics.js зависи од неког другог кода (нпр. jQuery), async може изазвати грешке. Зато async захтева пажљиву класификацију.

Табела поређења Defer и Async

Практично правило: ако морају редом, почните са defer. Ако су скрипте потпуно независне, async је опција. Употребите staging и тестирајте конзолу и интеракције пре продукције. Водич за Staging окружје и прављење резервних копија

Како корак по корак применити одложено JS учитавање

Додавање defer или async свим скриптама привремено може побољшати резултате, али производни сајт може имати проблеме са плаћањем, претрагом, менијем, формом или корпом. Потребан је циклус: мерење, класификација, мала измена, тест, праћење.

1. Измерите тренутну перформансу

Прво направите базу. Забележите мобилне и десктоп резултате у PageSpeed Insights. У Lighthouse извештају запишите TBT, First Contentful Paint, Largest Contentful Paint и Speed Index. У Chrome DevTools Performance секцији анализирајте главну нит – дуге жуте блокове (обично JS).

Пример табеле: мобилни TBT 780ms, JS execution time 2,8s, main-thread work 4,5s. Ако после оптимизације мобилни TBT падне на 280ms, побољшање је око 64%. Оваква документација помаже тиму да види шта је стварно ефикасно.

2. Направите JS инвентар

У изворном коду или у Network секцији листајте све JS фајлове – извор, величина, када се користи, зависности. Поделите у групе:

• Критични JS: одмах потребан за приказ или навигацију.
• Зависни локални JS: тема, слајдери, галерије, bundle-ови.
• Независни JS трећих страна: аналитика, реклама, пиксел, чат, друштвене мреже.
• Непотребан/стар JS: остаци од неактивних плагина.
• JS који треба условно учитати: нпр. само на страници контакта – валидација форме.

Најбоља оптимизација често није defer/async, већ уклањање непотребних скрипти. Један 90KB компресован JS на мобилном уређају може додати преко 300ms. Прво очистите, тек онда одлажите.

3. Изаберите JS који ће добити defer

Тема, мени, слајдер, галерија и bundle фајлови су обично добри кандидати за defer. Важно је да скрипта није зависна од document.write или других блокирајућих метода и да је у реду да се изврши кад је DOM спреман.

У WordPress теми, jquery-migrate, главни JS теме и плагини могу имати сложене зависности. jQuery ставити на async је ризично – већина плагина чека jQuery. Боље је defer на зависне фајлове или користити оптимизоване методе у плагинима. Водич за оптимизацију брзине WordPress-a

4. Изаберите JS за async

Google Analytics, рекламни тагови, Facebook Pixel, LinkedIn Insight Tag, неки чат виджети и друштвени JS – све су кандидати за async. Али сваки трећи JS није исти – неки чатови желе да учитају сесију одмах, рекламе чекају контејнер. Проверите документацију.

Независни аналитички код може ићи на async без штете. Ради мање губитака података, проверите trigger услове у етикет менаџеру – немојте убацити све у један container, већ раздвојите услове. Нпр. JS за праћење коментара само на страницама са формом, JS за производе само на листама производа.

5. Додајте условно и event-based учитавање

Defer и async су основа, али напредније је JS учитати на основу корисничке акције. Чат може бити учитан тек кад корисник остане 5 секунди или кликне помоћ. Мапа може бити учитана тек кад корисник скролује до контакта. Видео плејер тек када кликне play.

Овај приступ је ефикасан на корпоративним и садржајним сајтовима – кориснику не треба сваки виджет на свакој страници. Скидање 200KB из првог учитавања на мобилном уређају смањује TBT за стотине милисекунди.

6. Тестирајте и уводите промене постепено

Не стављајте промене одмах на живи сајт – пробајте у тест окружењу. Тестирајте ручно главну страницу, категорије, производе/услуге, контакт, логин, плаћање. Проверите конзолу за грешке (Cannot read property, is not defined, undefined function – то упућује на проблем са редоследом или зависношћу).

Уводите промене у групама: прво независни JS трећих страна, онда теме. После сваке измене поновите Lighthouse тест на истој мрежи и уређају. Не верујте једном тесту – узмите просек од 3 мерења.

WordPress – напомене за defer и async

У WordPress-у JS фајлови се учитавају преко wp_enqueue_script. Модерне верзије (2026+) омогућавају бољу контролу. Стари теме, page builder-и и лоши оптимизациони плагини могу правити проблеме.

Користите листу изузетака уместо “једним кликом” defer за све. Платне странице, логин, админ бар, безбедносне скрипте, captcha – све треба тестирати. На WooCommerce сајту обавезно тестирајте скрипте за корпу, плаћање, варијације. решења за WooCommerce хостинг

Практичан редослед за WordPress: прво уклоните непотребне плагине. Онда JS плагина учитавајте само на релевантним страницама. Дефер код теме и плагина. На крају async и одложено учитавање трећих страна. Овај процес смањује ризик од “потпуног слома”.

Сопствени пројекти и JS framework-и – на шта пазити?

На React, Vue, Angular, Next.js, Nuxt и сличним структурама, defer није довољан: bundle величина, code splitting, tree shaking, dynamic import и hydration такође утичу на TBT. Један велики bundle од 700KB, чак и са defer, може блокирати главну нит приликом извршавања.

Користите code splitting по рутама – не вучите admin panel, графиконе или едиторе на главну страницу. Dynamic import за тешке компоненте само кад су потребне. Анализирајте пакете – уклоните непотребне зависности. Велике библиотеке за датуме, анимације, графиконе замените лакшим.

На SSR или static site генераторима, HTML може стићи брзо, али hydration стотина компоненти истовремено може подићи TBT. Избегавајте непотребан client-side JS за садржај који није интерактиван – то је суштина савремене перформанс стратегије.

Однос хостинга, серверског времена и JS перформанси

TBT зависи од извршавања JS у прегледачу, али хостинг утиче индиректно. Спора TTFB, недостајућа компресија, нема HTTP/2 или HTTP/3, преслаб кеш, географска удаљеност – све то успорава долазак JS фајлова. Када фајлови стигну касно, циклус учитавања се продужава, UX слаби.

Квалитетан хостинг (Brotli/Gzip компресија, добар кеш, PHP 8+, брзи дискови, CDN) подржава JS оптимизацију. SSL исправно подешен је битан за HTTP/2 и безбедне интеграције трећих страна. Hostragons SSL сертификати Hostragons упит за домен

Пример: исти JS фајл без компресије је 320KB, са Brotli-ем 95KB. То не смањује TBT директно (TBT мери време извршавања), али скраћује преузимање, олакшава приоритет ресурса и побољшава укупно учитавање. Дефер, асинхроно учитавање, кеш и добар хостинг – све треба ускладити.

Контролна листа за мерење и валидацију

• Да ли сте упоредили мобилни TBT пре и после оптимизације?
• Да ли су најскупљи JS фајлови мање присутни у execution time извештају?
• Да ли је број дугих задатака у Chrome DevTools смањен?
• Да ли има JS грешака у конзоли?
• Да ли мени, претрага, филтер, форма, корпа, плаћање раде без проблема?
• Да ли се анализе и рекламе правилно тригерирају?
• Да ли се у стварним корисничким подацима побољшава INP и интеракциона кашњења?
• Да ли сте тестирали после чишћења кеша?

Важна напомена: лабораторијски и стварни подаци нису исти. TBT је лабораторијска метрика (Lighthouse), али Interaction to Next Paint (INP) постаје важнији за праве кориснике. Смањење TBT-а обично побољшава и INP, јер мање блокира главну нит.

Честе грешке и како их избегнути

Сви JS фајлови на async – опасност!

Најчешћа грешка. Async не гарантује редослед, па зависне скрипте могу правити хаос. Оно што ради на једној страници, може се покварити на спорој мрежи или другом прегледачу. Дефер је сигурнији за зависне JS.

jQuery и плагини – погрешно одлагање

У WordPress-у, већина плагина зависи од jQuery. Ако jQuery ставите на async, плагини могу покушати да раде пре него што jQuery стигне. Решите тако што мапирате зависности и критичне фајлове ставите на листу изузетака.

Трећи JS фајлови – неконтролисана учитавања

Власници сајта оптимизују тему, али заборављају рекламе, чат, аналитику. Највеће блокаде долазе од тога. Уклоните непотребне етикете, условно тригерирајте, или одложите учитавање до интеракције.

Плагини без мерења – потенцијална грешка

Оптимизациони плагини могу помоћи, али сваки нови плагин додаје JS и CSS. Прво анализирајте проблем, тек онда изаберите алат. Потврдите да стварно смањује TBT – извештајем.

Кеш и минификација – конфликти

Ако радите минификацију, спајање, defer и async – редослед може бити нарушен. На продукцији се због тога могу појавити неочекиване грешке. Посебно ако користите CDN, серверски и апликативни кеш – очистите све слојеве после измене.

Реалан пример оптимизације

На корпоративном сајту средње величине, главна страница има 18 JS фајлова: 5 тема/мени, 4 слајдер/анимација, 3 форма/мапа, 6 аналитика/пиксел/чат. Почетни Lighthouse мобилни TBT: 920ms.

Први корак: уклањају се два непотребна анимациона плагина – 140KB мање JS. TBT пада на 760ms. Други корак: defer на тему и слајдере – тест редоследа. TBT је 480ms. Трећи корак: мапа се учитава само кад скролујете до контакта, чат се одлаже 7 секунди, аналитика и пиксел се стављају на async. TBT пада на 210ms.

Овај сценарио показује да нема “магије” – слојевит приступ је најбољи. Defer и async су моћни алати, али најбољи резултат је уз уклањање непотребног кода, условно учитавање, добар кеш и инфраструктуру.

Закључак: Балансирана и тестирана JS стратегија за низак TBT

Одложено учитавање JS-а је један од најпрактичнијих начина за смањење TBT-а. defer је сигуран за зависне и DOM-после скрипте, async је идеалан за независни код трећих страна. Успешна оптимизација подразумева мерење, класификацију, уклањање непотребних фајлова, постепено тестирање и праћење стварног UX-а.

Hostragons инфраструктура обезбеђује брз, сигуран и скалабилан сајт – уз JS оптимизацију, кеш и SSL добијате стабилну перформансу. Ако желите да побољшате TBT, прво направите извештај, па корак по корак радите измене. За најбољи хостинг и перформансу – погледајте Hostragons понуду. Hostragons веб хостинг пакети

Често постављана питања

Може ли defer и async истовремено?

Ако се defer и async ставе на исту скрипту, modern прегледачи дају предност async, редослед се губи. Зато није препоручено – користите defer за зависне, async за независне JS.

Да ли одложено JS учитавање директно побољшава SEO?

Само по себи не гарантује боље рангирање, али побољшава UX, брзину интеракције и Core Web Vitals – што помаже SEO успеху. Брже странице значе боље корисничко искуство, више конверзија и бољу перцепцију квалитета.

Да ли је сигурно ставити defer на сваки JS фајл?

Не. Неке скрипте морају да се изврше одмах или у одређеном редоследу. Проверите сваку скрипту: циљ, зависности, време извршавања – тестирајте у staging окружењу.

Да ли је само defer/async довољно за TBT?

На малим и средњим сајтовима – да, велико побољшање. Али на комплексним framework-има, са много трећих JS и великим bundle-овима – треба додатне мере: code splitting, уклањање непотребног JS, условно учитавање, кеш, снажан хостинг.

Које WordPress JS фајлове не треба ставити на async?

Фајлови зависни од jQuery, плаћање, корпа, валидација форме, безбедност и критичне функције теме – не стављајте на async. Ако се редослед поремети, корисничке акције могу отказати. Прво пробајте defer, ако није могуће – изузмите те фајлове.