Atrybut defer w znaczniku <script> powoduje, że skrypt jest pobierany równolegle z HTML, ale uruchamiany dopiero po zakończeniu parsowania dokumentu. Skrypty z tym atrybutem wykonują się w kolejności, w jakiej występują w kodzie.
Jak działa defer?
Przeglądarka nie zatrzymuje budowania strony na skrypcie z defer, a po zbudowaniu DOM uruchamia je kolejno, jeszcze przed zdarzeniem DOMContentLoaded. Dzięki temu skrypt ma dostęp do całego dokumentu, a użytkownik widzi treść szybciej.
Defer czy async?
Defer zachowuje kolejność, więc nadaje się do skryptów zależnych od siebie, np. biblioteki i kodu z niej korzystającego. Async nie gwarantuje kolejności i lepiej pasuje do niezależnych dodatków. Skrypty modułowe, czyli type="module", są domyślnie odroczone.
Dobre praktyki
Własne skrypty strony warto ładować z defer i umieszczać w sekcji head, co pozwala rozpocząć pobieranie jak najwcześniej. Atrybut nie działa na skryptach wbudowanych bez atrybutu src.
Ma to wpływ na szybkość reakcji strony, którą poprawia refaktoryzacja JavaScript pod kątem INP.
Zobacz w praktyce
Refaktoryzacja JavaScript – jak poprawić Interaction to Next Paint (INP)
Działanie strony internetowej w przeglądarce
Core Web Vitals - poradnik jak poprawić wskaźniki