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

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ú.
2Pre nezávislé skripty (analytika, chat) použi async: spustia sa hneď po stiahnutí, bez ohľadu na poradie.
3Kritické skripty drž minimálne; zvyšok načítavaj na konci <body> alebo s defer.
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