[Kompletny przewodnik] Jak naprawić opóźnione analizowanie kodu JavaScript w WordPress (5 sposobów)

Jako ktoś, kto próbuje zrozumieć, jak odroczyć parsowanie kodu JavaScript, uważamy, że masz problem. Jesteś właścicielem lub odwiedziłeś stronę internetową kogoś, kogo znasz (może klienta?) i ładowanie trwa wiecznie. A kiedy przepuściłeś go przez narzędzia do testowania szybkości witryny, otrzymałeś rekomendację, której nie jesteś pewien, jak ją wdrożyć.

W tym artykule przedstawimy kilka sposobów na odroczenie JavaScriptu i naprawienie tego ostrzeżenia, a ostatecznie sprawimy, że strona będzie się ładować szybciej, bez zgłaszania tego błędu!

Jeśli masz mało czasu, oto kilka szybkich czynności, które możesz wykonać:

Instrukcje jak odroczyć parsowanie JavaScript

1. Pobierz wtyczkę Async tutaj.
2. Kliknij na Wtyczki > Dodaj nowy > Prześlij wtyczkę i wybierz właśnie pobrany plik.
3. Kliknij na Aktywuj zainstalowanej wtyczki.
4. Przejdź do wtyczek i kliknij Ustawienia dla właśnie zainstalowanej wtyczki Async.
5. Kliknięcie na Włącz asynchroniczny JavaScriptlub Zastosuj asynchronię jako dwa najczęstsze sposoby zastosowania poprawki.
6. Przetestuj swoją stronę, aby zobaczyć, że wszystko nadal działa dobrze.

Dlaczego procedura implementacji odroczonego parsowania kodu JavaScript jest ważna? Jeśli nie odroczysz parsowania kodu JavaScript, Twoja witryna będzie wyglądać tak, jakby powoli się ładowała. JavaScript jest zasadniczo ważnym elementem w języku sieci, umożliwia programistom tworzenie „dynamicznych” funkcji.

Jednak w większości przypadków pliki JavaScript stają się dość duże. Mogą również pobierać z serwerów innych firm. To spowalnia pobieranie. Ale to tylko połowa problemu.

Największym problemem jest to, że jeśli nie ma odroczonego parsowania JavaScript, przeglądarka jest ZABLOKOWANA przed pokazywaniem treści. Strona NIE RENDERUJE. A jak to wygląda dla użytkownika? Wygląda na to, że witryna jest powolna, zepsuta lub całkowicie martwa. 

Problem jest spotęgowany na urządzeniach mobilnych, gdzie dostępna moc obliczeniowa wraz z dostępną przepustowością sprawiają, że wrażenia są jeszcze gorsze.

A co zrobią użytkownicy, którzy doznają takiego doświadczenia? Odbiją się od Twojej witryny i nigdy nie wrócą!

Jeśli jesteś w branży internetowej od jakiegoś czasu i próbujesz poprawić SEO swojej witryny, wiesz już, że wydajność witryny jest istotny w poprawie widoczności w wyszukiwarkach.

A jeśli sprawdziłeś swoją witrynę za pomocą Google PageSpeed ​​Insights, poza „odroczeniem analizowania kodu JavaScript” są jeszcze bardziej tajemnicze ostrzeżenia, takie jak to, które mówi „Wyeliminuj zasoby blokujące renderowanie”.

Wygląda na to, że te techniczne rzeczy mają największy wpływ na szybkość ładowania! 

Wyeliminować?! Ale jak mam wyeliminować te kluczowe pliki z mojej strony?

Nie martw się, jesteśmy tutaj, aby pomóc Ci naprawić te ostrzeżenia, rozwiązać te problemy i ostatecznie przyspieszyć ładowanie stron!

Ponieważ ty nie musisz ich usuwać. Wszystko, co musisz zrobić, to odroczyć parsowanie JavaScript.

Obejrzyj ten krótki film poniżej, aby zobaczyć, jak łatwo odroczyć parsowanie kodu JavaScript za pomocą jednej z poniższych metod:

W języku innym niż geekspeak oznacza to, że musisz poprawić kilka rzeczy w swoim WordPressie, aby strona mogła najpierw załadować zawartość przed załadowaniem lub przeanalizowaniem plików JavaScript. 

Dzieje się tak dlatego, że jeśli nie odroczysz parsowania Javascriptu, renderowanie strony internetowej staje się bardzo ciężką operacją, a jak powiedzieliśmy powyżej, strona będzie wyglądać jak zepsuta.

Aby upewnić się, że użytkownik pozostanie w witrynie, chcielibyśmy poinformować go, że coś się dzieje, i pokazać użytkownikowi treść, zamiast czekać, aż przeglądarka wykona całą trudną pracę, zanim faktycznie pokaże cokolwiek użytkownikowi . 

Nawiasem mówiąc, jeśli chcesz, aby Twój WordPress był szybki, istnieje kilka wtyczek, takich jak ten które w ciągu kilku minut może mieć realną różnicę w wydajności (przy niewielkim lub zerowym wysiłku).

Jeśli jesteś zainteresowany, WP Rocket może skonfigurować odroczenie parsowania JavaScript i wiele innych poprawek, aby Twoja witryna była szybsza, po prostu kliknij poniższy baner, aby to sprawdzić. 

Nie jesteś na razie gotowy do korzystania z wtyczki? Czytaj... 

Co to jest odroczone analizowanie kodu JavaScript?

Odroczenie parsowania kodu JavaScript oznacza użycie „defer"Lub"async”, aby uniknąć blokowania renderowania strony. To polecenie HTML nakazuje przeglądarce wykonanie/przeanalizowanie skryptów po (opóźnieniu) lub asynchronicznie (równolegle) wczytaniu strony. Umożliwia to wyświetlanie zawartości bez oczekiwania na załadowanie skryptów .

Konfigurując odroczone parsowanie kodu JavaScript, będziesz mógł szybciej ładować swoje treści z wysokim priorytetem.

Dlaczego tak jest?

Zobacz poniżej to doskonałe wyjaśnienie pokazujące, w jaki sposób ładowane są strony internetowe i jak pliki JavaScript znacznie utrudniają czas ładowania Twojej witryny.

Kontynuując powyższy film, przyjrzyjmy się pokrótce, co się dzieje, gdy ktoś odwiedza Twoją witrynę: 

1. Gdy użytkownik kliknie link prowadzący do Twojej witryny, przeglądarka użytkownika zażąda tego od Twojego serwera, który następnie „serwuje” przeglądarce użytkownika.
2. Przeglądarka użytkownika odbiera i widzi zawartość HTML Twojej strony internetowej i zaczyna ją renderować. Rozpocznie się budowanie Twojej strony internetowej od góry do dołu.
3. Jeśli po drodze znajdzie pliki JavaScript, przeglądarka zatrzyma się i pobierze je (jeśli jest to plik zewnętrzny), a następnie przeanalizuje je
4. Dopiero po pełnym pobraniu i przeanalizowaniu każdego skryptu będzie on nadal ładować resztę treści.

Prawdopodobnie już zaczynasz dostrzegać, gdzie leży problem.

Gdy Twoje strony zawierają dużo plików JavaScript, może to znacząco wpłynąć na czas ładowania Twojej witryny - negatywnie.

Przeglądarka użytkownika będzie stale wyświetlać ikonę ładowania lub kołowrotek podczas analizowania i wczytywania skryptów, zanim pokaże rzeczywistą zawartość — jest to szczególnie widoczne w przeglądarkach mobilnych lub użytkownikach korzystających z wolnych połączeń transmisji danych.

Jeśli zajmie to więcej niż kilka sekund, zwłaszcza jeśli udostępniasz swoje skrypty z zewnętrznego serwera (a ten serwer ma akurat problemy) - Twoi goście zaczną się denerwować.

W tym czasie Twój użytkownik nie widzi nic poza białą pustą stroną. Czy nie jest to jedna z najbardziej frustrujących rzeczy w Internecie? W sieci wszystko ma być natychmiastowe, dlaczego muszą czekać na załadowanie strony?

Jeśli użytkownik czeka dłużej niż 4 sekundy, zacznie się denerwować. Po 8 sekundach Twoja witryna jest prawie martwa - użytkownik odbije się na innej stronie.

Straciłeś gościa i prawdopodobnie jego interes. 

Dodatkową komplikacją jest to, że wiele razy te pliki JS są dodawane do Twojej witryny przez niezbędne wtyczki i motywy, które zainstalowałeś, więc nie możesz się ich łatwo pozbyć.

Więc co robisz?

Aby rozwiązać ten problem, musisz odroczyć parsowanie JavaScript. Działa to poprzez analizowanie skryptów po załadowaniu głównej zawartości. Sprawdź poniższy obraz, aby dokładnie zobaczyć wpływ czasu ładowania. Jak widzimy, polecenie odroczenia zmusza przeglądarkę do późniejszego wykonania JavaScriptu, podczas gdy asynchronia pozwala na równoległe działanie pobierania.

Dlatego, gdy użytkownik odwiedza Twoją witrynę, przeglądarka będzie nadal analizować wszystko od góry do dołu, ale pominie pliki JavaScript na później. W ten sposób Twoi użytkownicy będą mogli zobaczyć Twoje treści natychmiast, bez konieczności czekania. 

Jeśli obejrzałeś powyższy film, zauważyłeś, że atrybuty „async” i „defer” bardzo pomagają.

Ale jak byś to zrobił w WordPressie? A kiedy jest właściwy czas, aby z nich korzystać? Zobaczmy i zacznijmy!

Przeanalizuj swoją witrynę

Zanim zaczniemy, musisz wiedzieć, czy musisz zaimplementować odroczoną poprawkę Javascript na swojej stronie, czy nie. Aby dowiedzieć się, czy potrzebujesz, możesz skorzystać z kilku narzędzi, które są łatwo dostępne w Internecie.

Oto kilka przykładów:

1. GTMetrix

Ten działa, sprawdzając zarówno dane PageSpeed, jak i Yslow, i daje ocenę od F do A. Dają również zalecenia, a także wskazówki, jak ulepszyć witrynę w przypadku wykrycia problemów. W szczególności powie ci, czy musisz odroczyć parsowanie JavaScript. 

Ogólnie wynik powinien wynosić co najmniej 71.

Poniższy obrazek pokazuje stronę internetową, która nie wymaga odroczenia. 

2. Narzędzia PageSpeed

narzędzie opracowane przez Google, PageSpeed ​​Insights to kolejne wszechstronne narzędzie, które zapewnia wyczerpujące informacje na temat problemów z wydajnością Twojej witryny wraz ze wskazówkami, jak je naprawić, podobnie jak GTMetrix.

Jedną z najlepszych rzeczy w tym narzędziu jest to, że zawiera łącza do szczegółowych przewodników i zasobów, które pomogą rozwiązać wszystkie problemy z wydajnością. Poniższy obrazek pokazuje witrynę, która bardzo potrzebuje zaimplementować odroczone parsowanie JavaScript.

3. Narzędzia Pingdom 

Kolejne popularne narzędzie do testowania wydajności witryny, które jest dostępne bezpłatnie dla każdego.

Chociaż wydaje się, że nie mówi wyraźnie, czy musisz odroczyć parsowanie JavaScript, możesz sprawdzić, jak długo zajęło ładowanie skryptów, dzięki ich obszernej stronie wyników.

Poniższy obrazek pokazuje witrynę, która ma prawie połowę swojej strony składającą się z JavaScript - świetny wskaźnik, że możesz chcieć odroczyć swoje skrypty. 

4.  Varvy PageSpeed 

Kolejne doskonałe narzędzie, które poinformuje Cię, czy Twoja witryna ma skrypty blokujące renderowanie.

Najlepsze jest to, że pozwala dokładnie wiedzieć, czym one są, tak jak na poniższym obrazku: 

Ok spoko!

Teraz masz dostęp do narzędzi, które pomogą Ci określić, czy musisz zaimplementować odroczone parsowanie plików JavaScript.

Ale możesz zapytać, dlaczego po prostu nie wdrożyć go i zostawić w spokoju? Jeśli niewłaściwie odroczysz parsowanie JavaScriptu, może to zepsuć rzeczy, a naprawa może być frustrująca, jeśli nie jesteś obeznany z technologią.

Samo włączenie trybu odroczenia nie oznacza, że ​​wszystko zostanie zapomniane i będzie działać dobrze. Musisz sprawdzić, czy zrobiłeś to dobrze i upewnić się, że wszystko działa zgodnie z przeznaczeniem. 

Na przykład, jeśli używasz jQuery, musisz ostrożnie wybrać, który ze swoich skryptów powinieneś odroczyć, ponieważ wydaje się, że problem z odroczeniem i jQuery.

Oprócz tego zauważysz, że w Stack Overflow jest mnóstwo pytań dotyczących jQuery, async i defer, co często dotyczy tego, jak powinieneś zaimplementować defer i async, jeśli w ogóle, do swoich skryptów, które opierają się na jQuery. 

Więc jakie są wyniki? Czy musisz odroczyć swoje skrypty?

Jeśli tak, dowiedzmy się teraz, jak odroczyć JavaScript w WordPressie!

Jak odroczyć analizowanie JavaScript w WordPress

Odroczenie parsowania JavaScript w WordPressie może być dość proste.

Wystarczy zainstalować jedną z tysięcy wtyczek w repozytorium WordPressa i gotowe. Ale są też zaawansowane sposoby na zrobienie tego, jeśli potrzebujesz większej kontroli, zwłaszcza jeśli używasz złożonych skryptów, aby Twoja witryna była bardziej atrakcyjna i interaktywna. 

W tej sekcji sprawdzimy pięć różnych sposobów wykonywania odroczonego parsowania JavaScript w WordPress: za pomocą wtyczek, za pomocą functions.php i ręcznej edycji kodu. 

W repozytorium WordPressa jest tak wiele wtyczek, które mogą pomóc Ci poprawić wydajność Twojej witryny.

Są takie, które są przeznaczone do określonego zadania, takiego jak minimalizacja kodu HTML, i są wtyczki, które próbują włączyć wszystkie poprawki związane z wydajnością w jednej wtyczce, takie jak możliwość minimalizowania i odraczania plików CSS i JavaScript, implementowania i wykorzystywania pamięci podręcznej przeglądarki (które szczegółowo omówiliśmy w tym artykule) i więcej. 

Jednak nie wszystkie wtyczki są sobie równe. Niektóre działają świetnie, niektóre działają dobrze, a niektóre w ogóle nie działają i mogą nawet uszkodzić niektóre lub wszystkie funkcje Twojej witryny. 

(Jeśli wolisz, aby ktoś doświadczył tego za Ciebie, możesz to zrobić za pomocą taniego koncertu Fiverr, klikając przycisk poniżej.)

1. Odrocz analizowanie kodu JavaScript za pomocą wtyczki Async

Szczerze mówiąc, zdecydowanie sugerujemy wybranie wtyczki premium (która jest bardzo tania), ale masz pewność, że naprawisz nie tylko to ostrzeżenie, ale cały szereg problemów z szybkością ładowania witryny.

Zaczniemy od jednego z najpopularniejszych, które są przeznaczone do wykonania jednej pracy określonej w tym artykule.

Jednym z najpopularniejszych sposobów wykonania tego zadania jest Async Javascript. Ta wtyczka koncentruje się na poprawie wydajności Twojej witryny, dostosowując sposób ładowania skryptów i podobnie jak WP Rocket poniżej, zawiera również dodatkowe zaawansowane funkcje, które pozwalają wykluczyć niektóre skrypty z odroczenia.

Oto kroki, które musisz wykonać, aby korzystać z tej wtyczki.

1. Pobierz wtyczkę Async tutaj.
2. Kliknij na Wtyczki> Dodaj nowy w backendzie WP.
3. Kliknij na Prześlij wtyczkę i wybierz właśnie pobrany plik.
4. Alternatywnie wyszukaj Async JavaScript i kliknij zainstaluj teraz.
5. Kliknij na Aktywuj zainstalowanej wtyczki.
6. Przejdź do wtyczek i kliknij Ustawienia dla właśnie zainstalowanej wtyczki Async.
7. Sugerujemy kliknięcie Włącz asynchroniczny JavaScriptlub Zastosuj asynchronię jako dwa najczęstsze sposoby zastosowania poprawki.
8. Jeśli to nie zadziała, możesz wypróbować kilka różnych kombinacji.
9. Przetestuj swoją stronę, aby zobaczyć, że wszystko nadal działa dobrze.

Być może jedną z jego mocnych stron jest to, że oprócz możliwości wykluczenia niektórych skryptów z odroczenia, masz również możliwość wyboru, które skrypty mają zostać odroczone:

Możesz również zauważyć, że masz możliwość asynchronicznego lub odroczenia skryptu. Aby uzyskać więcej informacji na temat różnicy między tymi dwoma, możesz przeczytać to artykuł.

Unikalną cechą tej wtyczki jest to, że możesz określić, aby wykluczyć określony motyw lub wtyczkę.

Istnieje również możliwość zintegrowania GTMetrix z Twoją witryną, dzięki czemu zawsze możesz sprawdzić jej wydajność. Pamiętaj, że za każdym razem, gdy wykonujesz test, kredyt API zostanie odjęty z Twojego konta GTMetrix.

Chociaż niektórzy będą polecać WP odroczony JavaScript, ta wtyczka nie była aktualizowana od ponad 3 lat i nie była testowana z ostatnimi 3 głównymi wersjami, więc zdecydowanie zalecamy, aby nie używać tej wtyczki. Może nadal działać, ale nie został przetestowany, więc jest to ryzyko, którego nie powinieneś podejmować.

Jeśli masz stosunkowo prostą witrynę i chcesz jeszcze bardziej poprawić czas ładowania, może to być właśnie to, czego potrzebujesz. Ta wtyczka nie wymaga żadnej konfiguracji - po prostu zainstaluj, aktywuj i zapomnij.

Ponownie, pamiętaj, że ten nie jest zalecany dla złożonych witryn, takich jak e-commerce, ze względu na brak zaawansowanych opcji podkręcania i ze względu na jego wiek. Możliwość precyzyjnego dostrojenia opcji odroczenia JavaScript jest kluczowa w przypadku dużych i złożonych witryn.

2. Rakieta WP

Obecnie wiodąca wtyczka wydajności WordPress, WP Rocket oferuje nie tylko możliwość odroczenia analizowania plików JavaScript, ale także plików CSS. Oprócz tego otrzymujesz mnóstwo innych opcji poprawy wydajności.

Niektóre funkcje obejmują: 

• Minifikacja — zmniejsza rozmiar kodu witryny, dzięki czemu ładuje się szybciej. Czyni to, usuwając z kodu białe spacje i inne niepotrzebne znaki bez wpływu na jego podstawową funkcjonalność.
• Konkatenacja - łączy wiele plików CSS i JavaScript w jeden.
• Lazy loading - jest to tryb odroczenia dla plików wideo i innych treści multimedialnych, takich jak obrazy. Opóźnia ładowanie tych wymagających dużej ilości zasobów plików, dopóki użytkownik nie przewinie do nich.

Jedną z najlepszych rzeczy w WP Rocket jest to, że po zainstalowaniu i aktywacji możesz po prostu zostawić go w spokoju, a automatycznie uzyskasz wzrost wydajności.

Możesz jednak skonfigurować zaawansowane ustawienia, aby jeszcze bardziej zwiększyć wydajność, ale pamiętaj, że niektóre z nich mogą mieć negatywny wpływ na Twoją witrynę. I z tego powodu ich opcja odraczania dla plików JavaScript i CSS nie jest domyślnie włączona, ponieważ jeśli zrobisz to ostrożnielessPotrafią wszystko psuć.

Na szczęście możesz wykluczyć niektóre skrypty z odroczenia.

Możesz spróbować najpierw wykluczyć wszystkie swoje skrypty, a następnie odroczyć analizowanie plików JavaScript jeden po drugim, aż znajdziesz problematyczny. Oni mają obszerna dokumentacja by ci w tym pomóc. W ten sposób będziesz w stanie zmaksymalizować poprawę wydajności bez naruszania lub poświęcania niektórych lub wszystkich funkcji Twojej witryny.

WP Rocket to wtyczka premium, ale biorąc pod uwagę oferowaną cenę i funkcjonalność (nie tylko odroczenie i synchronizację plików JS, ale także wiele innych optymalizacji, które są gwarantowane aby Twoja witryna była szybsza), uważamy, że jest bardzo warta swojej ceny.

Pobierz WP Rocket

3. Pakiet przyspieszacza prędkości

Kolejną świetną, uniwersalną wtyczką wydajnościową, która pozwala odroczyć parsowanie plików JavaScript, jest Pakiet przyspieszacza prędkości. Jest podobny do WP Rocket pod względem funkcji, ale jest bezpłatny. Posiada większość podstawowych funkcji WP Rocket, takich jak minifikacja, odroczenie, usuwanie niepotrzebnych plików itp.

Poniżej możesz zobaczyć niektóre funkcje dostępne we wtyczce: 

Na karcie Zaawansowane możesz wykluczyć niektóre skrypty z przeniesienia do stopki, odroczenia lub obu. Możesz jednak dodać maksymalnie 4 wykluczone skrypty, co z pewnością jest ograniczeniem dla złożonych i dużych witryn. 

Ogólnie rzecz biorąc, jest to dobra darmowa alternatywa dla WP Rocket, odpowiednia dla małych witryn.

4. Korzystanie z poprawek functions.php

Co jeśli nie chcesz używać wtyczek?

Jest jeszcze jedna sztuczka, którą możesz zrobić, aby odroczyć parsowanie JavaScriptu w WordPressie, a to poprzez edycję pliku functions.php motywu.

Po prostu skopiuj poniższy kod i wklej go na dole pliku function.php motywu: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Pamiętaj, że możesz zepsuć swoją witrynę, jeśli zrobisz to źle, więc zwróć szczególną uwagę i upewnij się, że edytujesz właściwy plik we właściwym motywie, a fragment kodu wklejasz we właściwym miejscu. Pamiętaj, aby nie usuwać/zmieniać niczego innego.

Na szczęście możesz utworzyć motyw potomny, aby bezpiecznie edytować plik functions.php. Ponadto, jeśli kiedykolwiek zmienisz lub zaktualizujesz motyw, możesz łatwo zachować wszystkie niestandardowe zmiany w pliku. Oto świetny artykuł wyjaśniający, jak stworzyć motyw potomny. Po utworzeniu motywu potomnego po prostu wklej fragment kodu w pliku funkcji.php potomka, zapisz go i gotowe.

5. Dostosuj swój kod ręcznie

Może to brzmieć przerażająco, zwłaszcza jeśli nie lubisz kodować, ale dla zaawansowanych użytkowników ręczne poprawianie kodu to świetny sposób na odroczenie analizowania plików JavaScript w WordPressie. 

Varvy ma świetny fragment kodu, który umożliwia całkowite załadowanie początkowej zawartości Twojej strony internetowej przed załadowaniem jakichkolwiek innych zewnętrznych skryptów. Fragment kodu znajduje się poniżej:

  funkcja downloadJSAtOnload() {
    var element = document.createElement("skrypt");
    element.src = "//www.twojadomena.com/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;

Zastąp defer.js własnym plikiem skryptu. Po zmodyfikowaniu go w celu odzwierciedlenia własnego skryptu wklej go tuż przed kodem HTML etykietka. W WordPressie możesz to zrobić, edytując plik footer.php motywu.

Ponownie, zaleca się użycie motywu potomnego, jeśli chcesz edytować pliki motywu. Mała uwaga: edytowanie footer.php za pomocą motywu potomnego różni się od functions.php: musisz skopiować cały plik footer.php motywu głównego wraz z jego zawartością do motywu potomnego, a następnie wprowadzić/dodać zmiany. 

Jeśli nie chcesz zajmować się edycją pliku footer.php, możesz użyć wtyczki o nazwie Wstaw nagłówki i stopki. 

Wystarczy wkleić fragment kodu w polu „Skrypty w stopce”, nacisnąć przycisk Zapisz, a skrypt zostanie dodany w dolnej części kodu witryny, nad etykietka. 

I to wszystkie sposoby, w jakie możesz odroczyć parsowanie JavaScript w WordPressie! Ale czy one działają? Czy poprawiły wydajność Twojej witryny? Sprawdźmy wyniki!

Testowanie wyników

Aby przetestować wyniki, przejdź do GTMetrix.com, PageSpeed ​​Insights i Pingdom Tools, aby sprawdzić, czy poprawiła się Twoja ocena wydajności i czas ładowania.

W GTMetrix Twój wynik powinien wynosić co najmniej 71. Im więcej, tym lepiej! Idealny wynik byłby taki :-) 

W PageSpeed ​​Insights poszukaj „pierwszych farb”:

Ogólnie rzecz biorąc, gdy testujesz, czy implementacja odroczonego analizowania kodu JavaScript spowodowała odroczenie skryptów, staraj się uzyskać zielone wyniki w Pierwszym treściwym wykończeniu i Pierwszym znaczącym wykończeniu.

Porównaj przed i po odroczeniu i sprawdź, czy się poprawiają.

W przypadku narzędzi Pingdom, spójrz na sekcję kolejności ładowania i sprawdź, czy większość, jeśli nie wszystkie pliki skryptów są ładowane jako ostatnie. Porównaj przed i po odroczeniu i obserwuj, czy pliki skryptowe zmieniły pozycję w kolejności ładowania (tj. czy ładowały się wcześniej czy później). 

Czy wyniki Cię zadowoliły? Jeśli tak, świetna robota! Jeśli nie, spróbuj więcej eksperymentować. Jeśli korzystałeś z innych metod z naszej listy, spróbuj użyć zaawansowanych wtyczek, które pozwolą Ci jeszcze bardziej dostosować opcje odroczenia i wydajności. Ponadto w następnej sekcji zapoznaj się z rekomendacjami Google. Mogą ci pomóc.

Jak odroczyć parsowanie JavaScript za pomocą skryptu?

Istnieją różne techniki, których możesz użyć, aby odroczyć parsowanie kodu JavaScript. W następnej sekcji omówiono, co musisz zrobić. 

Podsumowując, musisz wykonać następujące czynności:

1. Skopiuj poniższy kod i dodaj go tuż przed w kodzie HTML.
2. Zastąp plik example.js w poniższym kodzie plikiem zawierającym skrypt, który ma zostać odroczony.
3. Zapisz zmiany.
4. Przetestuj swoją witrynę, aby zobaczyć efekt.

Przyjrzyjmy się tym krokom bardziej szczegółowo:

• Użyj skryptu do wywołania zewnętrznego pliku JS po załadowaniu strony początkowej. Na varvy.com Patrick Sexton sugeruje metodę, która umożliwia załadowanie zawartości witryny przed załadowaniem JS (aby upewnić się, że użytkownik może najpierw zobaczyć zawartość). Dzięki temu na krytyczną ścieżkę ładowania nie mają wpływu skrypty powodujące blokowanie renderowania. Metoda polega na utworzeniu pliku zewnętrznego, który nie jest wymagany do początkowego wyświetlania treści. Dodając następujący skrypt tuż przed w kodzie HTML. Poniższy przykład używa pliku example.js, który należy odpowiednio zaktualizować. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.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>

  Po zakończeniu ładowania strony skrypt rozpocznie pobieranie i wykonywanie przykład.js - problem polega na tym, że musisz ręcznie utworzyć plik.

• Korzystanie z atrybutów async lub defer. Tag JSS async or odraczać Atrybuty działają w podobny sposób - działają w taki sposób, że minimalizują czas, w którym parsowanie HTML zatrzymuje się w oczekiwaniu na pobranie i wykonanie skryptów. Asynchronizacja umożliwia pobieranie plików JS asynchronicznie, a nie synchronicznie, tzn. otwierany jest nowy wątek do pobrania, podczas gdy HTML kontynuuje analizowanie. Defer nakazuje przeglądarce wykonanie skryptu PO zakończeniu ładowania strony. Jest to kolejny sposób na dokończenie analizowania strony, a tym samym bez wpływu na czas ładowania. Oba te tagi minimalizują blokowanie renderowania JS. W przypadku korzystania z obu tych funkcji JS nie musi czekać na zakończenie przetwarzania kodu HTML przed rozpoczęciem pobierania lub wykonywania - co zapewnia, że ​​strona nadal ładuje się szybko. Zobacz, jak wykonanie przebiega odpowiednio w przypadku asynchronii i odroczenia na poniższych obrazach.
  
  

• Przenieś JavaScript na dół strony. Trzecia i ostatnia sugestia to przesunąć dowolne <script> tagi na dole stron (zwłaszcza jeśli nie są krytyczne, np. reklamy). Ta metoda nie jest idealna, ponieważ przeglądarka nadal będzie zajęta, dopóki ostatni skrypt nie zostanie całkowicie pobrany i przetworzony. Biorąc pod uwagę, że przeglądarka wydaje się zajęta, niektórzy odwiedzający mogą nie korzystać ze strony, dopóki nie zostanie ona całkowicie załadowana, co może mieć potencjalnie negatywne wrażenia użytkownika.

Sugestie od Google

Google ma mnóstwo zasobów do poprawy wydajności Twojej witryny. Mają nawet stronę poświęconą poprawie czasu ładowania skryptu witryny, którą możesz sprawdzić tutaj.

W menu po lewej stronie możesz również znaleźć inne zasoby, które pomogą Ci poprawić wydajność Twojej witryny. Sprawdź je również, jeśli Twoje PageSpeed ​​Insights zgłaszają problemy z nimi związane.

Aby uzyskać przegląd, Google sugeruje, aby zamiast tego wbudować skrypty krytyczne i albo asynchronicznie, albo odroczyć skrypty niekrytyczne. Oznacza to, że skrypty wymagane przez Twoją witrynę powinny być zamiast tego osadzone w kodzie HTML. Jest to jednak zadanie twórców motywów i wtyczek WordPress – ale jeśli chcesz stworzyć swój motyw lub wtyczkę, miej to na uwadze.

Czytaj więcej:  Jak zatrudnić (WSPANIAŁYCH) programistów Javascript

Oprócz tego Google przedstawił również sposób na ręczne zidentyfikowanie, który z Twoich skryptów blokuje renderowanie Twojej strony internetowej, mając bardzo długi czas ładowania. Możesz to zrobić, korzystając z narzędzi programistycznych Chrome pokrycie patka.

Odłóż nieużywany CSS

Podobnym problemem, który możesz obecnie zaobserwować, również w narzędziu analizy Pagespeed, jest odroczenie nieużywanego kodu CSS. Chociaż jest to podobny problem, jego korzenie są nieco inne. Zasadniczo CSS musiałby zostać zrestrukturyzowany, aby to naprawić poprawnie.

Często zadawane pytania

1. Jak naprawić odroczone parsowanie JavaScriptu w WordPressie?

Aby naprawić odroczone parsowanie kodu JavaScript w WordPressie, musisz wprowadzić kilka drobnych zmian w swoim kodzie. Możesz znaleźć wszystkie skrypty i dodać odraczać otaguj je lub możesz zainstalować wtyczkę, która robi to automatycznie. Możesz również utworzyć skrypt, który ładuje pliki asynchronicznie, jak pokazano w sekcji Jak odroczyć analizowanie kodu JavaScript przy użyciu sekcji skryptów tego artykułu.

2. Co to jest odroczony JavaScript?

Odroczone analizowanie kodu JavaScript to proces instruowania przeglądarki odwiedzających witrynę, aby załadowała określone pliki PO załadowaniu strony. Dzięki temu użytkownik może zobaczyć zawartość strony znacznie szybciej, niż gdybyś nie zaimplementował odroczonego parsowania JavaScript

3. Jaka jest różnica między asynchronicznym a odroczonym JavaScriptem?

Async oznacza, że ​​zawartość JavaScript jest ładowana jako własne nowe połączenie, równolegle do dowolnego istniejącego kodu. Dzięki asynchronii przeglądarka tworzy nowy wątek przetwarzania, który nie spowolni żadnych istniejących pobrań podczas pobierania i wykonywania kodu JavaScript. Z drugiej strony Defer prosi przeglądarkę o przeanalizowanie skryptu po pobraniu reszty treści. Chociaż zwykle jest to dobre dla szybkości, mogą wystąpić pewne problemy z treścią, jeśli odwołuje się do skryptu, który został odroczony (ponieważ nie będzie dostępny).

4. Jak zminimalizować JavaScript w WordPressie?

Aby zminimalizować JavaScript w WordPressie, musisz zaimplementować wtyczkę, która robi to automatycznie. Możesz przeczytać więcej na ten temat tutaj. 

Owijanie w górę

I właśnie byłeś świadkiem, jak odroczyć parsowanie JavaScriptu w WordPressie.

Dowiedzieliśmy się, że można to osiągnąć za pomocą wtyczek lub ręcznych poprawek. Ma mnóstwo zalet dla Twojej witryny, takich jak ulepszone SEO, lepsze wrażenia użytkownika i szybszy czas ładowania. Dlatego ważne jest, aby odroczyć jak najwięcej skryptów, aby uzyskać maksymalny wzrost wydajności.

Ale pamiętaj, zawsze twórz kopię zapasową i dużo testuj, aby upewnić się, że odroczyłeś poprawne skrypty! Może się to wydawać nudne, ale jeśli zostanie to zrobione prawidłowo, korzyści i korzyści są ogromne.

Jeśli chcesz naprawdę zmaksymalizować prędkość ładowania swojej witryny, sugerujemy pozostawienie tego profesjonalistom, takim jak faceci z WP Rocket, aby uzyskać maksymalne korzyści z tego i setek innych działań, aby Twoja witryna ładowała się szybciej.

Odwiedź WP Rocket, aby Twoja strona internetowa była szybsza już dziś  

O autorze

Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/

David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.