Połączenie nie powiodło się. Spróbuj ponownie.

Przejdź do treści
SEO Tools
Pomoc i dokumentacja
Szybkość Wysoki wpływ Łatwe 5–15 min

Defer / async na skryptach

Synchroniczny <script> blokuje renderowanie — odłóż go.

Co to jest

Gdy przeglądarka natrafi na zwykły <script>, zatrzymuje renderowanie strony, pobiera i uruchamia skrypt, a dopiero potem kontynuuje. Nazywa się to skryptem „render-blocking” (blokującym). Atrybuty defer i async zmieniają to zachowanie.

Dlaczego warto to rozwiązać

Każdy blokujący skrypt w nagłówku opóźnia moment, w którym użytkownik zobaczy treść (pogarsza LCP i First Paint). Przy wielu skryptach opóźnienie się sumuje. Na telefonie i wolnym łączu oznacza to sekundy pustej, białej strony — i wyższy współczynnik odrzuceń.

Jak to zrobić

  1. 1Skrypty, które nie są potrzebne do pierwszego renderowania, oznacz atrybutem defer — pobiorą się w tle i uruchomią dopiero po zbudowaniu strony, w kolejności, w jakiej występują.
  2. 2Dla niezależnych skryptów (analityka, czat) użyj async — uruchomią się od razu po pobraniu, niezależnie od kolejności.
  3. 3Krytyczne skrypty trzymaj na minimum; resztę wczytuj na końcu <body> lub z defer.
  4. 4Zasada: defer = zależy od DOM lub od kolejności; async = samodzielny, na niczym nie zależy.

Przykład

Źle
<head>
  <script src="/js/app.js"></script>   <!-- blokuje renderowanie -->
</head>
Dobrze
<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Podsumowanie

Defer/async to jedna z najtańszych i najskuteczniejszych optymalizacji szybkości — często wystarczy dopisać jedno słowo do tagu. Dla większości skryptów właściwym wyborem jest defer. Po wdrożeniu sprawdź, czy nic nie przestało działać (zwłaszcza skrypty zależne od kolejności) i zmierz poprawę LCP.

Powiązane tematy