Ostatnio jeden z naszych czytelników zapytał nas, jak przenieść skrypty JavaScript na dół w WordPress, aby zwiększyć wynik szybkości strony Google. Cieszymy się, że zapytali, ponieważ szczerze mówiąc, chcieliśmy o tym napisać. Wcześniej rozmawialiśmy o tym, jak prawidłowo dodawać skrypty JavaScript i style CSS w WordPress. W tym artykule pokażemy, jak przenieść skrypty JavaScript na dół w WordPress, aby poprawić czas ładowania strony i wynik szybkości strony Google.
Korzyści z przenoszenia skryptów JavaScript na dół
JavaScript to język programowania po stronie klienta. Jest on wykonywany i uruchamiany przez przeglądarkę internetową użytkownika, a nie przez serwer internetowy. Kiedy umieszczasz JavaScript na górze, przeglądarki mogą wykonywać lub przetwarzać JavaScript przed załadowaniem reszty strony. Kiedy skrypty JavaScript są przenoszone na dół, serwer internetowy szybko renderuje stronę, a następnie przeglądarka użytkownika wykonuje skrypty JavaScript. Ponieważ wszystkie renderowanie po stronie serwera jest już zakończone, JavaScript będzie ładowany w tle, co przyspieszy ogólne ładowanie.
Poprawi to Twój wynik szybkości podczas testowania za pomocą Google Page Speed lub Yslow. Google i inne wyszukiwarki uwzględniają teraz szybkość strony jako jeden z parametrów wydajności przy wyświetlaniu wyników wyszukiwania. Oznacza to, że strony internetowe, które ładują się szybciej, będą pojawiać się wyżej w wynikach wyszukiwania.
Prawidłowy sposób dodawania skryptów w WordPress
WordPress posiada potężny system kolejkowania (enqueuing), który pozwala programistom motywów i wtyczek na dodawanie swoich skryptów do kolejki i ładowanie ich w razie potrzeby. Prawidłowe kolejkowanie skryptów i stylów może znacząco poprawić szybkość ładowania strony.
Aby pokazać podstawowy przykład, dodamy trochę kodu JavaScript do motywu WordPress. Zapisz swój kod JavaScript w pliku .js i umieść ten plik .js w katalogu js swojego motywu. Jeśli Twój motyw nie ma katalogu na skrypty JavaScript, utwórz go. Po umieszczeniu pliku skryptu edytuj plik functions.php swojego motywu i dodaj ten kod:
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
W tym kodzie użyliśmy funkcji wp_register_script(). Ta funkcja ma następujące parametry:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Aby dodać skrypt do stopki lub na dół strony WordPress, wystarczy ustawić parametr $in_footer na true.
Użyliśmy również innej funkcji get_template_directory_uri(), która zwraca adres URL katalogu szablonu. Ta funkcja powinna być używana do kolejkowania i rejestrowania skryptów i stylów w motywach WordPress. W przypadku wtyczek będziemy używać funkcji plugins_url().
Problem:
Problem polega na tym, że czasami wtyczki WordPress dodają własny kod JavaScript do stron wewnątrz <head> lub w treści strony. Aby przenieść te skrypty na dół, musisz edytować pliki wtyczek i poprawnie przenieść skrypty na dół.
Lokalizowanie źródła JavaScript
Otwórz swoją witrynę w przeglądarce internetowej i wyświetl kod źródłowy strony. Zobaczysz link do pliku JavaScript, wskazujący lokalizację i pochodzenie pliku. Na przykład, poniższy zrzut ekranu mówi nam, że nasz skrypt należy do wtyczki o nazwie „test-plugin101”. Plik skryptu znajduje się w katalogu js.
Czasami zobaczysz kod JavaScript dodany bezpośrednio do strony, a nie połączony za pomocą osobnego pliku .js. W takim przypadku musisz dezaktywować wszystkie swoje wtyczki po kolei. Odśwież stronę po dezaktywacji każdej wtyczki, aż znajdziesz tę, która dodaje skrypt do Twoich stron. Jeśli kod JavaScript nie zniknie nawet po dezaktywacji wszystkich wtyczek, spróbuj przełączyć się na inny motyw, aby sprawdzić, czy kod JavaScript jest dodawany przez Twój motyw.
Rejestrowanie i kolejkowanie skryptów
Gdy znajdziesz wtyczkę lub motyw, który dodaje JavaScript w sekcji nagłówka, następnym krokiem jest ustalenie, gdzie wtyczka wywołuje ten plik. W jednym z plików PHP Twojego motywu lub wtyczki zobaczysz wywołanie tego konkretnego pliku .js.
Jeśli wtyczka lub motyw już używa kolejkowania do dodawania plików JavaScript, wystarczy zmienić funkcję wp_register_script w swojej wtyczce lub motywie i dodać true dla parametru $in_footer. Tak jak tutaj:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Załóżmy, że Twoja wtyczka lub motyw dodaje surowy JavaScript w nagłówku lub między treścią. Znajdź surowy kod JavaScript w plikach wtyczki lub motywu, skopiuj JavaScript i zapisz go w pliku .js. Następnie użyj funkcji wp_register_script(), jak pokazano powyżej, aby przenieść JavaScript na dół.
Uwaga redakcyjna: Ważne jest, aby zrozumieć, że kiedy dokonujesz zmian w plikach rdzeniowych i aktualizujesz wtyczkę, Twoje zmiany nie zostaną nadpisane. Lepszym sposobem na zrobienie tego byłoby wyrejestrowanie skryptu i ponowne zarejestrowanie go z pliku functions.php Twojego motywu. Zobacz ten samouczek.
Oprócz przeniesienia skryptów do stopki, powinieneś również rozważyć użycie szybszej wtyczki mediów społecznościowych i leniwe ładowanie obrazów. Oprócz tego powinieneś również użyć W3 Total Cache i MaxCDN, aby poprawić szybkość swojej witryny.
Mamy nadzieję, że ten artykuł pomógł Ci przenieść JavaScripty na dół w WordPress i poprawić szybkość ładowania strony. W przypadku pytań i opinii prosimy o pozostawienie komentarza poniżej.
Ravi
Czy moje wtyczki będą się normalnie aktualizować, gdy przeniosę ich js do pojedynczego pliku? Jestem początkujący.
Zespół WPBeginner
Istnieje wiele sposobów, aby to zrobić. Najczęstszym sposobem jest wklejenie plików JavaScript ładowanych z różnych źródeł do jednego pliku JS, a następnie jego dodanie.
Catharine
Świetnie, dzięki!
Catharine
Cześć Syed, dzięki za tutorial. Jestem jednak kompletnym laikiem i mam bardzo podstawowe pytanie. Czy dla tego fragmentu kodu, który opublikowałeś (cała funkcja itp.), musimy dodawać go do pliku functions.php dla każdego fragmentu JavaScript, który chcemy dodać? Chyba pytam, jak sformatowałbyś ten kod, gdybyś miał więcej niż jeden fragment JavaScript ładowany w nagłówkach więcej niż jednej strony?
Twoja pomoc byłaby bardzo ceniona!
Marc Jacobs
Cześć, świetny tutorial. Mam jednak pytanie. Przetestowałem moją stronę za pomocą Google Page Speed Insights i otrzymałem ostrzeżenie, że muszę wyeliminować blokujący renderowanie Javascript (i CSS), aby zwiększyć prędkość mojej strony. Przeczytałem informacje na tej stronie (świetna lektura!), ale nie mogę znaleźć plików php, w których wtyczka „wywołuje” pliki js powodujące brak szybkości mojej strony. Udało mi się ustalić, która wtyczka powoduje większość opóźnień (Google-maps-ready), ale nie mam pojęcia, jak postępować dalej. Przeszukałem każdy plik php w folderze wtyczki, ale nie mogę znaleźć pliku js o nazwie podobnej do plików wymienionych w teście prędkości Google:
…
Jak dowiedzieć się, który plik php edytować? Pomoc byłaby bardzo ceniona!
Pozdrawiam,
Marc.
Wsparcie WPBeginner
Wtyczka na Twojej stronie Google Maps Ready dodaje te pliki.
Admin
Basavaraj Tonagatti
Cześć, niedawno przeszedłem na Genesis Framework + Eleven 40 Child Theme. Również mam ten sam problem podczas testu prędkości strony Google. Ale ponieważ nie znam dokładnego sposobu robienia tego, trudno mi wprowadzić zmiany. Czy ktoś może mi pomóc, co jest dokładną przyczyną na mojej stronie i jak usunąć ten problem z Javascript? (Nie znam żadnych języków stylów i jestem całkowicie nieświadomy tych języków kodu.)
Joseph Stanley-Hunt
Wielkie dzięki, zastanawiałem się, jak to zrobić i kilka innych sztuczek (do których również znalazłem odpowiedzi tutaj).
Mam jedno pytanie, widzę, że w parametrach nie ma opcji in-head. czy to oznacza, że jeśli in_footer jest ustawione na false, to jest rejestrowane w nagłówku automatycznie?
Wsparcie WPBeginner
Tak, domyślna wartość dla in_footer to false. Więc musisz jawnie dodać in_footer do true, w przeciwnym razie pojawi się w nagłówku.
Admin
Mike
Aktualizacja wtyczki natychmiast przyszła mi do głowy. Czekam na więcej porad na ten temat.
Jason
Świetny artykuł! Od dawna zadaję sobie te pytania, ponieważ wiele motywów jest karanych w teście szybkości Google z powodu ładowania się skryptów java na początku. Może inni wiedzą, jak umieścić te skrypty w stopce.
Jeszcze raz dziękuję i spróbuję tego, a potem dam znać, jak działa.
Jeremy Myers
Świetny tutorial.
Ale kiedy zaktualizujemy wtyczkę, będziemy musieli zrobić to ponownie, prawda? I za każdym razem, gdy wtyczka się aktualizuje?
Czy jest możliwe odrejestrowanie js w functions.php, a następnie po prostu ponowne zarejestrowanie go w stopce w jakiś sposób?
adam
Cześć, dzięki za te przydatne wskazówki. Ale jak przenieść pliki .js z minifikacji W3 Total Cache do sekcji head?
To jest lokalizacja plików js w pamięci podręcznej w folderze wp content, a nie w folderze wtyczki wp.
Lucca
Dzięki za cenną wiedzę – trzymaj tak dalej świetną pracę.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Miła wskazówka. Dzięki za udostępnienie!