Jak kontrolować kolejność ładowania skryptów JavaScript w WordPress

Optymalne ładowanie skryptów JavaScript to jeden z kluczowych elementów wydajności strony. W WordPress możesz łatwo zarządzać kolejnością ładowania plików JS, co pozwala uniknąć konfliktów i poprawia czas wczytywania witryny.

Dlaczego kolejność ładowania ma znaczenie?

Kiedy różne skrypty JavaScript zależą od siebie (np. jQuery i plugin korzystający z jQuery), muszą być ładowane w odpowiedniej kolejności. Nieprawidłowa kolejność może powodować błędy typu „Uncaught ReferenceError” lub „is not a function”.

Dodatkowo, niektóre skrypty można ładować asynchronicznie lub z opóźnieniem, aby nie blokowały renderowania strony.

Użycie funkcji wp_enqueue_script() z zależnościami

Najlepszym sposobem na kontrolowanie kolejności ładowania skryptów w WordPress jest funkcja wp_enqueue_script().
Dzięki jej parametrowi $deps (dependencies) możesz wskazać, od jakich skryptów dany plik zależy.

Przykład:

function my_custom_scripts() {
    // Rejestracja jQuery (jeśli potrzebna)
    wp_enqueue_script('jquery');

    // Własny skrypt, zależny od jQuery
    wp_enqueue_script(
        'my-custom-js',
        get_template_directory_uri() . '/js/custom.js',
        array('jquery'), // zależność
        '1.0.0',
        true // ładowanie w stopce
    );
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

W powyższym przykładzie skrypt custom.js załaduje się po jQuery, co eliminuje błędy związane z kolejnością.

Rejestracja bez ładowania — użycie wp_register_script()

Jeśli chcesz mieć pełną kontrolę nad momentem ładowania, możesz najpierw zarejestrować skrypt, a dopiero później go załadować.

function register_then_enqueue() {
    wp_register_script('analytics', get_template_directory_uri() . '/js/analytics.js', array(), '1.0.0', true);

    // Warunek – ładujemy tylko na stronie głównej
    if (is_front_page()) {
        wp_enqueue_script('analytics');
    }
}
add_action('wp_enqueue_scripts', 'register_then_enqueue');

To rozwiązanie daje elastyczność — możesz ładować skrypty tylko tam, gdzie są potrzebne.

Kolejność w stopce (true w parametrze)

Ostatni parametr w wp_enqueue_script() określa, czy skrypt ma się ładować w stopce (true) czy w nagłówku (false).
Ładowanie w stopce pozwala skrócić czas renderowania strony i poprawia wyniki w Lighthouse.

Jak wymusić konkretną kolejność ładowania?

Jeśli masz wiele niestandardowych skryptów i chcesz kontrolować ich kolejność, możesz użyć tablicy zależności.

function enqueue_multiple_scripts() {
    wp_enqueue_script('lib-one', get_template_directory_uri() . '/js/lib-one.js', array(), '1.0.0', true);
    wp_enqueue_script('lib-two', get_template_directory_uri() . '/js/lib-two.js', array('lib-one'), '1.0.0', true);
    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array('lib-two'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_multiple_scripts');

Tutaj main.js załaduje się dopiero po lib-two, a lib-two po lib-one — pełna kontrola.

Podsumowanie

Kontrolowanie kolejności ładowania skryptów w WordPress to podstawa dobrej optymalizacji.
Stosując funkcje wp_enqueue_script() i wp_register_script(), możesz uniknąć błędów, przyspieszyć stronę i utrzymać czysty, logiczny porządek w kodzie.

Dzięki właściwemu zarządzaniu zależnościami, Twoja witryna będzie działać szybciej i bardziej stabilnie. 🚀