Jak odroczyć parsowanie JavaScript w WordPress

JavaScript jest jednym z najpopularniejszych języków programowania na świecie. Większość stron internetowych używa go do tworzenia bardziej dynamicznych doświadczeń dla odwiedzających. Krytyczne funkcje, takie jak formularze kontaktowe i analityka witryny, to tylko kilka sposobów codziennego wykorzystywania języka JavaScript w praktyce. Niestety, chociaż jest to bardzo przydatne, cały ten kod może spowolnić Twoją witrynę.

Odroczenie parsowania kodu JavaScript (nazywane też po prostu „odroczeniem kodu JavaScript”) oznacza nakazanie witrynie wczytania zbędnego kodu JavaScript na końcu. Ta prosta modyfikacja może poprawić czas ładowania strony i ogólną wydajność, w zależności od liczby skryptów używanych w Twojej witrynie.

W tym artykule dokładnie wyjaśnimy, czym jest parsowanie i z czym wiąże się odroczenie. Omówimy również, w jaki sposób odroczenie JavaScript może przynieść korzyści Twojej witrynie i pokażemy, jak to zrobić. Na koniec przedstawimy kilka często zadawanych pytań (FAQ), aby rozwiać wszelkie pozostałe wątpliwości.

Co oznacza „odroczenie parsowania JavaScript”?

Gdy odwiedzasz witrynę, Twoja przeglądarka żąda plików z serwera. Pliki te zawierają HTML, CSS i JavaScript, które przeglądarka może przeanalizować (zinterpretować) w celu stworzenia wizualnej i interaktywnej strony internetowej.

Witryny często wymagają od przeglądarki załadowania dziesiątek (a nawet setek) elementów i plików dla jednej strony. Oto krótki przykład z jednej ze stron Google, abyś mógł zobaczyć, ile plików wykorzystuje:

Gdy Twoja przeglądarka analizuje pliki HTML, zatrzymuje renderowanie znalezionego kodu CSS i wykonywanie kodu JavaScript. Dopóki przeglądarka nie zakończy wykonywania tego kodu, nie będzie kontynuować ładowania reszty strony.

W praktyce możesz nie zauważyć tego opóźnienia, jeśli Twoja witryna jest bardzo dobrze zoptymalizowana (jeśli ładuje się naprawdę szybko). Ale opóźnienie istnieje, a im więcej JavaScriptu używa Twoja witryna, tym dłużej może trwać. Jeśli Twoja witryna nie jest zoptymalizowana pod kątem wydajności, analiza kodu JavaScript może znacznie spowolnić czas jej ładowania.

Odroczenie parsowania kodu JavaScript oznacza poinformowanie przeglądarki: „Hej, jeśli natrafisz na ten kod JavaScript, nie analizuj go, dopóki nie skończysz z resztą strony”. Z perspektywy odwiedzającego oznacza to, że widoczne elementy strony będą ładować się szybciej. Następnie JavaScript zakończy działanie w tle i nikt nie będzie mądrzejszy (oprócz ciebie i przeglądarki).

Jakie są korzyści z odroczenia JavaScript?

Główną zaletą odroczenia obsługi JavaScript jest szybsze wczytywanie stron dla odwiedzających. Skrypty nadal będą musiały ładować się w tle, ale odroczenie ich powinno poprawić wynik LCP (Lightest Contentful Paint), który jest jednym z trzech podstawowych wskaźników Web Vital.

Należy pamiętać, że czas ładowania strony jest jednym z najważniejszych aspektów dobrego doświadczenia użytkownika. Jeśli ładowanie witryny trwa zbyt długo, zwykle tracisz pewien procent odwiedzających. Ponadto powolny czas ładowania może sprawiać wrażenie, że coś jest nie tak z Twoją witryną.

Jak odroczyć parsowanie JavaScript w WordPress

WordPress oferuje więcej niż jeden sposób optymalizacji witryny. Jeśli chodzi o odroczenie JavaScript, możesz użyć dwóch metod.

Pierwsza metoda jest najłatwiejsza, ponieważ wymaga użycia wtyczki.

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

Jeśli nie czujesz się komfortowo, edytując pliki swojej witryny i dodając do nich kod, najlepszym rozwiązaniem jest użycie wtyczki. Jednym z najlepszych narzędzi, których możesz użyć do odroczenia nieistotnego kodu JavaScript w WordPress, jest Jetpack Boost.

Jetpack Boost to darmowa wtyczka, której możesz użyć do optymalizacji wydajności witryny WordPress. Jest niezwykle prosty w konfiguracji, co czyni go doskonałym wyborem dla początkujących.

Po aktywacji wtyczki musisz połączyć się z kontem WordPress.com (możesz do tego użyć bezpłatnego konta).

Kiedy będziesz gotowy, przejdź do Jetpack → Boost na pulpicie nawigacyjnym WordPress , a otrzymasz szybki przegląd tego, jak Twoja witryna radzi sobie pod względem wydajności.

Jeśli spojrzysz na poniższe opcje, zobaczysz ustawienie Odrocz nieistotny JavaScript . Możesz przełączyć to ustawienie, aby automatycznie odroczyć analizę kodu JavaScript w całej witrynie.

Wtyczka określa nieistotny kod JavaScript, ponieważ wpływa tylko na skrypty, które nie są krytyczne dla witryny.

Po włączeniu tego ustawienia przejrzyj swoją witrynę, aby upewnić się, że wszystko działa dobrze. Jeśli zauważysz coś nieoczekiwanego, po prostu wyłącz tę funkcję.

Pamiętaj, że Jetpack Boost może również włączyć leniwe ładowanie i zoptymalizować CSS Twojej witryny. Oznacza to, że wtyczka przeniesie krytyczny kod CSS na początek każdego dokumentu HTML, aby przeglądarka najpierw go przeanalizowała. To ustawienie jest szczególnie ważne dla poprawienia wyniku opóźnienia pierwszego wejścia (FID).

2. Odłóż parsowanie JavaScript za pomocą functions.php plik

Druga metoda polega na edycji pliku functions.php motywu. Proces nie jest przesadnie skomplikowany, ale dodanie kodu do WordPressa może czasami skutkować nieoczekiwanymi efektami ubocznymi.

Ta metoda jest przeznaczona dla doświadczonych użytkowników, ponieważ wiele może się zdarzyć, jeśli usuniesz tylko jeden plik lub nawet przypadkowo dodasz spację w niewłaściwym miejscu. Pamiętaj, że będziesz chciał odłożyć tylko nieistotny JavaScript, aby uniknąć uszczerbku dla wygody użytkownika.

Dla bezpieczeństwa zalecamy wykonanie pełnej kopii zapasowej witryny przed edycją jakichkolwiek plików WordPress. Nawet jeśli masz ostatnią kopię zapasową, utwórz inną, aby mieć punkt przywracania przed wprowadzeniem jakichkolwiek zmian. Jeśli masz Jetpack VaultPress Backup, najnowsza wersja Twojej witryny zostanie już dla Ciebie zapisana.

Istnieją dwa sposoby edycji pliku functions.php . Możesz użyć edytora plików motywu WordPress, do którego masz dostęp z menu Wygląd . Pamiętaj, że ta opcja jest dostępna tylko wtedy, gdy nie używasz motywu blokowego obsługującego pełną edycję witryny (FSE).

Po uzyskaniu dostępu do edytora wybierz aktywny motyw z menu rozwijanego po prawej stronie i poszukaj pliku functions.php na liście.

Możesz użyć edytora, aby dodać lub usunąć kod z dowolnych plików motywu. Mimo to odradzamy modyfikowanie istniejącego kodu, chyba że rozumiesz jego cel.

Dodawanie kodu do functions.php powinno być bezpieczne, o ile pochodzi z zaufanego źródła. Poniższy fragment kodu skonfiguruje Twoją witrynę w celu odroczenia analizy kodu JavaScript:

 function defer_js( $url ) {    if ( is_user_logged_in() ) return $url;     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_js', 11 );

Ten kod automatycznie opóźni wszystkie JavaScript w Twojej witrynie, ale nie wpłynie na skrypty jQuery. Jednak nie będzie działać, jeśli jesteś zalogowany, aby uniknąć problemów z nieprawidłowym ładowaniem pulpitu nawigacyjnego.

Dodaj ten skrypt na końcu pliku functions.php , aby nie kolidował z żadnym innym kodem w środku. Kliknij Aktualizuj plik u dołu strony i to wszystko!

Jeśli nie masz dostępu do edytora plików motywu WordPress, ale swobodnie pracujesz z kodem na serwerze, możesz edytować plik functions.php , łącząc się ze swoją witryną za pośrednictwem protokołu przesyłania plików (FTP). Aby to zrobić, musisz użyć klienta FTP, takiego jak FileZilla. Pamiętaj, zanim cokolwiek zrobisz, wykonaj pełną kopię zapasową witryny.

Po połączeniu się z serwerem witryny musisz znaleźć folder główny WordPress. Jest to folder zawierający wszystkie pliki Twojej witryny. Zwykle nosi nazwę www, public_html lub nazwę Twojej witryny.

Otwórz ten folder i przejdź do wp-content/themes . Powinno istnieć kilka folderów, po jednym dla każdego motywu zainstalowanego w Twojej witrynie. Zidentyfikuj folder aktywnego motywu i otwórz go. Plik functions.php powinien znajdować się w środku.

Kliknij ten plik prawym przyciskiem myszy i poszukaj opcji, która mówi coś w rodzaju Edytuj (będzie się to różnić w zależności od używanego klienta FTP). Ta opcja otworzy plik przy użyciu domyślnego edytora tekstu. W tym miejscu możesz dodać fragment kodu, który udostępniliśmy wcześniej, a następnie zapisać zmiany w pliku.

Te same zasady obowiązują podczas edycji plików WordPress przez FTP. Nie edytuj żadnego kodu, jeśli nie masz pewności, co robi, i uważaj na dodawanie fragmentów kodu, chyba że ufasz ich źródłu.

Zawsze możesz przywrócić witrynę WordPress, korzystając z ostatniej kopii zapasowej, jeśli po edycji pliku functions.php wystąpią błędy. Jetpack VaultPress Backup to fantastyczna opcja w takich przypadkach, ponieważ oferuje funkcję przywracania jednym kliknięciem, nawet jeśli witryna jest całkowicie niedostępna.

Często zadawane pytania dotyczące odraczania JavaScript

Jeśli nadal masz pytania dotyczące działania odroczonego JavaScriptu, w tej sekcji znajdziesz odpowiedzi. Zacznijmy od omówienia potencjalnych skutków ubocznych odkładania skryptów.

Czy odroczenie JavaScript może zepsuć Twoją witrynę?

Tak, w zależności od używanych wtyczek i motywu możliwe jest, że odroczenie JavaScript może spowodować uszkodzenie niektórych elementów Twojej witryny. A jeśli korzystasz z metody ręcznej, błąd w kodzie może całkowicie wyłączyć Twoją witrynę.

Dlatego najbezpieczniej jest użyć narzędzia takiego jak Jetpack Boost, aby zająć się tym zadaniem. Chociaż nadal możliwe jest, że odroczenie JavaScript może spowodować problem, możesz łatwo całkowicie dezaktywować tę funkcję lub wtyczkę.

Czy odroczenie parsowania kodu JavaScript to to samo, co „usunięcie kodu JavaScript blokującego renderowanie”?

Jeśli korzystasz z usług pomiaru wydajności witryny, takich jak PageSpeed ​​Insights lub GTMetrix, możesz zauważyć, że zalecają one również wyeliminowanie kodu JavaScript blokującego renderowanie z Twojej witryny. Ze względu na język łatwo pomylić tę sugestię optymalizacji z odroczeniem parsowania JavaScript.

JavaScript blokujący renderowanie odnosi się do dowolnego kodu, który blokuje renderowanie witryny. W wielu przypadkach najlepszym rozwiązaniem jest wyeliminowanie tego kodu, jeśli nie spełnia on określonego celu. Jeśli ma funkcję, możesz zamiast tego ją odroczyć.

Określenie, które skrypty są potrzebne, a które nie, będzie zależeć od twojego osądu. Ale usługi takie jak GTMetrix mogą pomóc Ci zidentyfikować nieużywany JavaScript w Twojej witrynie.

Wszelkie skrypty należące do tej kategorii powinny być bezpieczne do usunięcia. W przypadku innych skryptów możesz użyć wtyczek (takich jak Jetpack Boost) lub ręcznie zmodyfikować plik functions.php , aby je odroczyć.

Czy mogę bezpiecznie usunąć JavaScript zamiast go odkładać?

To zależy od tego, do jakich skryptów się odnosisz. Często zdarza się, że witryny WordPress gromadzą nieużywany kod w miarę ich wzrostu. Dzieje się tak, gdy instalujesz i dezaktywujesz wtyczki, wypróbowujesz usługi innych firm i przestajesz z nich korzystać.

Pozostawienie „osieroconego” kodu JavaScript w witrynie może czasami stwarzać zagrożenie dla bezpieczeństwa. Co więcej, może to wpłynąć na wydajność Twojej witryny, ponieważ przeglądarki mogą nadal wymagać jej przeanalizowania.

Jeśli sprawdziłeś poprzednie pytanie, pokażemy Ci, jak używać GTMetrix do identyfikowania kodu JavaScript w Twojej witrynie, który możesz bezpiecznie usunąć.

Czy odroczenie JavaScript poprawia wydajność strony?

Opóźnienie JavaScript powinno przyspieszyć ładowanie stron Twojej witryny. O ile szybciej będzie zależeć od liczby skryptów, które odkładasz i jak dobrze zoptymalizowana jest Twoja witryna.

Jeśli masz już szybką stronę internetową i podjąłeś kroki w celu jej optymalizacji, takie jak usunięcie nieużywanych skryptów, odroczenie JavaScript może nie mieć znaczącego wpływu. Mimo to każda optymalizacja ma znaczenie, jeśli chodzi o wydajność strony.

Co jeszcze mogę zrobić, aby poprawić szybkość ładowania strony?

Istnieje wiele sposobów na poprawę szybkości ładowania strony w witrynie. Oto optymalizacje, które sugerujemy wdrożyć, aby uzyskać największy efekt:

1. Rozważ skorzystanie z usług zarządzanego dostawcy hostingu WordPress.
2. Zaimplementuj sieć dostarczania treści (CDN).
3. Ulepsz podstawowe wskaźniki internetowe w WordPress.
4. Zminimalizuj CSS.
5. Włącz leniwe ładowanie w WordPress.

Optymalizacja witryny pod kątem wydajności może trochę potrwać, ale wtyczki WordPress, takie jak Jetpack i Jetpack Boost, znacznie ułatwiają i przyspieszają ten proces.

Pamiętaj, że każdy wysiłek włożony w poprawę szybkości ładowania strony z czasem zwróci się z nawiązką. Jeśli możesz utrzymać witrynę w jak najlepszym stanie, Twoi goście będą mieli o wiele lepsze wrażenia.

Popraw wydajność swojej witryny już dziś

Istnieje wiele zmian, które możesz wprowadzić w swojej witrynie, aby poprawić jej wydajność. Jeśli używasz w swojej witrynie wielu skryptów i wtyczek innych firm, prawdopodobnie w tle działa dużo kodu JavaScript. Ten kod jest ważny, ale może uniemożliwić ładowanie reszty witryny tak szybko, jak to możliwe.

Odroczenie parsowania JavaScript w WordPress jest łatwiejsze niż myślisz i może znacząco wpłynąć na wydajność Twojej witryny. Oto sposoby na odroczenie parsowania JavaScript:

1. Użyj wtyczki, takiej jak Jetpack Boost.
2. Odrocz JavaScript za pomocą pliku functions.php .

Jetpack oferuje kilka wtyczek poprawiających wydajność Twojej witryny WordPress. Jetpack Boost to tylko jeden z nich. Jeśli korzystasz z wtyczki Jetpack, uzyskujesz również dostęp do bezpłatnego CDN, który może drastycznie poprawić szybkość ładowania Twojej witryny. Rozważ rozpoczęcie pracy z Jetpack już dziś!