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ć
- 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ą.
- 2Dla niezależnych skryptów (analityka, czat) użyj async, uruchomią się od razu po pobraniu, niezależnie od kolejności.
- 3Krytyczne skrypty trzymaj na minimum; resztę wczytuj na końcu <body> lub z defer.
- 4Zasada: defer = zależy od DOM lub od kolejności; async = samodzielny, na niczym nie zależy.
Przykład
<head>
<script src="/js/app.js"></script> <!-- blokuje renderowanie -->
</head><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