Pripojenie zlyhalo. Skúste to prosím znova.

Preskočiť na obsah
SEO Tools
Pomocník a dokumentácia
Rýchlosť Vysoký dopad Ľahké 5–15 min

Defer / async na skriptoch

Synchrónny <script> blokuje vykreslenie — odlož ho.

Čo to je

Keď prehliadač narazí na obyčajný <script>, zastaví vykresľovanie stránky, skript stiahne a spustí, a až potom pokračuje. Tomu sa hovorí „render-blocking“ (blokujúci) skript. Atribúty defer a async toto správanie menia.

Prečo to riešiť

Každý blokujúci skript v hlavičke odkladá okamih, keď používateľ uvidí obsah (zhoršuje LCP a First Paint). Pri viacerých skriptoch sa zdržanie sčítava. Na mobile a pomalom pripojení to znamená sekundy prázdnej bielej stránky — a vyššiu mieru opustenia.

Ako na to

  1. 1Skripty, ktoré nie sú potrebné na prvé vykreslenie, označ atribútom defer — stiahnu sa na pozadí a spustia sa až po zostavení stránky, v poradí, v akom sú.
  2. 2Pre nezávislé skripty (analytika, chat) použi async — spustia sa hneď po stiahnutí, bez ohľadu na poradie.
  3. 3Kritické skripty drž minimálne; zvyšok načítavaj na konci <body> alebo s defer.
  4. 4Pravidlo: defer = závisí na DOM alebo na poradí; async = samostatný, na ničom nezáleží.

Príklad

Zle
<head>
  <script src="/js/app.js"></script>   <!-- blokuje vykreslenie -->
</head>
Správne
<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Záver

Defer/async je jedna z najlacnejších a najúčinnejších optimalizácií rýchlosti — často stačí dopísať jedno slovo k tagu. Pre väčšinu skriptov je správna voľba defer. Po nasadení over, že nič neprestalo fungovať (hlavne skripty závislé na poradí) a zmeraj zlepšenie LCP.

Súvisiace témy