W WordPressie najczęściej wybierz defer. Oba atrybuty pozwalają pobierać JavaScript bez zatrzymywania parsowania HTML, ale async nie zachowuje kolejności wykonywania skryptów. To może zepsuć zależności między plikami, na przykład między jQuery a skryptem wtyczki.
Async i defer – co wybrać?
Skrypty JavaScript ładowane bez żadnego atrybutu mogą blokować parser HTML. Przeglądarka musi wtedy pobrać i wykonać plik, zanim przejdzie do dalszej części dokumentu. W PageSpeed Insights taki zasób może pojawić się jako Render-Blocking Resource, co utrudnia szybkie wyświetlenie treści i może pogorszyć między innymi LCP oraz FCP.
Atrybuty async i defer pozwalają pobierać pliki w tle. W środowisku WordPress bezpieczniejszym wyborem jest zwykle defer, ponieważ skrypty uruchamiają się po sparsowaniu HTML i zachowują kolejność z dokumentu. async nadaje się głównie do skryptów niezależnych, takich jak analityka lub reklamy.
Jak działają async i defer?
Najważniejsza różnica dotyczy momentu wykonania oraz kolejności plików. Pobieranie obu typów skryptów może odbywać się równolegle z analizowaniem HTML, ale sposób uruchomienia kodu jest inny.
| Atrybut | Kiedy pobiera? | Kiedy wykonuje? | Blokuje parser? | Czy zachowuje kolejność? |
|---|---|---|---|---|
| Brak atrybutu | Podczas parsowania dokumentu | Natychmiast po pobraniu | Tak | Tak |
async |
W tle, równolegle z parsowaniem HTML | Natychmiast po pobraniu | Na czas wykonania może przerwać parser | Nie |
defer |
W tle, równolegle z parsowaniem HTML | Po sparsowaniu dokumentu, przed DOMContentLoaded |
Nie | Tak |
Przy async pierwszy wykona się ten plik, który szybciej się pobierze. Nie musi to być skrypt umieszczony wcześniej w kodzie. Przy defer przeglądarka zachowuje kolejność skryptów z dokumentu, dlatego ten wariant lepiej pasuje do stron z zależnościami JavaScript.
Dlaczego async może zepsuć WordPressa?
Wtyczki i motywy WordPressa często korzystają z określonej kolejności ładowania. Typowy przykład to skrypt wtyczki zależny od jQuery. Jeśli oba pliki otrzymają async, skrypt wtyczki może wykonać się wcześniej niż biblioteka, której potrzebuje. W konsoli przeglądarki pojawi się wtedy błąd, a część funkcji przestanie działać.
Ryzyko dotyczy między innymi menu, sliderów, formularzy, popupów i elementów koszyka. Problem może nie wystąpić przy każdym odświeżeniu, ponieważ zależy od czasu pobierania poszczególnych plików.
W praktyce wybór wygląda tak:
defer– dla większości skryptów motywu i wtyczek, szczególnie gdy korzystają z jQuery lub innych bibliotek.async– dla niezależnych skryptów, które nie komunikują się z pozostałym kodem strony.- Brak zmian – dla plików, których kolejności lub momentu wykonania nie można bezpiecznie modyfikować.
- Opóźnienie wykonania – dla wybranych skryptów zewnętrznych, jeśli funkcja wtyczki pozwala uruchomić je dopiero po interakcji użytkownika.
Jak włączyć defer w WordPressie?
Najprościej użyć wtyczki optymalizującej. Nazwy opcji mogą się zmieniać wraz z wersją, dlatego po zapisaniu ustawień sprawdź, czy dana funkcja rzeczywiście dotyczy opóźniania lub odraczania JavaScript.
- Wykonaj pomiar początkowy – sprawdź stronę w Google PageSpeed Insights i zanotuj problemy związane z zasobami blokującymi renderowanie.
- Otwórz ustawienia JavaScript – w WP Rocket szukaj opcji związanej z ładowaniem JavaScript z atrybutem
defer, a w LiteSpeed Cache ustawień opóźniania lub odraczania JS. - Włącz zmianę dla plików JavaScript – zacznij od odroczenia skryptów, bez uruchamiania wszystkich agresywnych opcji naraz.
- Wyczyść cache i przetestuj stronę – sprawdź menu, formularze, popupy, slider, wyszukiwarkę oraz koszyk, jeśli prowadzisz sklep.
- Dodaj wykluczenia – jeśli konkretny skrypt powoduje błąd, wyłącz go z optymalizacji zamiast wyłączać
deferdla całej strony.
Opcja typu Delay JavaScript Execution działa mocniej niż samo defer. Może poprawić wynik PageSpeed Insights, ale uruchamia część skryptów dopiero po przewinięciu, kliknięciu lub innym sygnale od użytkownika. Nie każda funkcja strony będzie wtedy gotowa od razu, dlatego testy są konieczne.
Nie włączaj
asyncdla wszystkich plików JavaScript w WordPressie. Zysk z krótszego blokowania renderowania może zostać zniwelowany przez błędy zależności i niedziałające elementy strony.
Co sprawdzić po zmianie?
Po wdrożeniu wykonaj test w trybie incognito oraz na urządzeniu mobilnym. Oprócz wyniku w PageSpeed Insights sprawdź konsolę przeglądarki pod kątem błędów JavaScript. Sam wzrost wyniku nie oznacza poprawnej konfiguracji, jeśli użytkownik nie może otworzyć menu albo wysłać formularza.
Dla typowej instalacji WordPressa zacznij od defer, a async zostaw wyłącznie dla skryptów niezależnych. Takie ustawienie zwykle zapewnia rozsądny kompromis między ograniczeniem zasobów blokujących renderowanie a zachowaniem zależności wymaganych przez motyw i wtyczki.
