Odkładanie jQuery w WordPress

Przewodnik po odkładaniu jQuery w WordPress

Witajcie, miłośnicy wydajności! Z przyjemnością podzielę się spostrzeżeniami na temat optymalizacji Waszej strony WordPress i poprawy Core Web Vitals. Dziś pokażę Wam, jak odłożyć ładowanie jQuery, zwiększając szybkość Waszej witryny i, w konsekwencji, user experience.

Dlaczego warto odłożyć jQuery?

jQuery, rozbudowana biblioteka JavaScript, jest niewątpliwie potężnym narzędziem, ale jego synchroniczne ładowanie może czasami spowalniać początkowe ładowanie strony. Wiele motywów dostępnych  na różnych marketplace'ach korzysta z jQuery. Nie każdy jQuery jest zbudowany tak, aby był odkładany, ale niestety wiele motywów nie odkłada jQuery. 

Jaka jest więc główna zaleta odkładania jQuery? Spójrzcie na poniższy obrazek. Pokazuje on różnicę w parsowaniu HTML między normalnymi, odłożonymi i asynchronicznymi skryptami. Jeśli jQuery nie jest odłożony, przeglądarka zablokuje parsowanie HTML do momentu wykonania skryptu. Jeśli jQuery jest odłożony, przeglądarka nie będzie musiała blokować parsera. A to zaoszczędzi Wam mnóstwo czasu, szczególnie jeśli chodzi o Largest Contentful Paint. 

Powodem, dla którego twórcy motywów nie odkładają jQuery domyślnie, jest dziedzictwo. Niektóre wtyczki dodają (inline) skrypty, które zależą od jQuery. Jeśli jQuery ładuje się z opóźnieniem, ale skrypt, który potrzebuje jQuery, nie jest odłożony, pojawi się konflikt (i błąd)

Metoda 1: Ręczne odkładanie jQuery

Krok 1: Identyfikacja dołączenia jQuery w Twoim motywie

Aby rozpocząć proces optymalizacji, musimy zlokalizować, gdzie jQuery jest dołączone w Twoim motywie WordPress. Najczęściej znajduje się w pliku functions.php motywu lub bezpośrednio w pliku header.php, szukaj linii przypominających:

wp_enqueue_script('jquery');    

Teraz wiemy, że handle dla jQuery nazywa się 'jquery'. Zrozumienie, gdzie jQuery jest zakolejkowane, stanowi podstawę naszej drogi optymalizacji.

Krok 2: Tworzenie motywu potomnego dla długoterminowej stabilności

Przed wprowadzeniem jakichkolwiek zmian rozważ utworzenie motywu potomnego, aby zabezpieczyć swoje modyfikacje przed przyszłymi aktualizacjami. Dzięki temu Twoja ciężka praca nie zostanie nadpisana, gdy motyw nadrzędny otrzyma aktualizację. Tworzenie motywu potomnego jest jak dodanie dodatkowej warstwy ochrony do struktury Twojej strony.

Krok 3: Zakolejkowanie jQuery z atrybutem 'defer'

Teraz zagłębmy się w szczegóły techniczne. W pliku functions.php Twojego motywu potomnego dodaj następujący kod i zmodyfikuj go, aby pasował do lokalizacji Twojego pliku jQuery i handle'a. Będziemy korzystać z nowej strategii defer

function defer_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);

Rozłóżmy to na czynniki:

• wp_deregister_script('jquery'): Wyrejestrowuje domyślny skrypt jQuery.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
: Rejestruje jQuery ze strategią 'defer'.
• wp_enqueue_script('jquery'): Kolejkuje zmodyfikowany skrypt jQuery.

I voilà: pomyślnie odłożyłeś jQuery na swojej stronie WordPress. A jako bonus wiesz teraz, jak odłożyć dowolny skrypt, ponieważ proces jest dokładnie taki sam!

Metoda 2: użyj wtyczki

Wtyczki takie jak WP Core Web Vitals sprawiają, że odkładanie jQuery jest bardzo łatwe, a wiele wtyczek potrafi nawet poradzić sobie z komplikacjami, które mogą z tego wyniknąć, poprzez odkładanie również zależności i wykonywanie kilku innych sztuczek, takich jak buforowanie zdarzeń jQuery do momentu wykonania jQuery.

Metoda 3: CloudFlare

Innym bardzo prostym sposobem na odłożenie jQuery jest użycie CloudFlare Rocket Loader. Rocket Loader działa poprzez wyłączenie wszystkich skryptów podczas ładowania strony, a następnie szybkie ich ponowne włączenie. Ten trik naśladuje odkładanie skryptów, ale ma kilka wad

• CloudFlare Rocket Loader psuje funkcję przeglądarki zwaną skanerem preload. Z Rocket Loaderem skrypty nie są wstępnie ładowane i pobranie oraz wykonanie skryptów może zająć trochę więcej czasu.
• CloudFlare Rocket Loader to dość tępe narzędzie. Nie rozróżnia między ważnymi, mniej ważnymi i opcjonalnymi skryptami. Po prostu odkłada wszystko bez żadnych rozważań i nie daje Ci kontroli nad czasem wykonania skryptów.
  

Testuj, testuj, testuj!

Po wdrożeniu tych zmian dokładnie przetestuj funkcjonalność swojej strony. Zwróć szczególną uwagę na elementy interaktywne, animacje i funkcje zależne od jQuery, aby upewnić się, że działają bezproblemowo. Rygorystyczne testy gwarantują, że optymalizacja nie wprowadzi przypadkowo żadnych problemów do Twojego interfejsu użytkownika.

Rozwiązywanie problemów

Jeśli napotkasz jakiekolwiek problemy, prawdopodobnie będą one należeć do jednej z 3 kategorii. Większość problemów można znaleźć, otwierając inspektora i przechodząc do zakładki konsoli. Jeśli występują jakiekolwiek problemy, prawdopodobnie znajdziesz ostrzeżenia, które wyglądają mniej więcej tak i brzmią 'Uncaught ReferenceError: jQuery is not defined'

Naprawienie ich nie jest takie trudne. Obok błędu znajduje się odniesienie do jego źródła. Jeśli jest to (index), najprawdopodobniej pochodzi ze skryptu inline. Jeśli jest to inny plik, to albo problem z synchronizacją, albo zapomniałeś odłożyć ten plik również.

Skrypty zależne

Skrypty inline

$(function(){
 // do something
})

• Użyj sztuczki z type="module". Nowszy <script type="module"> również odłoży inline JavaScript.
• Umieść skrypty inline w zewnętrznym pliku. Jeśli potrzebujesz zmiennych, możesz dodać je w skrypcie inline bezpośrednio na stronie, ale główne funkcje zależne od jQuery powinny znajdować się w zewnętrznym pliku, który jest również odłożony. 

Problemy z synchronizacją

Inny, mniej powszechny problem wynika z synchronizacji. Jeśli jQuery nie jest odłożony, wykona się przed zdarzeniami  DOMContentLoaded i load. Możesz na tym polegać. Jeśli jest odłożony, skrypt może zostać wykonany po zdarzeniu DOMContentLoaded. Oznacza to, że jeśli podpiąłeś handler zdarzenia do DOMContentLoaded, nie zostanie on niezawodnie wykonany. Jeśli napotkasz takie problemy, spróbuj zmienić wyzwalacz lub opakować funkcję w jQuery(). 

I jak zawsze, jeśli utkniesz, nie wahaj się i zatrudnij mnie na 2-godzinną sesję!