Jak snížit dobu blokace stránky (TBT) pomocí odloženého načítání JavaScriptu (defer/async)

Odložené načítání JavaScriptu je technika, která umožňuje snížit dobu blokace hlavního vlákna prohlížeče (Total Blocking Time, zkráceně TBT) tím, že se neklíčové skripty načítají a spouští v optimálním pořadí. Jednoduše řečeno, přidáním atributů defer nebo async ke skriptům zajistíte, že hlavní vlákno nebude zbytečně blokované, takže uživatel uvidí obsah stránky rychleji, může s ní dříve interagovat a zároveň se zlepší metriky Core Web Vitals. Pro zavedení odloženého načítání na vašem webu je potřeba nejdříve identifikovat kritické skripty, použít defer u závislých skriptů a async u nezávislých třetích stran a následně vyhodnotit změny pomocí nástrojů jako PageSpeed Insights, Lighthouse nebo Chrome DevTools.

Ve většině moderních webů nejsou hlavní výkonnostní problémy způsobeny obrázky, ale právě nekontrolovaným načítáním JavaScriptu. Například na e-shopu, kde se najednou načítají filtry produktů, live chat, reklamní pixely, analytické skripty, recenzní pluginy, A/B testovací nástroje a skripty tématu, může být hlavní vlákno prohlížeče po dlouhou dobu zahlcené. Tento problém je zvlášť patrný na mobilních zařízeních. Uživatel může vidět nadpis stránky, ale když se pokusí kliknout na menu, nereaguje to – a v reportech Lighthouse pak uvidíte vysoké hodnoty TBT.

V tomto návodu si krok za krokem vysvětlíme, co přesně atributy defer a async dělají, kdy který použít, jak je zavést ve WordPressu i v projektech na míru, na co si dát pozor při měření a jaké reálné zlepšení můžete očekávat. Doporučení jsou univerzální a platí pro weby hostované na infrastruktuře Hostragons; zároveň se podíváme i na to, jak správný hosting, CDN, SSL a cache nastavení pomáhají optimalizovat JavaScript. Hostragons webhostingové balíčky

Co je TBT a proč je úzce spjatý s JavaScriptem?

TBT (Total Blocking Time) je metrika, která měří dobu, kdy je hlavní vlákno prohlížeče blokované tak, že uživatel nemůže s webem interagovat. V laboratorních testech Lighthouse se TBT počítá jako součet všech úloh delších než 50 ms mezi zobrazením prvního obsahu (First Contentful Paint) a okamžikem, kdy je stránka plně interaktivní (Time to Interactive). Například pokud JavaScriptová úloha trvá 180 ms, přičítá se k TBT jen doba přesahující 50 ms, tedy 130 ms.

Tato metrika je klíčová pro uživatelský zážitek – když uživatel klikne na menu, přidá produkt do košíku nebo začne vyplňovat formulář, ale prohlížeč stále zpracovává JavaScript, reakce stránky se zpožďuje. Uživatel to vnímá jako zasekávání nebo pomalé načítání. Google v SEO doporučeních pro rok 2026 sice nerozlišuje stránky pouze podle jediné metriky, ale rychlý a plynulý uživatelský zážitek je stále zásadní pro dobrou pozici ve vyhledávání i vyšší konverze.

Typické známky vysokého TBT

• Hodnota TBT vyšší než 300 ms v mobilním reportu PageSpeed Insights.
• Varování v Lighthouse typu „Reduce JavaScript execution time“ nebo „Minimize main-thread work“.
• Menu, posuvníky, filtry nebo formuláře reagují pomalu, i když je stránka již vizuálně zobrazena.
• Vysoké náklady spojené se skripty třetích stran jako reklamy, live chat nebo analytika.
• Na levnějších Android zařízeních se projevují zpoždění při scrollování a klikání.

Jako dobrý cíl se pro většinu obsahových webů považuje udržet TBT pod 200 ms. U složitějších e-shopů nebo SaaS aplikací však nestačí pouze defer a async – je třeba také rozdělovat kód, odstraňovat nepotřebné balíčky, vylepšovat cache a optimalizovat kritický CSS. Přesto je odložené načítání JavaScriptu často prvním krokem, který přináší rychlé výsledky.

Co jsou defer a async?

Když vložíte do HTML klasický tag <script> bez atributů, prohlížeč zastaví parsování HTML, stáhne skript, spustí ho a až pak pokračuje ve vykreslování stránky. To je někdy nezbytné u kritických skriptů, ale často způsobuje zbytečné zdržení. Atributy defer a async mění toto chování tak, aby se skripty načítaly a spouštěly jiným způsobem.

Jak funguje defer?

Skript s atributem defer se stáhne na pozadí během parsování HTML, ale spustí se až po dokončení parsování celého dokumentu. Pokud je jich víc, zachovává se pořadí podle umístění v HTML. Díky tomu je defer ideální pro skripty, které na sobě závisí – například knihovna a poté skript s funkcemi tématu.

Příklad použití: <script defer src="/js/app.js"></script>. Skript app.js se stáhne bez blokování vykreslování a spustí se, jakmile je DOM připravený. Moderní prohlížeče defer plně podporují a jde o spolehlivý způsob optimalizace tradičních skriptů.

Jak funguje async?

Skript s atributem async se také stáhne paralelně během parsování HTML, ale spustí se okamžitě po dokončení stahování, i když parsování ještě není hotové. To může krátce pozastavit parsování. Pořadí spuštění mezi více async skripty není zaručeno – první stažený skript se spustí jako první.

Příklad: <script async src="/js/analytics.js"></script>. Tento skript by měl být nezávislý na jiných knihovnách nebo skriptech, jinak může dojít k chybám. Async je vhodné pro reklamní kódy, analytiku, pixely nebo externí widgety.

Tabulka porovnání defer a async

Pravidlo je jednoduché: pokud váš skript musí běžet ve stanoveném pořadí, použijte defer. Pokud je zcela nezávislý, zvažte async. Pokud si nejste jisti, začněte na testovacím prostředí s defer a ověřte, že nedochází k chybám nebo problémům s interakcí. průvodce staging prostředím a zálohováním

Jak na odložené načítání JavaScriptu krok za krokem

Nasazení defer nebo async náhodně u všech skriptů může krátkodobě vylepšit skóre, ale v produkci může rozbít klíčové funkce jako platby, vyhledávání, menu nebo validaci formulářů. Proto je vhodné postupovat systematicky: měřit, klasifikovat, měnit postupně, testovat a sledovat výsledky.

1. Změřte aktuální výkon

Než začnete, stanovte si výchozí hodnoty. Zaznamenejte si skóre mobilního a desktopového PageSpeed Insights, hodnoty TBT, First Contentful Paint, Largest Contentful Paint a Speed Index z Lighthouse. V Chrome DevTools na záložce Performance sledujte hlavní vlákno – dlouhé žluté bloky obvykle indikují náročné JavaScriptové úkoly.

Například můžete mít mobilní TBT 780 ms, doba vykonávání JavaScriptu 2,8 sekundy a hlavní vlákno zaneprázdněné 4,5 sekundy. Po optimalizaci může TBT klesnout třeba na 280 ms, což je zlepšení o cca 64 %. Taková data pomohou týmu pochopit, co funguje.

2. Vytvořte inventář skriptů

Zkontrolujte zdrojový kód stránky nebo záložku Network a vypište všechny JavaScriptové soubory, které se načítají. Určete jejich původ, velikost, kdy jsou potřeba a jejich závislosti. Rozdělte je do skupin:

• Kritické skripty – nezbytné pro první zobrazení nebo základní navigaci.
• Závislé lokální skripty – skripty tématu, slideru, filtrů, galerie a modulů aplikace.
• Nezávislé skripty třetích stran – analytika, reklama, pixely, chat a sociální widgety.
• Zastaralé nebo nepoužívané skripty – zbytečné soubory po odebraných pluginech nebo funkcích.
• Podmíněně načítané skripty – například validace formuláře na kontaktních stránkách.

Nejefektivnější optimalizací je často odstranění nepotřebných skriptů. I 90 KB zkomprimovaný soubor může na mobilu při parsování a vykonávání způsobovat blokaci přes 300 ms. Proto nejdříve odstraňte nepotřebné a pak zbytek načítejte odloženě.

3. Vyberte skripty pro defer

Obvykle jsou vhodné hlavní skripty tématu, ovládání menu, sliderů, galerií a aplikační balíčky. Důležité je, aby skript nepoužíval zastaralé blokující metody jako document.write a aby mohl běžet až po připravení DOM.

Ve WordPressu může být situace složitější – například jquery-migrate, hlavní soubor tématu a skripty pluginů často obsahují závislosti. Async u jQuery bývá riskantní, protože mnoho pluginů spoléhá na správné pořadí načtení. Lepší je u jQuery závislých skriptů použít kontrolovaný defer nebo využít optimalizované možnosti načítání v rámci pluginů. Průvodce optimalizací rychlosti WordPressu

4. Vyberte skripty pro async

Google Analytics, reklamní tagy, Facebook Pixel, LinkedIn Insight Tag, některé externí chat widgety a sociální sdílecí kódy jsou typickými kandidáty na async. Nicméně ne všechny třetí strany jsou stejné – některé live chaty mohou vyžadovat načtení ihned po spuštění stránky, jiné reklamní systémy mohou čekat na konkrétní pořadí skriptů. Proto vždy pečlivě prostudujte dokumentaci.

Async u nezávislých analytických kódů obvykle nezpůsobuje problém. Pro snížení rizika ztráty dat je vhodné kontrolovat spuštění v reálném čase. Pokud používáte tag manager, místo shromáždění všech tagů do jednoho kontejneru nastavte spouštěče podle podmínek – například skript pro sledování komentářů se nenačítá na stránkách bez formuláře pro komentáře, skript pro interakci s produktem jen na stránkách produktů.

5. Přidejte podmíněné a událostní načítání

Defer a async jsou dobrý start, ale ještě větší efekt má načítání JavaScriptu podle chování uživatele. Live chat nemusí být načten hned, ale třeba po 5 sekundách na stránce nebo po kliknutí na tlačítko pomoci. Kód pro mapu se může načíst až při scrollu na sekci kontaktů. Video přehrávač se zavolá až po stisknutí tlačítka přehrát.

Tento přístup je velmi efektivní zejména u obsahových a firemních webů, kde uživatel nepotřebuje všechny widgety najednou. Odstranění například 200 KB JavaScriptu z prvotního načtení může na slabších mobilních telefonech snížit TBT o stovky milisekund.

6. Testujte a nasazujte postupně

Změny nejprve vyzkoušejte na testovacím prostředí. Proveďte manuální testy na klíčových stránkách jako homepage, kategorie, produkt, kontakty, přihlašování a platby. Sledujte konzoli pro chyby, zejména ty typu „Cannot read property“, „is not defined“ nebo „undefined function“, které naznačují problémy s pořadím nebo závislostmi.

Ve výrobním prostředí nasazujte změny postupně – nejprve optimalizujte externí skripty třetích stran, pak skripty tématu. Po každé změně proveďte znovu Lighthouse testy se stejným nastavením sítě a zařízení. Nepočítejte pouze s jedním výsledkem, ale vyhodnocujte průměr ze tří testů pro spolehlivější data.

Poznámky k použití defer a async ve WordPressu

Ve WordPressu se JavaScriptové soubory načítají přes funkci wp_enqueue_script v tématech a pluginech. Od roku 2026 lze v moderních verzích lépe definovat strategie načítání skriptů, ale starší témata, page buildery a některé optimalizační pluginy mohou způsobovat konflikty.

Pokud používáte performance plugin, je lepší neodkládat všechny skripty jedním klikem, ale vytvořit seznam výjimek. Například skripty platebních bran, přihlašování, administrační lišty, bezpečnostních kontrol a captcha mohou být citlivé. U e-shopů na WooCommerce je nutné otestovat skripty košíku, plateb a výběru variant. Řešení WooCommerce hostingu

Praktický postup může být: nejprve odstraňte nepoužívané pluginy, pak nastavte podmíněné načítání pluginů, aplikujte defer u skriptů tématu a nakonec použijte async u nezávislých externích kódů. Tento postup snižuje riziko náhlých chyb.

Doporučení pro projekty na míru a frameworky

U moderních frameworků jako React, Vue, Angular, Next.js nebo Nuxt není optimalizace JavaScriptu jen o přidání defer do HTML tagu. Velikost balíčku, rozdělení kódu (code splitting), tree shaking, dynamický import a náklady na hydration výrazně ovlivňují TBT. Například jeden velký bundle o velikosti 700 KB může i s defer zablokovat hlavní vlákno na dlouhou dobu.

V projektech na míru používejte rozdělení kódu podle rout (pages). Pokud je uživatel na úvodní stránce, neměl by se stahovat kód administrace, grafů nebo složitých editorů. Těžké komponenty zavolejte dynamickým importem až v momentě potřeby. Nepotřebné závislosti odstraňte pomocí analýzy balíčků. Nahraďte velké knihovny pro datum, grafy nebo animace lehčími alternativami.

U server-side renderingu nebo statické generace buďte opatrní – i když HTML přijde rychle, hydration stovek komponent najednou může zvýšit TBT. Vyhýbání se zbytečnému klientskému JavaScriptu je klíčovou strategií pro výkon v roce 2026.

Vliv hostingu, doby odezvy serveru a JavaScriptu na výkon

TBT přímo souvisí s vykonáváním JavaScriptu v prohlížeči, ale hosting infrastruktura má na výsledek nepřímý vliv. Pomalu reagující server (TTFB), chybějící komprese, absence HTTP/2 nebo HTTP/3, slabé cache a geografická vzdálenost mohou způsobit pozdní doručení JavaScriptových souborů. To prodlužuje načítání stránky a zhoršuje uživatelský zážitek.

Kvalitní hosting s podporou Brotli nebo Gzip komprese, efektivní cache, aktuálním PHP, rychlými disky a CDN integrací výrazně pomáhá optimalizaci. Správná instalace SSL certifikátu je důležitá pro moderní prohlížeče, HTTP/2 a bezpečné propojení třetích stran. Hostragons SSL certifikáty Hostragons kontrola domény

Například stejný JavaScriptový soubor bez komprese o velikosti 320 KB může po Brotli kompresi klesnout na 95 KB. TBT se tím přímo nesníží ve stejném poměru, protože měří dobu vykonávání, ale zkrácení doby stahování uvolní hlavní vlákno dříve. Proto defer, async, cache a kvalitní hosting je třeba kombinovat.

Kontrolní seznam pro měření a ověření

Pro ověření úspěšnosti optimalizace nestačí sledovat jen skóre PageSpeed. Pomůže následující seznam:

• Byla porovnána mobilní hodnota TBT před a po optimalizaci?
• Snížily se nejvíce nákladné JavaScriptové soubory v reportech o výkonu?
• Poklesl počet dlouhých úloh v Chrome DevTools Performance záznamech?
• Neobjevily se JavaScriptové chyby v konzoli?
• Fungují menu, vyhledávání, filtry, formuláře, košík a platby bez problémů?
• Jsou externí analytické a reklamní kódy správně spouštěné?
• Zlepšila se metrika INP a doba odezvy v reálných datech uživatelů?
• Byly změny otestovány i po vyčištění cache?

Důležité je rozlišovat laboratorní a reálná data. TBT je metrika laboratorního testu Lighthouse, zatímco v praxi je důležitější INP (Interaction to Next Paint). Pokles TBT však často vede i ke zlepšení INP, protože hlavní vlákno je méně blokované.

Časté chyby a jak se jim vyhnout

Všechny skripty označit jako async

Jde o nejběžnější chybu. Protože async nezaručuje pořadí, může to vést k náhodným chybám u závislých skriptů. Stránka může fungovat v jedné situaci, ale na pomalém připojení nebo v jiném prohlížeči se rozbít. U závislých skriptů je tedy lepší použít defer.

Špatné odložení jQuery a závislých pluginů

Ve WordPressu mnoho pluginů spoléhá na správné načtení jQuery. Async u jQuery může způsobit, že pluginy nebudou fungovat, protože jQuery ještě není načtené. Řešením je znát závislosti a kritické skripty vyjmout z odložení.

Nekontrolované načítání skriptů třetích stran

Majitelé webů často zapomenou optimalizovat reklamní, chatové a analytické skripty. Přitom Lighthouse reporty ukazují, že právě tyto zdroje mohou mít největší vliv na výkon. Odstranění nepoužívaných tagů, podmíněné načítání a odložení načítání podle uživatelských akcí přináší významné zlepšení.

Instalace pluginů bez měření

Optimalizační pluginy mohou být užitečné, ale bez měření dopadu přidávají další JavaScript a CSS, které mohou výkon zhoršit. Nejprve diagnostikujte problém a poté vyberte nástroj, který skutečně pomůže. Testujte výkonnost před a po instalaci.

Ignorování kolizí cache a minifikace

Při současném použití minifikace, slučování skriptů, defer a async může dojít ke změně pořadí souborů, což způsobí chyby v produkci. Pokud používáte CDN, serverovou i aplikační cache, vždy po změnách vyčistěte všechny vrstvy cache.

Reálný příklad optimalizace

Představme si středně velký firemní web, kde úvodní stránka načítá 18 JavaScriptových požadavků. Z toho 5 je skriptů tématu a menu, 4 skripty pro slider a animace, 3 pro formuláře a mapy a 6 analytických, pixelových a live chat kódů. Výchozí TBT na mobilu je 920 ms.

Nejprve odstraníme dva nepoužívané animované pluginy, čímž snížíme komprimovaný JavaScript o 140 KB a TBT klesne na 760 ms. Poté nastavíme defer pro skripty tématu a slideru a otestujeme závislosti – TBT se sníží na 480 ms. Nakonec načítáme mapový skript pouze při scrollu do kontaktní sekce, live chat spustíme po 7 sekundách a analytiku s pixely načteme asynchronně. Výsledná hodnota TBT je 210 ms.

Ukazuje se, že nelze spoléhat na jediný trik, ale je třeba postupovat po vrstvách: odstraňovat nepotřebné kódy, zavádět defer a async, načítat podmíněně a mít správnou cache a hosting.

Závěr: Vyvážená a otestovaná strategie odloženého načítání JavaScriptu pro nižší TBT

Implementace odloženého načítání JavaScriptu je jedním z nejefektivnějších a nejjednodušších způsobů, jak snížit dobu blokace stránky (TBT). defer je vhodný pro skripty, které musí běžet v pořadí a po načtení DOM, zatímco async je ideální pro nezávislé externí skripty. Pro úspěch je klíčové nejprve změřit výkon, rozdělit skripty podle priority, odstranit zbytečné, zavádět změny postupně a sledovat reálný uživatelský zážitek.

Hostragons nabízí rychlou, bezpečnou a škálovatelnou hostingovou infrastrukturu, která v kombinaci s optimalizací JavaScriptu, správným nastavením cache a SSL přináší stabilní a rychlý webový výkon. Chcete-li zlepšit TBT svého webu, začněte analýzou současného stavu a postupujte po malých, měřitelných krocích. Více informací o vhodném hostingu a výkonových řešeních najdete u Hostragons. Hostragons webhostingové balíčky

Často kladené otázky

Lze používat defer a async současně?

Pokud u jednoho skriptu použijete oba atributy defer i async, moderní prohlížeče pravděpodobně upřednostní async, čímž ztratíte zaručené pořadí načítání. Proto se nedoporučuje používat oba atributy současně. Je lepší závislé skripty označit defer a nezávislé async.

Zlepší odložené načítání JavaScriptu přímo SEO pozice?

Samo o sobě to není přímý faktor pro lepší pozici, ale zlepšuje uživatelský zážitek, rychlost načítání a Core Web Vitals, což Google zohledňuje při hodnocení. Rychlejší a stabilnější web zvyšuje spokojenost návštěvníků a konverzní poměr.

Je bezpečné přidat defer ke všem JavaScriptovým souborům?

Ne vždy. Některé skripty musí běžet ihned nebo v přesném pořadí. Proto je potřeba pečlivě zkontrolovat účel a závislosti každého skriptu a změny vždy testovat na testovacím prostředí.

Stačí pro snížení TBT jen defer a async?

U menších a středních webů to často přináší výrazné zlepšení, ale u rozsáhlých projektů s těžkými frameworky a mnoha třetími stranami je třeba také rozdělovat kód, odstraňovat nepoužívaný JavaScript, načítat podmíněně a využívat kvalitní hosting a cache.

Které skripty ve WordPressu bych neměl označovat jako async?

Skripty závislé na jQuery, platební a košíkové skripty, validace formulářů, bezpečnostní skripty a kritické funkce tématu by neměly být načítány asynchronně, protože může dojít k narušení pořadí a chybám. Nejprve zkuste defer a případně vytvořte seznam výjimek.