Najbezpieczniej odroczyć ładowanie JavaScriptu w WordPressie za pomocą natywnego argumentu 'strategy' => 'defer' w funkcjach wp_register_script() i wp_enqueue_script(). Ta funkcja jest dostępna od WordPressa 6.3, a WordPress sam uwzględnia zależności między skryptami.
Dlaczego warto odroczyć ładowanie JavaScriptu?
Skrypty JavaScript umieszczone w nagłówku mogą zatrzymać parsowanie HTML i opóźnić wyświetlenie głównej treści. W efekcie użytkownik dłużej czeka na stronę, a wynik metryk Core Web Vitals, w tym LCP, może się pogorszyć.
Atrybut defer pozwala pobierać plik w tle, bez zatrzymywania parsowania dokumentu. Skrypt zostanie wykonany dopiero po odczytaniu HTML, a WordPress może wcześniej sprawdzić jego zależności.
Defer czy async – czym się różnią?
Oba atrybuty pozwalają ograniczyć blokowanie renderowania, ale nie działają tak samo. W WordPressie różnica ma znaczenie, ponieważ motywy i wtyczki często korzystają z łańcuchów zależności, na przykład między jQuery a skryptem rozszerzającym jego funkcje.
| Atrybut | Działanie | Zaleta dla WordPressa | Kiedy stosować? |
|---|---|---|---|
| Brak | Skrypt może blokować parsowanie HTML i wykonuje się zgodnie z miejscem w dokumencie. | Przewidywalna kolejność, ale gorsza wydajność. | Gdy skrypt musi wykonać się natychmiast. |
async |
Plik pobiera się równolegle i wykonuje od razu po pobraniu. | Szybkie uruchomienie niezależnego skryptu. | Dla skryptów, które nie zależą od innych plików. |
defer |
Plik pobiera się w tle i wykonuje po sparsowaniu HTML. | Zachowuje kolejność skryptów zależnych. | Dla większości niekrytycznych skryptów motywu i wtyczek. |
async może doprowadzić do wykonania skryptu zależnego przed biblioteką, której potrzebuje. Z tego powodu defer jest zwykle bezpieczniejszym wyborem dla WordPressa. Nie należy jednak odraczać bez testów każdego pliku, szczególnie skryptów odpowiedzialnych za elementy widoczne od razu po wejściu na stronę.
Jak wdrożyć defer w WordPressie?
Przed zmianą wykonaj kopię zapasową i przetestuj kod na stagingu. Jeśli korzystasz z WordPressa starszego niż 6.3, najpierw zaktualizuj system. Argument strategy nie jest dostępny w starszych wersjach.
- Otwórz plik
functions.phpmotywu potomnego albo użyj własnej wtyczki. - Zarejestruj skrypt za pomocą
wp_register_script(), wskazując jego zależności. - Dodaj go do kolejki przez
wp_enqueue_script()z argumentem'strategy' => 'defer'. - Wyczyść cache i sprawdź działanie strony na komputerze oraz urządzeniu mobilnym.
Przykład dla skryptu motywu wygląda tak:
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_script(
'site-main',
get_theme_file_uri( 'js/main.js' ),
array( 'jquery' ),
'1.0.0',
array(
'in_footer' => true,
'strategy' => 'defer',
)
);
} );Trzeci argument określa zależności. Jeśli main.js korzysta z jQuery, należy pozostawić jQuery w tej tablicy zamiast ręcznie zmieniać kolejność tagów.
Możesz też nadać strategię skryptowi zarejestrowanemu przez wtyczkę. Potrzebujesz do tego jego uchwytu, czyli nazwy użytej podczas rejestracji:
add_action( 'wp_enqueue_scripts', function () {
wp_script_add_data(
'some-plugin-handle',
'strategy',
'defer'
);
}, 20 );WordPress sprawdzi zależności i dodatkowe warunki. Jeżeli odroczenie mogłoby wykonać skrypt w nieprawidłowej kolejności, core może nie dodać atrybutu albo zastosować bezpieczniejszy sposób ładowania.
Nie stosuj masowo filtra
script_loader_tagjako głównej metody. Ręczna zamiana każdego tagu na wersję zdeferomija mechanizm zależności WordPressa i może uruchomić kod inline przed biblioteką, której ten kod potrzebuje.
Nie usuwaj też ręcznie jQuery tylko dlatego, że chcesz przyspieszyć stronę. Wiele wtyczek nadal go wymaga. Jeśli problem dotyczy jQuery Migrate, najpierw sprawdź ostrzeżenia w konsoli i zgodność wtyczek, zamiast wyrejestrowywać bibliotekę bez analizy.
Jak sprawdzić stronę po wdrożeniu?
Po dodaniu defer otwórz narzędzia deweloperskie przeglądarki i przejdź do zakładki Console. Komunikaty takie jak jQuery is not defined albo Uncaught ReferenceError zwykle wskazują na nieprawidłową kolejność wykonywania lub skrypt inline zależny od odroczonego pliku.
Przed publikacją zmian sprawdź następujące elementy:
- W konsoli przeglądarki nie pojawiają się błędy JavaScript.
- Menu, slidery i galerie reagują na kliknięcia.
- Formularze kontaktowe i wyszukiwanie działają także po wylogowaniu.
- Edytor WordPressa, panel administracyjny i funkcje wtyczek działają bez zmian.
- Najważniejsza treść strony pojawia się bez widocznego opóźnienia.
Jeśli błąd dotyczy konkretnego elementu, wyklucz z odraczania skrypt, który go obsługuje, albo popraw jego deklarowane zależności. Często trzeba pozostawić bez defer jQuery, skrypt slidera, kod inline uruchamiany przed załadowaniem biblioteki lub plik wymagany przez element powyżej linii zanurzenia.
Wynik porównuj w tych samych warunkach, najlepiej po wyczyszczeniu cache. PageSpeed Insights lub Lighthouse pomogą ocenić LCP i inne metryki, ale sama poprawa wyniku laboratoryjnego nie wystarcza. Najważniejsze jest to, czy strona zachowuje pełną funkcjonalność na różnych urządzeniach.
Co zrobić, gdy odroczenie psuje stronę?
Najpierw ustal, który skrypt powoduje błąd. W zakładce Network możesz sprawdzić jego uchwyt i moment wykonania, a w Console zobaczysz brakującą funkcję lub bibliotekę. Następnie cofnij zmianę dla jednego pliku, wyczyść cache i ponownie przetestuj stronę.
Nie odraczaj skryptów automatycznie tylko dlatego, że narzędzie pomiarowe wskazuje je jako potencjalnie blokujące. Skrypt krytyczny dla interfejsu może wymagać wcześniejszego wykonania, a jego opóźnienie pogorszy obsługę strony zamiast ją poprawić.
Najbezpieczniejszy schemat to wdrożenie na stagingu, zmiana jednego uchwytu, test funkcji i dopiero później publikacja. Jeśli mimo poprawnej kolejności występują błędy, sprawdź zgodność wtyczki z aktualnym WordPressem albo zleć analizę osobie znającej zależności skryptów.
Końcowa kontrola: użyj WordPressa 6.3 lub nowszego, stosuj 'strategy' => 'defer', zachowuj deklarowane zależności, nie modyfikuj masowo tagów przez script_loader_tag, nie usuwaj pochopnie jQuery i testuj każdą zmianę przed wdrożeniem na produkcji.
