Jak odroczyć parsowanie JavaScriptu w WordPressie

Niezależnie od tego, czy prowadzisz witrynę WordPress, czy jakąkolwiek inną witrynę, powinieneś wiedzieć, że krytyczną miarą wydajności Twojej witryny jest szybkość strony.

Jeśli używasz któregokolwiek z narzędzi do testowania wydajności witryny, takich jak GTmetrix lub Google PageSpeed ​​Insights, może to sugerować odłożenie parsowania JavaScript.

To wyrażenie może być mylące, ale odgrywa znaczącą rolę w skróceniu czasu ładowania Twojej witryny.

Więc co to oznacza odroczenie parsowania JavaScriptu?

Cóż, porozmawiamy o tym później szczegółowo. Krótko mówiąc, odroczone parsowanie JavaScriptu pozwala przeglądarce najpierw załadować zawartość witryny, bez czekania na zakończenie pobierania skryptów.

Ten proces jest niezbędny, ponieważ przeglądarki renderują i pobierają JavaScript z serwera przed załadowaniem jakiejkolwiek innej zawartości witryny. To szkodzi szybkości Twojej witryny i przerywa czas ładowania strony.

Na szczęście odroczenie analizowania kodu JavaScript to najlepszy sposób na złagodzenie tego problemu.

W tym artykule wyjaśniłem pięć sprawdzonych metod odroczenia parsowania JavaScript w WordPressie. Ale zanim to nastąpi, uzyskajmy więcej wglądu w znaczenie wyrażenia i dowiedzmy się, czy musisz odroczyć parsowanie JavaScript.

Ruszajmy!

Co rozumiesz przez odroczenie parsowania JavaScript w WordPressie?

Zanim zrozumiesz technikę opóźniania parsowania JavaScript, powinieneś wiedzieć, jak przeglądarka internetowa renderuje stronę internetową.

Po pierwsze, gdy przeglądarka wysyła żądanie do serwera WWW, otrzymuje stronę, która zostaje pobrana w postaci dokumentu HTML. Ten dokument HTML zawiera tekst, kod, który renderuje różne elementy DOM i różne zasoby, takie jak obrazy, arkusze stylów i skrypty.

Domyślnie przeglądarka pobiera te zasoby w kolejności. Renderowanie strony internetowej jest wznawiane dopiero po pobraniu wszystkich zasobów. Poza tym duże zasoby negatywnie wpływają na czas ładowania Twojej strony internetowej.

Za każdym razem, gdy przeglądarka przechodzi przez kod, aby renderować witrynę, przestaje renderować, jeśli znajdzie jakiś kod JavaScript. Proces zostaje zatrzymany, dopóki nie będzie mógł pobrać i przeanalizować pliku JavaScript. To negatywnie wpływa na szybkość Twojej witryny.

Na szczęście proces odraczania analizowania kodu JavaScript powiadamia przeglądarkę, aby czekała na pobranie i przeanalizowanie pliku JavaScript do czasu zakończenia ładowania głównej zawartości witryny. Do tego momentu użytkownicy mogą wchodzić w interakcję z witryną, dzięki czemu czas potrzebny na pobranie i przeanalizowanie kodu JavaScript nie będzie już zagrażał czasowi ładowania witryny.

Jak wiedzieć, że musisz odroczyć parsowanie JavaScript?

Jak powiedzieliśmy wcześniej, narzędzia do testowania wydajności witryny, takie jak GTmetrix, Google PageSpeed ​​Insights lub WP Engine Speed ​​Tool, często sugerują odroczenie analizowania kodu JavaScript podczas analizy witryny.

W szczególności GTmetrix zapewnia ocenę i wymienia określone skrypty, które należy odroczyć, aby poprawić szybkość ładowania strony.

Możesz po prostu wpisać adres URL swojej witryny i poczekać, aż narzędzie to oceni. Po zakończeniu oceny przejdź do karty PageSpeed ​​i rozwiń sekcję Odrocz analizowanie kodu JavaScript.

Ta sekcja oferuje listę nieistotnych skryptów, które są ładowane podczas procesu renderowania, jak pokazano w poniższym przykładzie:

Atrybuty asynchroniczne kontra odroczenie

Należy upewnić się, że pobieranie skryptu nie zakłóca renderowania strony internetowej. Można to zrobić na dwa sposoby:

• Asynchroniczny
• Odraczać

Możesz dołączyć atrybut async do tagu skryptu jako:

 <script src= “path/to/script” async> </script>

Dzięki temu Twoja przeglądarka ma załadować skrypt asynchronicznie. Mówiąc dokładniej, przeglądarka pobiera zasób, gdy tylko napotka go w kodzie, ale przystępuje do analizowania kodu HTML, gdy zasób jest nadal pobierany.

Z drugiej strony możesz dodać atrybut defer do tagu skryptu jako:

 <script src= “path/to/script” defer> </script>

To mówi przeglądarce, aby nie pobierała zasobów, dopóki nie zakończy analizowania strony internetowej. Po zakończeniu analizowania i renderowania pobiera listę odroczonych skryptów, które napotkał wcześniej.

Główna różnica między atrybutami asynchronicznymi i odroczonymi polega na pobraniu zasobów.

Jeśli masz kompaktową aplikację internetową, zaleca się użycie odroczenia, aby zapewnić spełnienie współzależności. Poza tym, jeśli masz tylko kilka skryptów na ścieżce renderowania, nie przeszkadza ci żadna różnica między użyciem obu tych atrybutów.

Oto przykład zrozumienia atrybutów asynchronicznych i odroczonych:

Załóżmy, że masz dwa skrypty JS1 i JS2.

Warunkiem jest to, że JS2 pojawia się w kodzie po JS1, JS2 jest zależne od JS1, ale JS1 jest większe niż JS2.

Teraz, jeśli używasz async , może się zdarzyć, że JS2 zakończy pobieranie przed całkowitym pobraniem JS1. Prowadzi to do błędu, ponieważ JS2 jest wykonywany w przypadku braku JS1.

Z drugiej strony, jeśli używasz defer , JS1 i JS2 są pobierane sekwencyjnie, upewniając się, że nie ma błędu.

Dlaczego musisz odroczyć analizowanie kodu JavaScript?

Wspomnieliśmy wcześniej, że szybkość strony jest najważniejszym aspektem, który wpływa na wydajność Twojej witryny lub ją łamie. Ponieważ pliki JavaScript są dość duże, a ich ładowanie trwa dłużej, opóźnienie ich wykonania jest przydatne, aby zwiększyć szybkość witryny.

Oto niektóre z powodów, dla których musisz odroczyć parsowanie JavaScript w WordPress:

1. Aby zwiększyć rankingi wyszukiwania:

Kiedy Google lub inne wyszukiwarki oceniają Twoją witrynę pod kątem rankingu w wyszukiwarkach, biorą pod uwagę szybkość strony jako krytyczny punkt pomiaru. Jeśli Twoja witryna ładuje się szybciej, z pewnością pojawi się na pierwszej stronie wyników wyszukiwania.

Jak wynika z badań, 1 na 2 osoby oczekuje, że strona załaduje się w mniej niż 2 sekundy. Jeśli Twoja witryna nie załaduje się prawidłowo w ciągu 2 sekund, Google będzie faworyzować Twojego konkurenta zamiast Ciebie. W związku z tym może to negatywnie wpłynąć na twoje rankingi wyszukiwania.

Dlatego konieczne jest odroczenie parsowania JavaScript, aby znacznie skrócić czas ładowania Twojej witryny.

Jeśli szukasz więcej opcji przyspieszenia witryny WordPress, zapoznaj się z tymi 7 technikami SEO na stronie, które podwoją ruch związany z wyszukiwaniem.

2. Aby zwiększyć współczynnik konwersji:

Jeśli Twoja witryna ładuje się wolniej, odwiedzający z pewnością ją opuszczą i poszukają innych lepszych opcji. Ponieważ Twoi użytkownicy często szukają szybkich i wiarygodnych informacji w Twojej witrynie, wolno ładująca się strona może być zabójcą nastroju.

Podobnie, jeśli prowadzisz witrynę partnerską i sprzedajesz produkty za jej pośrednictwem, możesz oczekiwać, że użytkownicy będą podejmować na niej więcej działań. Jednak wolniejsza strona internetowa może zniechęcić odwiedzających do podejmowania jakichkolwiek działań.

Z badań zaprezentowanych na HubSpot wynika, że nawet sekundowe opóźnienie w czasie ładowania strony obniża konwersję o 7% . Właśnie dlatego ważne jest, aby przyspieszyć wczytywanie witryny i zwiększyć współczynnik konwersji.

Technika odraczania parsowania kodu JavaScript pomaga zwiększyć szybkość witryny i współczynnik konwersji.

3. Aby zapewnić lepsze wrażenia użytkownika:

Bez myślenia! Wolniejsze strony internetowe powodują okropne wrażenia użytkownika. Jeśli Twoja strona ładuje się dłużej niż zwykle, możesz oczekiwać, że odwiedzający ją opuszczą, a tym samym zwiększy się jej współczynnik odrzuceń.

Powinieneś rozważyć odroczenie parsowania JavaScript, aby pliki JS były uruchamiane dopiero po załadowaniu zawartości Twojej strony internetowej. Ta technika pomaga przyspieszyć działanie witryny WordPress i zapewnia użytkownikom doskonałe wrażenia.

Pięć różnych metod odroczenia analizowania kodu JavaScript w WordPressie

Aby odroczyć parsowanie JavaScript, możesz wybrać jedną z trzech głównych dróg, w tym:

• Podłącz
• Metoda Varvy
• Plik Functions.php

Korzystając z tych tras, stworzyliśmy pięć różnych metod odroczenia parsowania JavaScript w WordPressie.

Metoda 1: Korzystanie z bezpłatnej wtyczki Async JavaScript

Async JavaScript to darmowa wtyczka WordPress, która pomaga wyeliminować blokujący renderowanie JavaScript w treści strony widocznej na ekranie.

Wtyczka oferuje pełną kontrolę nad tym, które skrypty dodać lub wykluczyć atrybut asynchroniczny lub odroczenia, aby zwiększyć wydajność witryny WordPress. Rzeczą, o której powinieneś pamiętać przed wyborem między asynchronią a odroczeniem, jest:

• Async pobiera JavaScript, nadal analizując pliki HTML, ale następnie wstrzymuje analizowanie HTML, aby wykonać pliki JavaScript.
• Opóźnij pobieranie kodu JavaScript podczas analizowania plików HTML i czeka na jego wykonanie po zakończeniu analizowania kodu HTML.

Oto każdy krok, aby odroczyć parsowanie JavaScript w WordPress za pomocą wtyczki Async JavaScript:

Najpierw przekieruj do Wtyczki -> Dodaj nowy z pulpitu WordPress.

Teraz poszukaj wtyczki Async JavaScript na pasku wyszukiwania, a następnie zainstaluj ją i aktywuj .

Po zakończeniu instalacji i aktywacji wtyczki przejdź do strony Ustawienia , aby wprowadzić niezbędne zmiany.

Teraz zaznacz opcję Włącz Async JavaScript i wybierz Odrocz jako metodę Async JavaScript, jak pokazano na poniższym obrazku:

Aby uzyskać bardziej zaawansowane opcje, możesz przewinąć w dół do strony. Tutaj możesz dołączyć skrypty, do których chcesz zastosować tagi asynchroniczne i odroczone, a także dodać listę skryptów do wykluczenia.

Możesz także wymienić wtyczki i motywy, które można wykluczyć z wszelkich zmian wprowadzanych przez wtyczkę Async JavaScript.

Po wprowadzeniu niezbędnych zmian przewiń w dół strony i naciśnij przycisk Zapisz ustawienia .

Metoda 2: Korzystanie z wtyczki WP Rocket

WP Rocket jest określany jako jedna z najpotężniejszych wtyczek do buforowania WordPress, która umożliwia szybkie ładowanie witryny za pomocą kilku kliknięć. Wtyczka oferuje buforowanie stron, wstępne ładowanie pamięci podręcznej, kompresję plików statycznych i wiele innych fajnych funkcji.

Poza tym WP Rocket pomaga również odroczyć analizowanie JavaScript na karcie Optymalizacja plików na pulpicie nawigacyjnym WP Rocket.

Po zakupie, instalacji i aktywacji wtyczki WP Rocket przekieruj do opcji Ustawienia i kliknij kartę Optymalizacja pliku z menu, aby rozpocząć.

Następnie przewiń w dół do sekcji Pliki JavaScript, zaznacz opcję Załaduj odroczony JavaScript i włącz tryb awaryjny dla jQuery .

Po zakończeniu całego procesu przewiń w dół do końca strony i kliknij przycisk Zapisz zmiany .

Metoda 3: Używanie wtyczki W3 Total Cache

W3 Total Cache to kolejna niezbędna wtyczka WordPress, która poprawia SEO i wygodę użytkownika Twojej witryny. Zwiększa wydajność Twojej witryny i skraca czas ładowania, wykorzystując integrację Content Delivery Network (CDN).

W3 Total Cache jest darmowy i bardzo skuteczny. Możesz użyć tej wtyczki, aby odroczyć parsowanie JavaScript w swojej witrynie WordPress.

Oto każdy krok, aby odroczyć parsowanie JavaScript w WordPress za pomocą wtyczki W3 Total Cache:

Najpierw przekieruj do Wtyczki -> Dodaj nowy z pulpitu WordPress.

Teraz poszukaj wtyczki W3 Total Cache na pasku wyszukiwania, a następnie zainstaluj i aktywuj .

Po zakończeniu instalacji i aktywacji wtyczki przejdź do opcji Wydajność -> Ustawienia ogólne z lewego paska bocznego WordPress, aby wprowadzić niezbędne zmiany.

Następnie przewiń w dół do sekcji Minimalizuj i zaznacz opcję Włącz . Dodatkowo wybierz opcję Ręczny w trybie Minifikuj i kliknij przycisk Zapisz wszystkie ustawienia , aby kontynuować.

Teraz przejdź do zakładki Performance -> Minify z lewego paska bocznego i przewiń w dół do nagłówka JS , gdzie możesz zobaczyć sekcję Operacje w obszarach z dwoma tagami HTML.

Wybierz opcję Bez blokowania, korzystając z opcji „odrocz” w typie osadzania tagu Przed </head> .

W tej samej sekcji możesz zobaczyć nagłówek zarządzania plikami JS, w którym musisz wybrać aktywny motyw WordPress i kliknąć przycisk Dodaj skrypt , aby dołączyć URI JavaScript, który chcesz przeanalizować.

Możesz dodać dowolną liczbę identyfikatorów URI, klikając przycisk Dodaj skrypt .

Po zakończeniu zmian kliknij przycisk Zapisz ustawienia i wyczyść pamięć podręczną , aby kontynuować.

Następnie przewiń w dół do sekcji CSS . Następnie możesz kliknąć przycisk Dodaj arkusz stylów pod nagłówkiem zarządzania plikami CSS, aby wstawić identyfikatory URI arkusza stylów CSS. Możesz dodać więcej niż jeden na podstawie sugestii dostarczonych przez narzędzia do monitorowania prędkości online.

Po zakończeniu zmian kliknij przycisk Zapisz ustawienia i wyczyść pamięć podręczną , aby kontynuować.

Metoda 4: Korzystanie z zalecanej metody Varvy

Inna metoda, zalecana przez Patricka Sextona z Varvy, wykorzystuje skrypt do wywołania zewnętrznego pliku JavaScript po zakończeniu wstępnego ładowania strony. Oznacza to, że przeglądarka nie pobierze ani nie wykona żadnego kodu JavaScript, dopóki strona internetowa nie zostanie załadowana.

Możesz użyć tej metody, modyfikując fragment kodu dostarczony przez Varvy, a następnie dodając skrypt do pliku motywu bezpośrednio przed tagiem zamykającym </body> .

Oto kod, który należy dodać w części głównej motywu, aby odroczyć parsowanie JavaScript w WordPress:

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Uwaga: upewnij się, że zmieniłeś defer.js na nazwę zewnętrznego pliku JavaScript. Następnie możesz użyć haka wp_footer, aby wstrzyknąć kod za pomocą pliku functions.php motywu podrzędnego.

Dzięki takiemu podejściu możesz owinąć kod Varvy w ten sposób:

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

Oto każdy krok tej metody wyjaśniony za pomocą wyraźnych obrazów:

Zaloguj się do pulpitu WordPress i przejdź do Wygląd -> Edytor motywów

Teraz kliknij plik header.php po prawej stronie ekranu, a następnie wklej wspomniany powyżej kod przed zamknięciem </body tag>.

Następnie kliknij przycisk Aktualizuj plik .

Metoda 5: Używanie pliku functions.php

Jeśli masz pomysł na rozwój WordPressa, powinieneś wiedzieć, że nie powinieneś dodawać skryptów bezpośrednio przez znaczniki HTML. Zamiast tego musisz użyć wbudowanych funkcji WordPress, aby zażądać zasobów, a także w razie potrzeby wykonać kopię zapasową swojej witryny.

Możesz użyć atrybutu defer do plików JavaScript, dodając fragment kodu do pliku functions.php .
W tym celu musisz przejść do edytora motywów z pulpitu WordPress. Następnie kliknij na functions.php i dodaj do niego następujący kod:

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Ten fragment mówi WordPressowi, aby dodał atrybut odroczenia do wszystkich plików JavaScript z wyjątkiem JQuery.
Możesz również łatwo dodać następujący kod, aby użyć atrybutu asynchronicznego lub odroczenia do plików JavaScript za pomocą pliku functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Cóż, nie zapominaj, że zanim dodasz atrybuty async i defer do tagów skryptu, musisz umieścić każdy skrypt w kolejce, aby WordPress miał do niego dostęp. Oto kod na to:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Po zakończeniu dodawania kodu do pliku functions.php kliknij przycisk Aktualizuj plik .

Oto każdy krok tej metody wyjaśniony wyraźnymi obrazami:

Zaloguj się do pulpitu WordPress i przejdź do Wygląd -> Edytor motywów

Teraz kliknij plik functions.php znajdujący się po prawej stronie ekranu. Następnie możesz wkleić wspomniany powyżej kod i kliknąć przycisk Aktualizuj plik , aby zapisać niezbędne zmiany.

Alternatywne wtyczki do opóźniania analizowania kodu JavaScript w WordPress

Jeśli szukasz innych opcji niż wtyczki Async JavaScript i WP Rocket, aby odroczyć parsowanie JavaScript w WordPress, masz ich mnóstwo. Niektóre z nich to:

1. Pakiet przyspieszający prędkość:

Jest to darmowa wtyczka WordPress z łatwym w użyciu interfejsem, która pomaga w optymalizacji JavaScript i wielu innych technikach optymalizacji prędkości.

Plusy z pakietu Speed ​​Booster:

• Bardzo prosty i łatwy w użyciu oraz wyposażony w interaktywny interfejs użytkownika
• Pomaga w optymalizacji JavaScript, optymalizacji CSS, leniwym ładowaniu i integracji Content Delivery Network (CDN)
• Regularnie aktualizowana w celu uzyskania wyjątkowej wydajności i ulepszeń w zakresie błędów

Wady pakietu przyspieszenia prędkości:

• Istnieje ryzyko, że włączenie tej wtyczki lub którejkolwiek z jej funkcji może powodować konflikty z innymi wtyczkami w Twojej witrynie

2. JavaScripty WP odroczone:

Ta wtyczka WordPress odracza ładowanie wszystkich dodanych skryptów JavaScript za pomocą wp_enqueue_script(), używając LABJS. Efektem jest odpowiednia optymalizacja czasu ładowania.

Zalety WP Deferred JavaScripts:

• Bardzo prosty w obsłudze i jest jednym z najpopularniejszych rozwiązań na rynku
• Wyraźnie zaprojektowany, aby odroczyć parsowanie JavaScript w WordPressie, a nie tylko jako funkcja dodatkowa

Wady WP Deferred JavaScripts:

• Rzadkie aktualizacje i być może niekompatybilne z nowszymi wersjami WordPress
• Może spowodować awarię innych wtyczek w Twojej witrynie

FAQ (najczęściej zadawane pytania)

Wniosek

Bardzo ważne jest, aby odroczyć parsowanie JavaScript w WordPress, aby poprawić szybkość i wydajność witryny. Mamy nadzieję, że ten artykuł będzie dla Ciebie wnikliwy, ponieważ przedstawiliśmy różne sposoby wykonania tej techniki, która polega na korzystaniu z wtyczek i samodzielnym dodawaniu kodów do plików motywów.

Jeśli dodawanie kodów do plików motywu sprawia Ci trudność, zdecydowanie zalecamy skorzystanie z wtyczek wspomnianych powyżej, aby odroczyć parsowanie kodu JavaScript. Wtyczki są łatwe w użyciu i możesz ukończyć cały proces za pomocą kilku kliknięć.

Po zakończeniu procesu upewnij się, że uruchamiasz swoją witrynę za pomocą narzędzi do testowania wydajności witryny, takich jak GTmetrix, aby upewnić się, że Twoja witryna odkłada jak najwięcej skryptów.

Czy masz jakieś wątpliwości i pytania dotyczące odroczenia parsowania JavaScript w WordPressie? Zastrzel ich w sekcji komentarzy poniżej!