Niedawno jeden z naszych czytelników zapytał nas, w jaki sposób może przenieść skrypty JavaScript na dół w WordPressie, aby zwiększyć wynik szybkości strony Google. Cieszymy się, że zapytał, bo szczerze mówiąc chcieliśmy o tym napisać. Wcześniej mówiliś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 wczytywania twojej witryny i wynik szybkości strony Google.
Korzyści z przeniesienia skryptów JavaScript na dół strony
JavaScript jest językiem programowania po stronie klienta. Jest on wykonywany i uruchamiany przez przeglądarkę internetową użytkownika, a nie przez twój serwer WWW. Kiedy umieścisz JavaScript na górze, przeglądarki mogą wykonywać lub przetwarzać JavaScript przed wczytywaniem reszty twojej strony. Gdy skrypty JavaScript zostaną przeniesione na dół, twój serwer WWW szybko wyrenderuje stronę, a następnie przeglądarka użytkownika wykona skrypty JavaScript. Ponieważ całe renderowanie po stronie serwera jest już wykonane, JavaScript będzie wczytywany w tle, dzięki czemu ogólne ładowanie będzie szybsze.
Poprawi to twój wynik szybkości podczas testowania za pomocą Google Page Speed lub Yslow. Google i inne wyszukiwarki uwzględniają obecnie szybkość strony jako jedną z macierzy wydajności podczas wyświetlania wyników wyszukiwania. Oznacza to, że witryny internetowe, które wczytują się szybciej, będą wyświetlane w wynikach wyszukiwania w bardziej widoczny sposób.
Właściwy sposób dodawania skryptów w WordPressie
WordPress posiada potężny system enqueuing, który pozwala twórcom motywów i wtyczek dodawać swoje skrypty do kolejki i wczytywać je w razie potrzeby. Prawidłowe kolejkowanie skryptów i stylów może znacznie poprawić szybkość wczytywania twojej strony.
Aby pokazać podstawowy przykład, dodamy trochę JavaScript do motywu WordPress. Zapisz twój JavaScript w pliku . js i umieść go w katalogu js twojego motywu. Jeśli twój motyw nie ma katalogu dla skryptów JavaScript, utwórz go. Po umieszczeniu pliku skryptu edytuj plik functions. php twojego 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(). Funkcja ta ma następujące parametry:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
.
Aby dodać skrypt w stopce lub na dole 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 szablonów. Ta funkcja powinna być używana do zapisywania i rejestrowania skryptów i stylów w motywach WordPress. Dla wtyczek będziemy używać funkcji plugins_url ().
Problem:
Problem polega na tym, że czasami wtyczki WordPress dodają własne skrypty JavaScript do stron wewnątrz <head> lub wewnątrz treści strony. Aby przenieść te skrypty na dół, musisz edytować swoje pliki wtyczek i odpowiednio przenieść skrypty na dół.
Znajdowanie źródła JavaScript
Otwórz twoją witrynę w przeglądarce internetowej i zobacz źródło strony. Zobaczysz odnośnik 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 można zobaczyć JavaScript dodany bezpośrednio do strony, a nie odnośnik poprzez oddzielny plik .js. W takim przypadku należy wyłączyć wszystkie twoje wtyczki jedna po drugiej. Odśwież stronę po wyłączaniu każdej wtyczki, aż znajdziesz tę, która dodaje skrypt do twojej strony. Jeśli JavaScript nie zniknie nawet po wyłączaniu wszystkich wtyczek, spróbuj przełączyć się na inny motyw, aby sprawdzić, czy JavaScript jest dodawany przez twój motyw.
Rejestrowanie i zapisywanie skryptów
Po znalezieniu wtyczki lub motywu, który dodaje JavaScript w sekcji nagłówka, następnym krokiem jest sprawdzenie, gdzie wtyczka ma wywołanie pliku. 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 enqueuing do dodawania pliku JavaScript, to wszystko, co musisz zrobić, to zmienić funkcję wp_register_script w twojej wtyczce lub motywie i dodać true dla parametru $in_footer. W ten sposób:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
.
Załóżmy, że twoja wtyczka lub motyw dodaje nieprzetworzony kod JavaScript w nagłówku lub między treścią. Znajdź nieprzetworzony 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 edytora: Ważne jest, aby zrozumieć, że gdy wprowadzisz zmiany w plikach rdzeni i zaktualizujesz wtyczkę, twoje zmiany nie zostaną nadpisane. Lepszym sposobem byłoby wyrejestrowanie skryptu i ponowne zarejestrowanie go z pliku functions.php twojego motywu. Zobacz ten poradnik.
Oprócz przeniesienia skryptów do stopki, powinieneś również rozważyć użycie szybszej wtyczki mediów społecznościowych i leniwego wczytywania obrazków. Oprócz tego powinieneś również użyć W3 Total Cache i MaxCDN, aby poprawić szybkość twojej witryny.
Mamy nadzieję, że ten artykuł pomógł ci przenieść skrypty JavaScript na dół w WordPress i poprawić szybkość twojej strony. W przypadku pytań i uwag prosimy o pozostawienie komentarza poniżej.
Ravi
Will my plugins update normally when i move their js to single file? I am a newbie.
WPBeginner Staff
There are multiple ways to do it. One that is most common is to paste JavaScript files loaded by different sources into one single JS file and then enqueue it.
Catharine
Great, thanks!
Catharine
Hi Syed, thanks for the tutorial. However I am a complete noob and have a very basic question. For that piece of code you posted (the entire function etc), do we need to add that in the functions.php file for every single bit of javascript we want to enqueue? I guess what I’m asking is, how would you format that code if you had more than one piece of javascript that was being loaded in the headers of more than one page?
Your help would be greatly appreciated!
Marc Jacobs
hi, great tutorial. I have a question though. I ran my website through Google Page Speed Insights and got the warning that I had to eliminate render blocking Javascript (and css) to boost my page speed. I read the information on this website (great read!), but I cannot seem to find the php-files where the plugin „calls” for the js-files causing my website to lack speed. I have figured out what plug-in is causing most of the delay (Google-maps-ready), but I have no idea how to precoeed frpm there. I have searched every php-file in the plugin folder, but can’s find a js-file named remotely similar to the files mentioned in the google speed test:
…
How do I figure out what php file to edit? Help wouldbe much appreciated!
greeting,
Marc.
WPBeginner Support
A plugin on your site Google Maps Ready is adding those files.
Administrator
Basavaraj Tonagatti
Hi, I recently moved to Genesis Framework+Eleven 40 Child Theme. I am also facing the same problem while I run the Google page speed test. But as I don’t know the exact way of doing, finding it difficult to make changes. Can anyone guide me what is the exact cause on my site and how to remove this Javascript issue? (I don’t know any styling languages and I am totally unware about these code languages.)
Joseph Stanley-Hunt
Thanks heaps, I have been wondering how to do this and some other tricks (which I have also found answers to on here).
One question tho, I see there is no in-head in the paramaters. is that meaning that if the in_footer is set to false, it is registered in the head automatically?
WPBeginner Support
Yes, the default value for in_footer is false. So you need to explicitly add in_footer to true otherwise it will appear in the head.
Administrator
Mike
The plugin update immediately came to my mind too. Look forward to more advice on this.
Jason
Great article! I have been asking this questions for a long time because so many themes get penalized in Googls speed test due to java scripts loading first. Maybe others have known how to put these scripts in the footer.
Again, thanks and I will try this out and tell you how it works.
Jeremy Myers
Great tutorial.
But once we update the plugin, we will have to do this again, right? And every time the plugin updates?
Is it possible to deregister the js in functions.php and then simply reregister it in the footer somehow?
adam
Hi, thanks for this useful tips. But, how to move .js of W3 Total Cache minify on head?
That’s js location on cache in wp content, not wp plugin.
Lucca
Thx for valueable knowledge – keep up excellent work.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Nice tip. Thanks for share !