Odroczenie parsowania Javascript — 5 sposobów na naprawę i zwiększenie szybkości (2025)

Jako ktoś, kto próbuje zrozumieć, jak odroczyć parsowanie JavaScript, uważamy, że masz problem. Posiadasz lub odwiedziłeś stronę internetową kogoś, kogo znasz (może klienta?) i ładowanie jej trwa wieczność. A gdy przepuściłeś ją przez narzędzia do testowania szybkości witryny, otrzymałeś rekomendację, której nie wiesz, jak wdrożyć.

W tym artykule podzielimy się kilkoma sposobami na odroczenie wykonania kodu JavaScript i naprawienie tego ostrzeżenia, a ostatecznie na przyspieszenie ładowania się witryny bez wyświetlania tego błędu!

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

Instrukcje dotyczące sposobu odroczenia analizy składniowej JavaScript

1. Pobierz wtyczkę Async tutaj.
2. Kliknij na Wtyczki > Dodaj nowy > Wtyczka do przesyłania i wybierz pobrany plik.
3. Kliknij na Aktywuj zainstalowanej wtyczki.
4. Przejdź do Wtyczek i kliknij Ustawienia dla wtyczki Async, którą właśnie zainstalowałeś.
5. Kliknięcie na Włącz asynchroniczny JavaScriptlub Zastosuj asynchronicznie jako dwa najczęstsze sposoby zastosowania tej poprawki.
6. Przetestuj swoją witrynę, aby upewnić się, że wszystko nadal działa prawidłowo.

 

Dlaczego procedura implementacji opóźnionego parsowania JavaScript jest ważna? Jeśli nie opóźnisz parsowania JavaScript, Twoja strona będzie sprawiać wrażenie, że ładuje się powoli. JavaScript jest zasadniczo ważnym elementem składowym języka sieci, pozwala programistom internetowym tworzyć „dynamiczną” funkcjonalność.

Jednak w większości przypadków pliki Javascript mają tendencję do stawania się dość duże. Mogą również pobierać dane z serwerów stron trzecich. To sprawia, że ​​pobieranie jest powolne. Ale to tylko połowa problemu.

Największym problemem jest to, że jeśli nie ma defer parsowania Javascript, przeglądarka jest ZABLOKOWANA przed wyświetlaniem treści. Strona internetowa NIE RENDERUJE się. A jak to wygląda dla użytkownika? Wygląda na to, że strona jest albo wolna, albo zepsuta, albo całkowicie martwa. 

Problem ten jest jeszcze poważniejszy na urządzeniach mobilnych, gdzie dostępna moc obliczeniowa w połączeniu z dostępną przepustowością sprawiają, że jakość korzystania z Internetu jest jeszcze gorsza.

A co zrobią użytkownicy, którzy doświadczą czegoś takiego? Odwrócą się od Twojej strony i nigdy do niej nie wrócą!

Jeśli działasz w branży internetowej od jakiegoś czasu i chcesz poprawić SEO swojej witryny, wiesz już, że wydajność witryny jest istotny w poprawie widoczności Twojej witryny w wyszukiwarkach.

A jeśli sprawdziłeś swoją witrynę za pomocą narzędzia Google PageSpeed ​​Insights, oprócz „odroczenia analizowania JavaScriptu” pojawiają się jeszcze bardziej tajemnicze ostrzeżenia, na przykład „Wyeliminuj zasoby blokujące renderowanie”.

 

Wygląda na to, że te techniczne kwestie 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 sprawić, że Twoje strony będą się ładować szybciej!

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

Obejrzyj poniższy krótki film, aby przekonać się, jak łatwo jest odroczyć parsowanie kodu JavaScript, korzystając z jednej z poniższych metod:

https://www.youtube.com/watch?v=mZNfo71y1_8

Mówiąc prościej, oznacza to, że musisz zmienić kilka rzeczy w WordPressie, aby strona mogła najpierw załadować Twoją treść, a dopiero potem załadować lub przeanalizować pliki JavaScript. 

Dzieje się tak, ponieważ jeśli nie odłożysz parsowania JavaScriptu, renderowanie strony internetowej staje się bardzo uciążliwą operacją i, jak już wspomnieliśmy powyżej, strona będzie wyglądać, jakby była uszkodzona.

Aby mieć pewność, że użytkownik pozostanie na stronie, chcemy dać mu znać, że coś się faktycznie dzieje, i pokazać mu treść, zamiast czekać, aż przeglądarka wykona całą pracę, zanim faktycznie pokaże użytkownikowi cokolwiek. 

Nawiasem mówiąc, jeśli chcesz przyspieszyć działanie swojego WordPressa, istnieje kilka wtyczek, takich jak: ten co może mieć realny wpływ na wydajność w ciągu kilku minut (przy niewielkim lub zerowym wysiłku).

Jeśli jesteś zainteresowany, WP Rocket możesz skonfigurować opóźnione parsowanie JavaScriptu i wiele innych ulepszeń, które przyspieszą działanie Twojej witryny. Wystarczy kliknąć baner poniżej, aby to sprawdzić. 

Nie jesteś gotowy na użycie wtyczki na razie? Czytaj dalej... 

Czym jest Defer Parsing JavaScript?

Odroczenie analizy JavaScript oznacza użycie „defer"Lub"async„aby uniknąć blokowania renderowania strony. To polecenie HTML instruuje przeglądarkę, aby wykonywała/analizowała skrypty po (opóźnieniu) lub asynchronicznie (równolegle) ładowaniu strony. Pozwala to na wyświetlanie treści bez czekania na załadowanie skryptów.

Dzięki skonfigurowaniu opóźnionego analizowania kodu JavaScript Twoje treści będą ładowane szybciej i z wyższym priorytetem.

Dlaczego tak jest?

Poniżej znajdziesz doskonałe wyjaśnienie, w jaki sposób ładowane są strony internetowe i jak pliki JavaScript znacznie spowalniają czas ładowania Twojej witryny.

https://www.youtube.com/watch?v=BMuFBYw91UQ

Kontynuując oglądanie powyższego filmu, przyjrzyjmy się pokrótce temu, co się dzieje, gdy ktoś odwiedza Twoją witrynę: 

1. Gdy użytkownik kliknie link prowadzący do Twojej witryny, przeglądarka użytkownika wyśle ​​żądanie do Twojego serwera, który następnie „prześle” je przeglądarce użytkownika.
2. Przeglądarka użytkownika otrzymuje i widzi zawartość HTML Twojej strony internetowej i zaczyna ją renderować. Rozpoczyna budowanie Twojej strony internetowej od góry do dołu.
3. Jeśli w trakcie wyszukiwania znajdzie pliki JavaScript, przeglądarka zatrzyma się i je pobierze (jeśli jest to plik zewnętrzny), a następnie je przeanalizuje
4. Dopiero po całkowitym pobraniu i przeanalizowaniu każdego skryptu będzie można kontynuować ładowanie reszty zawartości.

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

Jeśli na Twoich stronach znajduje się dużo plików JavaScript, może to mieć poważny i negatywny wpływ na czas ładowania witryny.

Przeglądarka użytkownika będzie cały czas wyświetlać ikonę ładowania lub kręcące się kółko podczas analizowania i ładowania skryptów, zanim wyświetli faktyczną treść — jest to szczególnie widoczne w przeglądarkach mobilnych lub u użytkowników korzystających z połączeń o niskiej przepustowości.

Jeśli potrwa to dłużej niż kilka sekund, zwłaszcza gdy skrypty są obsługiwane z serwera zewnętrznego (a ten serwer ma akurat jakieś problemy) — odwiedzający zaczną się denerwować.

W tym czasie użytkownik nie widzi nic poza białą, pustą stroną. Czy to nie jest jedna z najbardziej frustrujących rzeczy w internecie? Wszystko powinno być natychmiastowe w sieci, dlaczego więc muszą czekać, aż Twoja strona się załaduje?

Jeśli użytkownik zaczeka dłużej niż 4 sekundy, zacznie się denerwować. Po 8 sekundach Twoja strona internetowa jest tak dobra, że ​​jest martwa - użytkownik odbije się do innej strony.

Straciłeś odwiedzającego, a prawdopodobnie i jego biznes. 

Dodatkowym utrudnieniem jest to, że często pliki JS są dodawane do witryny przez zainstalowane przez Ciebie wtyczki i motywy, przez co nie możesz się ich tak łatwo pozbyć.

Więc co robisz?

Aby rozwiązać ten problem, musisz odroczyć parsowanie JavaScript. Działa to poprzez parsowanie skryptów po załadowaniu głównej zawartości. Sprawdź poniższy obraz, aby zobaczyć dokładnie wpływ na czas ładowania. Jak widać, polecenie defer zmusza przeglądarkę do wykonania JavaScript później, podczas gdy polecenie async pozwala na wykonywanie rzeczy równolegle do pobierania.

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

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

Ale jak to zrobić w WordPressie? A także, kiedy jest właściwy czas, aby ich użyć? Zobaczmy i zacznijmy!

Przeanalizuj swoją witrynę internetową

Zanim zaczniemy, musisz wiedzieć, czy musisz wdrożyć poprawkę defer Javascript na swojej stronie, czy nie. Aby się dowiedzieć, czy musisz, możesz skorzystać z kilku narzędzi, które są łatwo dostępne online.

Oto kilka przykładów:

1. GTMetrix

Ten działa poprzez sprawdzanie metryk PageSpeed ​​i Yslow i daje wynik od F do A. Podaje również zalecenia, a także wskazówki, jak ulepszyć swoją witrynę, jeśli zostaną znalezione problemy. W szczególności powie Ci, czy musisz odłożyć parsowanie JavaScript. 

Generalnie wynik powinien wynosić co najmniej 71.

Na poniższym rysunku pokazano witrynę internetową, której nie trzeba odkładać. 

2. Narzędzia PageSpeed

PageSpeed ​​Insights to narzędzie opracowane przez Google. To kolejne kompleksowe rozwiązanie, które dostarcza szczegółowych informacji na temat problemów z wydajnością witryny, a także wskazówek, jak je rozwiązać, podobnie jak GTMetrix.

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

3. Narzędzia Pingdom 

Kolejne popularne narzędzie do testowania wydajności stron internetowych, z którego każdy może korzystać bezpłatnie.

Chociaż nie jest wyraźnie powiedziane, czy należy odłożyć parsowanie JavaScript, możesz sprawdzić, ile czasu zajęło załadowanie skryptów, korzystając ze strony z kompleksowymi wynikami.

Na poniższym obrazku widać witrynę, której prawie połowa strony składa się z kodu JavaScript — to dobry sygnał, że warto odłożyć wykonywanie skryptów. 

4.  Varvy PageSpeed 

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

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

Okej, spoko!

Teraz masz dostęp do narzędzi, które pomogą Ci określić, czy konieczne jest wdrożenie odroczonego parsowania plików JavaScript.

Ale możesz zapytać, dlaczego po prostu tego nie zaimplementować i zostawić w spokoju? Jeśli odłożysz parsowanie JavaScript, niepoprawne działanie może się zepsuć i może być frustrujące, jeśli nie jesteś obeznany z technologią.

Samo włączenie trybu defer nie oznacza, że ​​wszystko jest ustawione na zapomnienie i będzie działać prawidłowo. Musisz sprawdzić, czy zrobiłeś to poprawnie i upewnić się, że wszystko nadal działa zgodnie z przeznaczeniem. 

Na przykład, jeśli używasz jQuery, musisz ostrożnie wybierać, które skrypty powinieneś odłożyć, ponieważ wydaje się, że istnieje problem z defer i jQuery.

Oprócz tego na Stack Overflow znajdziesz mnóstwo pytań dotyczących jQuery, async i defer, które często dotyczą tego, jak należy implementować defer i async, jeśli w ogóle to konieczne, w skryptach opartych na jQuery. 

Więc jakie są wyniki? Czy musisz odłożyć swoje skrypty?

Jeśli tak, to dowiedzmy się teraz, jak odłożyć JavaScript w WordPressie!

Jak odroczyć parsowanie JavaScript w WordPressie

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

Możesz po prostu zainstalować jedną z tysięcy wtyczek w repozytorium WordPress i gotowe. Istnieją jednak również zaawansowane sposoby, aby to zrobić, jeśli potrzebujesz większej kontroli, zwłaszcza jeśli używasz złożonych skryptów, aby uczynić swoją witrynę bardziej angażującą i interaktywną. 

W tej sekcji sprawdzimy pięć różnych sposobów odroczenia parsowania JavaScript w WordPressie: za pomocą wtyczek, za pomocą pliku functions.php oraz ręcznie edytując kod. 

W repozytorium WordPress znajduje się wiele wtyczek, które mogą pomóc Ci poprawić wydajność Twojej witryny.

Istnieją wtyczki dedykowane konkretnemu zadaniu, takiemu jak minimalizowanie kodu HTML, a także takie, które próbują zawrzeć wszystkie poprawki związane z wydajnością w jednej wtyczce, takie jak możliwość minimalizacji i odkładania plików CSS i JavaScript, implementacji i wykorzystania buforowania przeglądarki (o czym szczegółowo pisaliś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 nie działają wcale i mogą nawet zepsuć część lub całość funkcjonalności Twojej witryny. 

(Jeśli wolisz, aby ktoś doświadczony zajął się tym za Ciebie, możesz to zrobić, korzystając z taniego zlecenia na Fiverr, klikając poniższy przycisk.)

1. Odłóż parsowanie JavaScript za pomocą wtyczki Async

Mówiąc szczerze, zdecydowanie sugerujemy wybranie wtyczki premium (która jest bardzo tania), ale masz pewność, że rozwiąże ona nie tylko to ostrzeżenie, ale również cały szereg problemów z szybkością ładowania się witryny.

Zaczniemy od jednego z najpopularniejszych, służącego do wykonywania pojedynczego zadania zdefiniowanego w tym artykule.

Jednym z najpopularniejszych wyborów do wykonania tej pracy jest Async Javascript. Ta wtyczka koncentruje się na poprawie wydajności Twojej witryny poprzez dostosowanie sposobu ł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 należy wykonać, aby użyć tej wtyczki.

1. Pobierz wtyczkę Async tutaj.
2. Kliknij na Wtyczki> Dodaj nowy w zapleczu WP.
3. Kliknij na Wtyczka do przesyłania i wybierz pobrany plik.
4. Możesz również wyszukać Async Javascript i kliknąć zainstaluj teraz.
5. Kliknij na Aktywuj zainstalowanej wtyczki.
6. Przejdź do Wtyczek i kliknij Ustawienia dla wtyczki Async, którą właśnie zainstalowałeś.
7. Sugerujemy kliknięcie Włącz asynchroniczny JavaScriptlub Zastosuj asynchronicznie jako dwa najczęstsze sposoby zastosowania tej poprawki.
8. Jeśli te sposoby nie pomogą, możesz wypróbować kilka innych kombinacji.
9. Przetestuj swoją witrynę, aby upewnić się, że wszystko nadal działa prawidłowo.

Jedną z jego zalet jest prawdopodobnie to, że oprócz możliwości wykluczenia niektórych skryptów z odroczenia, masz także możliwość wyboru skryptów, które mają zostać odroczone:

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

Jedną z unikalnych cech tej wtyczki jest to, że można wykluczyć konkretny motyw lub wtyczkę.

Istnieje również opcja zintegrowania GTMetrix na Twojej stronie, dzięki czemu zawsze możesz sprawdzić jej wydajność. Pamiętaj jednak, że za każdym razem, gdy wykonasz 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 3 ostatnimi głównymi wersjami, więc zdecydowanie zalecamy, abyś jej nie używał. Może nadal działać, ale nie jest testowana, więc jest to ryzyko, którego nie powinieneś podejmować.

Jeśli masz stosunkowo prostą witrynę i chcesz jeszcze bardziej poprawić czasy ładowania, to może być to właśnie to, czego potrzebujesz. Ta wtyczka nie wymaga żadnej konfiguracji — wystarczy zainstalować, aktywować i zapomnieć.

Ponownie, pamiętaj, że ta opcja nie jest polecana do złożonych witryn, takich jak e-commerce, ze względu na brak zaawansowanych opcji dostrajania i ze względu na swój wiek. Możliwość dostrojenia opcji odraczania JavaScript jest kluczowa dla dużych i złożonych witryn.

2. Rakieta WP

Obecnie wiodąca wtyczka wydajnościowa WordPress, WP Rocket oferuje nie tylko możliwość odroczenia parsowania 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 Twojej witryny, dzięki czemu ładuje się szybciej. Robi to poprzez usuwanie białych spacji i innych niepotrzebnych znaków z kodu bez wpływu na jego podstawową funkcjonalność.
• Konkatenacja – łączy wiele plików CSS i JavaScript w jeden.
• Lazy loading - to tryb odroczenia dla plików wideo i innych treści multimedialnych, takich jak obrazy. Opóźnia ładowanie tych intensywnie wykorzystujących zasoby plików do momentu, aż użytkownik 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 zauważysz poprawę wydajności.

Możesz jednak skonfigurować zaawansowane ustawienia, aby uzyskać jeszcze większą wydajność, ale pamiętaj, że niektóre z nich mogą mieć negatywny wpływ na Twoją witrynę. Z tego powodu ich opcja odraczania dla plików JavaScript i CSS nie jest domyślnie włączona, ponieważ jeśli zostanie wykonana nieostrożnie, może coś zepsuć.

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

Możesz najpierw spróbować wykluczyć wszystkie skrypty, a następnie odłożyć parsowanie plików JavaScript jeden po drugim, aż znajdziesz problematyczny. Mają obszerna dokumentacja aby Ci w tym pomóc. W ten sposób będziesz w stanie zmaksymalizować poprawę wydajności bez przerywania lub poświęcania niektórych lub wszystkich funkcjonalności Twojej witryny.

WP Rocket to wtyczka premium, ale biorąc pod uwagę cenę i funkcjonalność (nie tylko odkładanie i synchronizowanie plików JS, ale także wiele innych optymalizacji, które są gwarantowane aby przyspieszyć działanie Twojej witryny), uważamy, że jest to warte swojej ceny.

Pobierz WP Rocket

3. Pakiet przyspieszacza prędkości

Inną świetną, uniwersalną wtyczką zwiększającą wydajność, która umożliwia odroczenie analizowania plików JavaScript, jest Pakiet przyspieszacza prędkości. Jest podobny do WP Rocket pod względem funkcji, ale jest darmowy. Ma większość podstawowych funkcji WP Rocket, takich jak minifikacja, odraczanie, usuwanie niepotrzebnych plików itp.

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

 

W zakładce Zaawansowane możesz wybrać, czy chcesz wykluczyć niektóre skrypty z przeniesienia do stopki, czy z odroczenia, czy z obu. Możesz jednak dodać maksymalnie 4 wykluczone skrypty, co jest z pewnością 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 stron.

4. Korzystanie z poprawek functions.php

A co jeśli nie chcesz używać wtyczek?

Istnieje jeszcze jeden sposób, dzięki któremu możesz odroczyć parsowanie kodu JavaScript w WordPressie. Polega on na edycji pliku functions.php motywu.

Po prostu skopiuj poniższy kod i wklej go na dole pliku function.php swojego 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 bądź ostrożny i upewnij się, że edytujesz właściwy plik w odpowiednim motywie i że wklejasz fragment kodu w odpowiednim miejscu. Upewnij się, że nie usuniesz/nie zmienisz niczego innego.

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

Czytaj więcej: Blokowanie wiadomości jest aktywne

5. Ręczna modyfikacja kodu

Może to brzmieć przerażająco, zwłaszcza jeśli nie jesteś fanem kodowania, ale dla zaawansowanych użytkowników ręczne modyfikowanie kodu jest świetnym sposobem na odroczenie analizowania plików JavaScript w WordPressie. 

Varvy ma świetny fragment kodu, który pozwala na 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 pobierzJSAtOnload() {
    var element = document.createElement("script");
    element.src = "//www.twojadomena.com/defer.js";
    document.body.appendChild(element);
  }
  jeśli (window.addEventListener)
    window.addEventListener("ładuj", pobierzJSAtOnload, false);
  w przeciwnym razie (window.attachEvent)
    window.attachEvent("onload", pobierzJSAtOnload);
  w przeciwnym razie window.onload = downloadJSAtOnload;

Zastąp defer.js własnym plikiem skryptu. Po jego edycji, aby odzwierciedlał Twój własny skrypt, wklej go tuż przed Twoimi plikami HTML tag. W WordPressie możesz to zrobić, edytując plik footer.php swojego motywu.

Ponownie, zaleca się użycie motywu potomnego, jeśli chcesz edytować pliki motywu. Mała uwaga: edycja pliku footer.php za pomocą motywu potomnego różni się od edycji pliku 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ć edycje. 

Jeśli nie chcesz mieć kłopotu z 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”, kliknąć „Zapisz”, a skrypt zostanie dodany do 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, odwiedź strony GTMetrix.com, PageSpeed ​​Insights i Pingdom Tools i sprawdź, czy wydajność i czas ładowania uległy poprawie.

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

 

W PageSpeed ​​Insights poszukaj „pierwszych malowań”:

Ogólnie rzecz biorąc, gdy testujesz, czy implementacja opóźnionego analizowania JavaScript spowodowała opóźnienie wykonania skryptów, staraj się uzyskać zielone wyniki w First Contentful Paint i First Meaningful Paint.

Porównaj stan przed i po odroczeniu i sprawdź, czy nastąpiła poprawa.

W przypadku Pingdom Tools sprawdź sekcję kolejności ładowania i sprawdź, czy większość, jeśli nie wszystkie, plików skryptów jest ładowana jako ostatnia. Porównaj przed i po odroczeniu i sprawdź, czy pliki skryptów 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 poeksperymentować więcej. Jeśli użyłeś innych metod z naszej listy, spróbuj użyć zaawansowanych wtyczek, które pozwolą Ci jeszcze bardziej dostosować opcje odraczania i wydajności. Ponadto sprawdź kilka rekomendacji od Google w następnej sekcji. Mogą Ci pomóc.

 

Jak opóźnić parsowanie JavaScript za pomocą skryptu

Istnieją różne techniki, których możesz użyć, aby odroczyć parsowanie JavaScript. Następna sekcja omawia, co musisz zrobić. 

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

1. Skopiuj poniższy kod i dodaj go tuż przed w swoim kodzie HTML.
2. Zastąp 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, aby wywołać zewnętrzny plik JS po zakończeniu ładowania strony początkowej. Na varvy.com Patrick Sexton sugeruje metodę, która pozwala na załadowanie zawartości witryny przed załadowaniem JS (aby zapewnić, że użytkownik najpierw zobaczy zawartość). Dzięki temu krytyczna ścieżka ładowania nie zostanie naruszona przez skrypty powodujące jakiekolwiek blokowanie renderowania. Metoda polega na utworzeniu zewnętrznego pliku, który nie jest wymagany do początkowego wyświetlenia zawartości. Następnie dodaj następujący skrypt tuż przed w 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 internetowej rozpocznie się pobieranie i wykonywanie skryptu przykład.js - problem polega na tym, że będziesz musiał utworzyć plik ręcznie.

• Korzystanie z atrybutów async lub defer. Znacznik JS async or odraczać Atrybuty działają w podobny sposób - ich działanie polega na minimalizowaniu czasu, w którym parsowanie HTML jest zatrzymywane w celu oczekiwania na pobranie i wykonanie skryptów. Asynchronizacja pozwala na pobieranie plików JS asynchronicznie, a nie synchronicznie, tzn. otwierany jest nowy wątek do pobrania, podczas gdy HTML kontynuuje parsowanie. Defer instruuje przeglądarkę, aby wykonała skrypt PO zakończeniu ładowania strony. Jest to kolejny sposób, aby umożliwić ukończenie parsowania strony, a tym samym nie wpływać na czas ładowania. Oba te znaczniki minimalizują blokowanie renderowania JS. Podczas korzystania z obu z nich JS nie musi czekać, aż HTML zakończy parsowanie przed rozpoczęciem pobierania lub wykonywania — co zapewnia, że ​​strona nadal ładuje się szybko. Zobacz, jak odbywa się wykonywanie odpowiednio dla async i defer na poniższych obrazach.
  
  

• Przenieś JavaScript na dół swojej strony. Trzecia i ostatnia sugestia to przeniesienie dowolnego <script> tagi na dole stron (szczególnie jeśli nie są krytyczne, takie jak reklamy). Ta metoda nie jest idealna, ponieważ przeglądarka nadal będzie zajęta, dopóki ostatni skrypt nie zostanie całkowicie pobrany i przeanalizowany. Biorąc pod uwagę, że przeglądarka wydaje się zajęta, niektórzy odwiedzający mogą nie angażować się w stronę, dopóki nie zostanie ona całkowicie załadowana, co może skutkować potencjalnie negatywnym doświadczeniem 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 Twojej 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. Upewnij się, że je również sprawdzisz, jeśli raport PageSpeed ​​Insights zgłaszał problemy z nimi związane.

W celu uzyskania przeglądu Google sugeruje, aby zamiast tego wstawiać krytyczne skrypty i albo asynchronicznie, albo odraczać niekrytyczne skrypty. Oznacza to, że skrypty wymagane przez Twoją witrynę powinny być osadzone w kodzie HTML. Jest to jednak zadanie programistów motywów i wtyczek WordPress — ale jeśli miałbyś tworzyć swój motyw lub wtyczkę, miej to na uwadze.

Czytaj więcej:  Jak zatrudnić (ŚWIETNYCH) programistów JavaScript

Oprócz tego Google przedstawiło również sposób ręcznego identyfikowania skryptów blokujących renderowanie strony internetowej, które mają bardzo długi czas ładowania. Możesz to zrobić, korzystając z narzędzi deweloperskich Chrome'a pokrycie patka.

Odłóż nieużywany CSS

Podobny problem, który możesz zobaczyć w dzisiejszych czasach, również w narzędziu Pagespeed insights, to Defer of Unused CSS. Chociaż jest to podobny problem, jego korzenie są nieco inne. Zasadniczo CSS musiałby zostać przebudowany, aby naprawić to poprawnie.

{pozycja ładowania imh-embed}

Często zadawane pytania

Jak naprawić opóźnione parsowanie JavaScript w WordPressie?

Aby naprawić opóźnione parsowanie JavaScript w WordPressie, musisz wprowadzić drobne zmiany w kodzie. Możesz znaleźć wszystkie skrypty i dodać odraczać tag do nich, 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 opóźnić parsowanie JavaScript za pomocą skryptu tego artykułu.

Czym jest defer JavaScript?

Odroczenie parsowania Javascript to proces instruowania przeglądarki odwiedzających Twoją witrynę, aby ładowała określone pliki PO załadowaniu strony. Dzięki temu użytkownik może zobaczyć zawartość strony znacznie szybciej niż w przypadku, gdybyś nie wdrożył odroczenia parsowania Javascript

Jaka jest różnica między async i defer Javascript?

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

Jak zminimalizować kod 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ę

Właśnie zobaczyłeś, jak odroczyć parsowanie JavaScript w WordPressie.

Dowiedzieliśmy się, że można to osiągnąć za pomocą wtyczek lub ręcznych poprawek. Ma to mnóstwo zalet dla Twojej witryny, takich jak ulepszone SEO, lepsze wrażenia użytkownika i szybsze czasy ładowania. Dlatego ważne jest, aby upewnić się, że odkładasz jak najwięcej skryptów, aby uzyskać maksymalne zyski wydajnościowe.

Ale pamiętaj, zawsze rób kopię zapasową i testuj dużo, aby mieć pewność, że odłożyłeś właściwe skrypty! Może się to wydawać żmudne, ale jeśli zrobisz to dobrze, korzyści i zyski będą ogromne.

Jeśli naprawdę chcesz zmaksymalizować szybkość ładowania swojej witryny, sugerujemy pozostawienie tego profesjonalistom, takim jak ekipa WP Rocket, aby uzyskać maksymalne korzyści z tego i setek innych działań, które przyspieszą ładowanie Twojej witryny.

Odwiedź WP Rocket, aby przyspieszyć działanie swojej witryny już dziś