Rychlost Vysoký dopad Snadné 5–15 min

Defer / async na skriptech

Synchronní <script> blokuje vykreslení, odlož ho.

Co to je

Když prohlížeč narazí na obyčejný <script>, zastaví vykreslování stránky, skript stáhne a spustí, a teprve pak pokračuje. Tomu se říká „render-blocking" (blokující) skript. Atributy defer a async tohle chování mění.

Proč to řešit

Každý blokující skript v hlavičce oddaluje okamžik, kdy uživatel uvidí obsah (zhoršuje LCP a First Paint). U více skriptů se zpoždění sčítá. Na mobilu a pomalém připojení to znamená vteřiny prázdné bílé stránky a vyšší míru opuštění.

Jak na to

1Skripty, které nejsou potřeba pro první vykreslení, označ atributem defer: stáhnou se na pozadí a spustí se až po sestavení stránky, v pořadí, v jakém jsou.
2Pro nezávislé skripty (analytika, chat) použij async: spustí se hned po stažení, bez ohledu na pořadí.
3Kritické skripty drž minimální; zbytek načítej na konci <body> nebo s defer.
4Pravidlo: defer = závisí na DOM nebo na pořadí; async = samostatný, na ničem nezáleží.

Příklad

Špatně

<head>
  <script src="/js/app.js"></script>   <!-- blokuje vykreslení -->
</head>

Správně

<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Závěr

Defer/async je jedna z nejlevnějších a nejúčinnějších optimalizací rychlosti, často stačí dopsat jedno slovo k tagu. Pro většinu skriptů je správná volba defer. Po nasazení ověř, že nic nepřestalo fungovat (hlavně skripty závislé na pořadí) a změř zlepšení LCP.

Související témata