Odroczenie parsowania Javascript w WordPress [Korzystanie z odroczenia i asynchronizacji]

Szybko ładujące się witryny WordPress zapewniają poważne korzyści, jeśli chodzi o poprawę komfortu użytkowania dla odwiedzających, poprawę widoczności witryny w wyszukiwarkach i zwiększenie ruchu organicznego w witrynie.

Strona internetowa zawiera HTML, CSS, Javascript i obrazy, a każdy z nich musi zostać zoptymalizowany, aby skrócić czas ładowania strony. Obrazy mają jeden z największych wpływów na rozmiar strony, dlatego ważne jest, aby zmniejszyć rozmiar plików obrazów za pomocą wtyczki optymalizacji obrazu WordPress.

Aby jeszcze bardziej poprawić wydajność strony, możesz odroczyć parsowanie javascript w WordPress, co oznacza, że ​​możesz doradzić przeglądarkom ładowanie zawartości strony i obrazów przed załadowaniem JavaScript. Podjęcie tego środka oznacza, że ​​ładowanie elementów Javascript, takich jak formularze i suwaki, może potrwać kilka dodatkowych sekund, ale jest to niewielka cena, ponieważ czas ładowania strony uległ znacznemu skróceniu.

Kod Javascript można wykonać później przy użyciu dwóch technik o nazwie Defer i Async . Obie metody są obsługiwane przez popularne wtyczki do buforowania WordPress, chociaż dedykowane rozwiązania dadzą ci nieco większą kontrolę nad tym, które pliki Javascript są ładowane później.

W tym artykule wyjaśnię, jakie są korzyści z odroczenia ładowania plików JavaScript i pokażę pięć przydatnych wtyczek WordPress, które uprości Ci ten proces.

Zachęcam do przeczytania całego artykułu, aby w pełni zrozumieć temat, ale jeśli jesteś początkującym, jedyną rzeczą, którą powinieneś wynieść z tego artykułu, jest to, że Defer i Async mogą znacznie poprawić czas ładowania strony w Twojej witrynie.

Różne sposoby odroczenia parsowania Javascript w WordPress (z odroczeniem i asynchronizacją)

JavaScript stał się ważnym elementem składowym witryn WordPress, używanym do wyświetlania przycisków, formularzy, galerii multimediów, audio, wideo, liczników czasu, osi czasu w mediach społecznościowych i nie tylko.

Niestety JavaScript jest również jednym z głównych powodów powolnego ładowania stron internetowych, ponieważ przeglądarka musi się zatrzymać, pobrać i wykonać każdy skrypt, zanim będzie mogła kontynuować analizowanie znaczników HTML strony.

Analiza składniowa to proces, w którym przeglądarka analizuje i konwertuje kod strony do formatu, który może wykonać. Każdy kod, który zatrzymuje ten proces, nazywa się „Render-Blocking”, ponieważ opóźnia proces renderowania strony dla odwiedzających.

Zasoby blokujące renderowanie są częstym powodem powolnego ładowania witryny WordPress. Krytyczny CSS może być wyświetlany w tekście, aby zapobiec blokowaniu renderowania, ale lepiej odroczyć ładowanie JavaScript później, używając Defer lub Async , aby zapobiec blokowaniu renderowania strony przez kod JavaScript.

Dobrą praktyką jest również usuwanie nieużywanego kodu JavaScript i skracanie czasu wykonywania JavaScript. Jednym ze sposobów na to jest zmniejszenie rozmiaru dużych plików JavaScript za pomocą procesu o nazwie Minifikacja , który usuwa spacje i niepotrzebny kod z każdego pliku JavaScript.

Jednym z najważniejszych wskaźników branych pod uwagę przez usługi porównywania witryn, takie jak Google PageSpeed ​​Insights i GTmetrix, jest First Contentful Paint, czyli czas potrzebny do wyświetlenia pierwszej treści odwiedzającym. Google twierdzi, że czas FCP od 0 do 1,8 sekundy jest dobry, a od 1,8 do 3 sekund średni. Wszystko powyżej 3 sekund jest uważane za wolne.

Wszystko, co musisz zrobić, to wprowadzić adres URL strony do usługi porównywania witryn, aby zobaczyć pliki JavaScript i CSS, które blokują renderowanie strony. Jak widać na poniższym zrzucie ekranu, pobieranie blokujących renderowanie plików CSS i JavaScript może zająć kilka sekund, więc jeśli możesz wyeliminować te zasoby, Twoje strony będą ładować się znacznie szybciej.

Najskuteczniejszym sposobem wyeliminowania plików JavaScript blokujących renderowanie jest użycie atrybutów defer i async . Tych atrybutów boolowskich można używać tylko z elementem HTML skryptu, gdy atrybut SRC jest używany do wywoływania plików zewnętrznych.

 <script src="javascript.js"></script>

 <script defer src="javascript.js"></script>

 <script async src="javascript.js"></script>

Dodając atrybut odroczenia lub async do elementu skryptu HTML, doradzasz przeglądarce, aby pobierała plik w tym samym czasie, gdy strona jest analizowana. W przypadku odroczenia plik jest wykonywany po całkowitym przeanalizowaniu strony.

Natomiast atrybut async jest operacją asynchroniczną, która wykonuje plik natychmiast po jego pobraniu. W związku z tym całkowity czas analizowania strony z asynchronizacją będzie nieco dłuższy, ponieważ przeglądarka na krótko przerwie analizowanie kodu HTML w celu wykonania pliku.

Jeśli określisz zarówno odroczenie, jak i asynchronizację, przeglądarki użyją asynchronizacji.

Ważnym standardem do zrozumienia jest Document Object Model, który jest często określany jako DOM. DOM reprezentuje cały dokument, taki jak plik XML lub stronę HTML, jako pojedynczy obiekt. Ważne elementy, takie jak głowa, ciało i nagłówki, można uznać za gałęzie DOM.

Jeśli plik Javascript nie wymaga informacji z innego pliku lub z samego DOM, warto zastosować metodę asynchroniczną , ponieważ ważne elementy Twojej strony będą wyświetlane szybciej. Pamiętaj tylko, że asynchronizacja może powodować błędy w Twojej witrynie, jeśli plik żąda informacji, które nie zostały jeszcze załadowane.

Jeśli plik JavaScript wymaga informacji, preferowaną opcją jest odroczenie , ponieważ gwarantuje to prawidłowe pobranie całej zawartości przed wykonaniem pliku.

Celem odroczenia i asynchronizacji jest zmniejszenie blokowania renderowania strony, a zobaczysz znaczną poprawę czasu ładowania strony, niezależnie od używanej metody.

Polecam przeczytanie artykułu Zell Liew „Jak i kiedy używać atrybutów asynchronicznych i odroczonych”, aby uzyskać bardziej wyczerpujące wyjaśnienie, kiedy używać odroczenia i asynchronizacji.

Jak odroczyć parsowanie JavaScript za pomocą wtyczki WordPress

Większość wywołań JavaScript w Twojej witrynie będzie pochodzić z motywu WordPress i aktywowanych wtyczek WordPress, dlatego ręczne dodawanie atrybutów odroczenia i asynchronizacji do elementów skryptu jest niepraktyczne.

Lepiej jest użyć wydajnej wtyczki WordPress, aby odroczyć parsowanie javascript w WordPress i uprościć proces stosowania odroczenia lub asynchronizacji w całej witrynie.

Pamiętaj, że niewłaściwe ustawienie konfiguracji spowoduje problemy z projektowaniem Twojej strony internetowej. Na przykład formularze kontaktowe mogą nie wyświetlać się poprawnie, chyba że wybierzesz odpowiednie ustawienia konfiguracyjne lub wykluczysz pliki formularza kontaktowego z optymalizacji.

Aby znaleźć odpowiednie ustawienia konfiguracyjne i najlepszą wydajność dla Twojej witryny, konieczne są zatem metody prób i błędów.

• Kopie zapasowe witryny — Wykonaj kopię zapasową witryny przed aktywacją wtyczki optymalizacyjnej WordPress
• Przetestuj wydajność — przetestuj wydajność kluczowych stron w Twojej witrynie i za każdym razem, gdy zmienisz ustawienie konfiguracji optymalizacji
• Przejrzyj swoją witrynę — sprawdź, czy żadna część Twojej witryny nie jest uszkodzona po zmianie konfiguracji

Jeśli napotkasz jakiekolwiek poważne problemy podczas odraczania parsowania javascript, przywróć domyślne ustawienia wtyczki. Wtyczkę można również odinstalować, jeśli nie działa ona w harmonii z Twoją witryną.

1. Automatyczna optymalizacja

Autoptimize to wszechstronne rozwiązanie optymalizacyjne WordPress, które pozwala agregować i minimalizować JavaScript, CSS i HTML. Zoptymalizowana zawartość jest buforowana w celu poprawy wydajności. Ta pamięć podręczna może szybko stać się zbyt duża, dlatego zachęcam do korzystania z funkcji Autoclear Autoptimize Cache w celu automatycznego wyczyszczenia pamięci podręcznej.

Chociaż Autoptimize jest znany z agregacji plików, może być również używany do odroczenia parsowania plików JavaScript, aby nie blokowały renderowania. Kod JavaScript i CSS może być również wyświetlany w tekście, a dostępne są dodatkowe opcje optymalizacji obrazów, czcionek Google, emotikonów i nie tylko.

2. Asynchroniczna wtyczka JavaScript

Opracowany przez twórcę Autoptimize, Async JavaScript umożliwia stosowanie asynchronizacji i odroczenia do plików JavaScript w całej witrynie. Daje pełną kontrolę nad każdym plikiem JavaScript, umożliwiając wykluczenie jQuery, określonych plików JavaScript, wtyczek WordPress i motywów WordPress. Jeśli wolisz, możesz dokładnie określić, które pliki Javascript mają być asynchronizowane, a które odroczone.

Jedną z najfajniejszych funkcji Async Javascript jest kreator konfiguracji, który przeprowadza testy wydajności w GTmetrix dla wszystkich możliwych ustawień konfiguracyjnych Twojej witryny. To świetna oszczędność czasu, ponieważ wyniki pokazują dokładnie, jak szybka będzie Twoja witryna przy każdej konfiguracji, ale pamiętaj, aby za każdym razem sprawdzać swoją witrynę, aby upewnić się, że żaden jej aspekt nie jest zepsuty.

3. Sprawy doskonałe

Perfmatters to wysokiej jakości zestaw narzędzi WordPress, który oferuje dziesiątki unikalnych funkcji wydajności. Cena detaliczna od 24,95 USD rocznie, wtyczka umożliwia odroczenie analizy plików JavaScript (wszystkich plików JS) w Twojej witrynie. Pliki jQuery można uwzględnić w odroczeniach, a także można wykluczyć określone pliki JavaScript. Kolejną fajną opcją, którą daje, jest Opóźnienie Javascript, które ładuje pliki JavaScript tylko wtedy, gdy ma miejsce interakcja użytkownika.

Perfmatters może służyć do wyłączania podstawowych funkcji WordPress w celu poprawy bezpieczeństwa i wydajności. Umożliwia także zdefiniowanie niestandardowego adresu URL logowania, wstępne ładowanie treści, leniwe ładowanie obrazów, integrację Google Analytics, optymalizację czcionek Google i nie tylko.

Moją ulubioną funkcją jest menedżer skryptów, ponieważ pozwala on włączać i wyłączać pliki JavaScript i CSS dla każdej strony w Twojej witrynie. To znacznie zmniejszy rozmiar stron, ponieważ programiści WordPress mają zły nawyk ładowania plików JavaScript i CSS w całej witrynie, nawet jeśli są one potrzebne tylko na kilku stronach.

4. Oczyszczanie zasobów

Asset CleanUp to bogata w funkcje wtyczka optymalizacyjna WordPress, która pozwala minimalizować, łączyć i odraczać parsowanie plików JavaScript i CSS. Jego menedżer CSS i JS działa w podobny sposób, jak menedżer skryptów Perfmatter, umożliwiając określenie, czy plik ma być ładowany na określonej stronie. Możesz także wyłączyć podstawowe ustawienia WordPress, wyczyścić kod HTML, zoptymalizować czcionki Google i nie tylko.

Pojedyncza licencja na Asset CleanUp Pro kosztuje 42,36 € rocznie. Uaktualnianie umożliwia umieszczanie kodu w wierszu oraz określanie asynchronizacji i odroczenia dla plików Javascript na zasadzie strona po stronie. Odblokowuje również menedżera wtyczek i zapewnia większą kontrolę nad sposobem ładowania zasobów w Twojej witrynie.

5. Wstępne ładowanie HTTP/2 Push

Wstępne ładowanie HTTP/2 Push umożliwia przesyłanie i wstępne ładowanie plików JavaScript i CSS na serwerze obsługiwanym przez HTTP2 za pomocą funkcji ładowania w kolejce. Można to zastosować do wszystkich plików lub skonfigurować każdy zasób osobno. Typy zasobów obejmują skrypt, styl, dźwięk, osadzanie, pobieranie, czcionkę, obraz, obiekt i wideo.

Po wprowadzeniu adresu URL pliku JavaScript można wybrać opcję asynchronizacji, odroczenia lub usunięcia. Wstępne ładowanie HTTP/2 Push umożliwia zdefiniowanie reguł określających, kiedy to ustawienie będzie miało zastosowanie. Możesz zdefiniować reguły JavaScript dla zasobu dla wszystkich stron, dla telefonów komórkowych lub komputerów stacjonarnych, dla określonych postów i stron, dla kategorii, stron wyszukiwania, stron WooCommerce i innych.

Końcowe przemyślenia

JavaScript nadal jest preferowaną metodą dodawania dynamicznych treści i elementów interaktywnych do stron internetowych. Ponieważ wiele motywów i wtyczek WordPress korzysta z Javascript, ważne jest, aby odroczyć parsowanie javascript w WordPress i używać odroczenia i asynchronizacji, aby zapewnić szybkie renderowanie stron i zmniejszyć blokowanie renderowania strony.

W wielu wtyczkach WordPress znajdziesz funkcje do stosowania odroczenia i asynchronizacji, chociaż rozwiązania, o których wspomniałem w tym artykule, zapewniają większą kontrolę nad plikami JavaScript.

Na mojej własnej stronie używam Autoptimize do agregacji plików i Async JavaScript do odraczania Javascript. Byłem zadowolony z Async Javascript, chociaż HTTP/2 Push Preload może być lepszą opcją dla wielu właścicieli witryn, ponieważ daje lepszą kontrolę nad tym, gdzie stosowane są ustawienia optymalizacji.

Asset CleanUp i Perfmatters oferują podobne funkcje i funkcje, więc nie polecam używania ich razem. Asset CleanUp Pro niewątpliwie oferuje lepszą kontrolę i bardziej zaawansowane funkcje, chociaż nadal używam Perfmatters na mojej własnej stronie internetowej do czyszczenia WordPressa, ponieważ jest łatwiejszy w użyciu. Oba rozwiązania poprawią każdą konfigurację optymalizacji WordPress, nawet jeśli używasz innej wtyczki WordPress do odroczenia parsowania javascript w celu zmniejszenia blokowania renderowania strony.

Zachęcam do przetestowania wszystkich tych wtyczek WordPress, aby odroczyć parsowanie javascript i przeprowadzić wiele testów, aby upewnić się, że masz najlepszą konfigurację.

Powodzenia.

Kevina