W artykule:
Niedawno jeden z naszych czytelników zapytał nas, jak mogą przenieść skrypty JavaScript na dół w WordPress, aby zwiększyć ich wynik szybkości strony Google. Cieszymy się, że zapytali, bo szczerze 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, dzięki czemu możesz poprawić czas ładowania witryny i wynik szybkości strony Google.
Korzyści z przenoszenia JavaScripts do dołu
JavaScript jest językiem programowania po stronie klienta. Jest on wykonywany I uruchamiany przez przeglądarkę użytkownika, a nie przez serwer WWW. Gdy umieścisz JavaScript na górze, przeglądarki mogą go uruchomić lub przetworzyć przed załadowaniem reszty strony. Gdy skrypty JavaScript zostaną przeniesione na dół, serwer WWW szybko wyrenderuje stronę, a następnie przeglądarka użytkownika uruchomi skrypty JavaScript. Ponieważ wszystkie renderowanie po stronie serwera jest już zrobione, JavaScript załaduje się w tle, dzięki czemu ogólne obciążenie jest szybsze.
Poprawi to twój wynik prędkości podczas testowania z Google Page speed lub Yslow. Google i inne wyszukiwarki rozważają teraz szybkość strony jako jedną z macierzy wydajności podczas wyświetlania wyników wyszukiwania. Oznacza to, że strony internetowe, które ładują się szybciej, będą bardziej widoczne w wynikach wyszukiwania.
Prawidłowy sposób dodawania skryptów w WordPress
WordPress ma potężny system zapytań, który pozwala programistom motywów i wtyczek dodawać swoje skrypty w kolejce i ładować je w razie potrzeby. Prawidłowe Zapytanie o skrypty i style może znacznie poprawić szybkość ładowania strony.
Aby pokazać podstawowy przykład, dodamy trochę JavaScript do motywu WordPress. Zapisz swój JavaScript w .js plik i umieść, że .js plik w Twoim temacie js katalog. Jeśli twój motyw nie ma Katalogu dla JavaScripts, utwórz go. Po umieszczeniu pliku skryptu edytuj motyw funkcje.php plik 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 w stopce lub na dole strony WordPress, wystarczy ustawić $in_footer parametr do prawda.
Użyliśmy również innej funkcji get_template_directory_uri() który zwraca adres URL katalogu szablonu. Ta funkcja powinna być używana do zapytań i rejestracji skryptów i stylów w WordPress themes. Dla wtyczek będziemy używać plugins_url() funkcja.
Problem:
Problem polega na tym, że czasami wtyczki WordPress dodają własny JavaScript do stron wewnątrz <head> lub wewnątrz treści strony. Aby przenieść te skrypty na dół, musisz edytować pliki wtyczek i poprawnie przenieść Skrypty na dół.
Wyszukiwanie Źródła JavaScript
Otwórz swoją witrynę w przeglądarce internetowej i zobacz źródło strony. Zobaczysz link do pliku JavaScript wskazujący lokalizację i pochodzenie pliku. Na przykład, zrzut ekranu poniżej mówi nam, że nasz skrypt należy do wtyczki o nazwie 'test-plugin101′. Plik skryptu znajduje się w js katalog.
Czasami zobaczysz JavaScript dodany bezpośrednio do strony i nie połączony przez oddzielny .plik js. W takim przypadku należy dezaktywować wszystkie wtyczki jeden po drugim. Odśwież stronę po dezaktywacji każdej wtyczki, aż znajdziesz tę, która dodaje skrypt do Twoich stron. Jeśli JavaScript nie zniknie nawet po dezaktywacji wszystkich wtyczek, spróbuj przełączyć się na inny motyw, aby sprawdzić, czy JavaScript jest dodawany przez Twój motyw.
Zarejestruj się i śledź Skrypty
Po znalezieniu wtyczki lub motywu, który dodaje JavaScript w sekcji nagłówka, następnym krokiem jest sprawdzenie, gdzie wtyczka ma wezwanie do pliku. W jednym z plików PHP motywu lub wtyczki zobaczysz wezwanie do tego konkretnego .js plik.
Jeśli wtyczka lub motyw już używa enqueuing, aby dodać plik JavaScript, wszystko, co musisz zrobić, to zmienić funkcję wp_register_script w wtyczce lub motywie i dodać true dla parametru $in_footer. O tak.:
wp_register_script ('script-handle', plugins_url ('js/script.js', _ _ plik__ ),",'1.0',true);
Załóżmy, że 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 .js plik. Następnie użyj wp_register_script() funkcja jak pokazano powyżej, aby przenieść JavaScript na dół.
Uwaga redaktora: ważne jest, aby zrozumieć, że po wprowadzeniu zmian w plikach podstawowych i aktualizacji wtyczki, zmiany nie zostaną nadpisane. Lepszym sposobem na to byłoby wyrejestrowanie skryptu i ponowne zarejestrowanie go z funkcji motywu.plik php. Zobacz ten samouczek.
Oprócz przenoszenia skryptów do stopki, powinieneś również rozważyć użycie szybszej wtyczki mediów społecznościowych i leniwych obrazów ładowania. Oprócz tego powinieneś również użyć W3 Total Cache i MaxCDN, aby poprawić szybkość witryny.
Mamy nadzieję, że ten artykuł pomógł Ci przenieść skrypty JavaScript na dół w WordPress i poprawić szybkość strony. W przypadku pytań i opinii zostaw komentarz poniżej.
