Jak zmniejszyć nieużywany JavaScript w WordPressie – 14 metod, które powinieneś przetestować

Czy chcesz ograniczyć nieużywany JavaScript w WordPress? Jeśli szukasz przewodnika krok po kroku, czytaj dalej ten artykuł.

Jak sama nazwa wskazuje, nasza instalacja WordPressa nie wymaga nieużywanego kodu/plików JavaScript. Większość stron internetowych Twojej witryny może być renderowana w całości bez niechcianego kodu/plików JS. Dlatego niechciany JS zwiększa rozmiar strony bezużytecznie. Co więcej, niektóre nieużywane JS mogą kolidować z istniejącym kodem, co powoduje, że działanie witryny jest zbyt wolne.

Aby więc zwiększyć szybkość witryny i zaoszczędzić miejsce, możesz zmniejszyć nieużywany JavaScript w WordPressie, nie powodując żadnych problemów.

Zastanawiasz się jak to zrobić prawidłowo?

W tym artykule omówimy, jak zmniejszyć nieużywany JavaScript w WordPress i poprawić szybkość działania witryny.

Ale zanim przejdziemy dalej, zobaczmy, jak znaleźć w Twojej witrynie największe pliki JS, które wymagają optymalizacji.

Jak znaleźć największą nieużywaną liczbę JavaScript w swojej witrynie

Większy lub nieużywany kod JavaScript w WordPress można znaleźć za pomocą narzędzi takich jak

• GTmetrix
• Statystyki szybkości strony Google
• Pingdom

Poniżej pokażę Ci jak monitorować pliki JavaScript wymagające optymalizacji. W tym demo będę używać GTmetrix.

Pierwszą rzeczą, którą musisz zrobić, to udać się do GTmetrix i przeanalizuj swoją witrynę.

Po kilku sekundach narzędzie wyświetli wyniki testu.

Teraz przejdź do Waterfall i wybierz JS.

Tam możesz zobaczyć każdy załadowany plik JS. Jeśli prowadzisz witrynę z wieloma wtyczkami, ciężkim motywem WordPress i niestandardowymi kodami, zobaczysz kilka plików.

W ten sposób możesz śledzić każdy plik JavaScript w swojej witrynie WordPress lub WooCommerce. Teraz wiesz, jak sprawdzić pliki JS używane przez witrynę. Następnie przejdźmy do głównego tematu, gdzie dowiemy się jak prawidłowo zredukować nieużywany JavaScript w WordPressie.

Jak zmniejszyć nieużywany JavaScript w WordPress

Istnieje kilka sposobów na zmniejszenie nieużywanego kodu JavaScript w WordPress. W skrócie najbardziej zalecane metody to:

1. Minifikacja
2. Łączenie plików
3. Usuwanie kreatorów stron
4. Opóźnianie wykonania JavaScript
5. Optymalizacja kodu Google Analytics
6. Wyłącz skrypty WooCommerce
7. Włącz tryb wydajności we wtyczkach do tworzenia stron
8. Wyłącz jQuery
9. Ogranicz reklamy displayowe
10. Unikaj źle zakodowanej wtyczki
11. Wyłącz zaciemnianie poczty e-mail Cloudflare
12. Zmniejsz kod strony trzeciej
13. Usuń nieużywany JavaScript za pomocą wtyczek rozładowujących zasoby
14. Dezaktywacja nieużywanych wtyczek

Przejrzyjmy je indywidualnie i omówmy, jak każdy z nich wpływa na wydajność witryny. Dzięki temu możesz podejmować lepsze decyzje w oparciu o swoje wymagania. Bez zbędnych ceregieli przejdźmy do listy.

1) Zminimalizuj pliki JavaScript

Jeśli w Twojej witrynie znajduje się wiele plików statycznych, takich jak HTML, CSS i JS, minifikacja będzie doskonałym sposobem na zwiększenie szybkości witryny. Minifikacja usunie spacje i niepotrzebne linie z plików i zmniejszy ich rozmiar.

Dostępnych jest wiele wtyczek umożliwiających wykonanie tego zadania. Używam WP Rocket na moich stronach internetowych, aby zminimalizować pliki statyczne. Jest to popularna wtyczka WordPress do optymalizacji witryny WordPress lub sklepu WooCommerce.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować WP Rocket na swojej stronie internetowej. Ponieważ jest to wtyczka premium, nie będziesz mógł pobrać jej bezpośrednio z repozytorium. Tutaj możesz kupić WP Rocket. Po zakupie wtyczki wgraj ją na swoją stronę internetową, zainstaluj i aktywuj.

Po aktywacji możesz zobaczyć ustawienia wtyczki pod Ustawienia WordPressa.

W obszarze Optymalizacja pliku możesz zobaczyć opcję konfiguracji modyfikacji.

Musisz to włączyć i zapisać zmiany.

Otóż ​​to! Odtąd pliki JS będą minimalizowane i możesz spodziewać się większej szybkości i wydajności. Oto szczegółowy przewodnik na ten temat.

W ten sposób możesz zminimalizować pliki JS. Dostępnych jest wiele wtyczek do tego zadania. Możesz wybrać dowolny z nich, zgodnie ze swoimi preferencjami. Możesz także sprawdzić nasz post na temat najlepszych wtyczek do optymalizacji szybkości WordPress, aby uzyskać bezpłatne opcje.

To najlepsza metoda na ograniczenie nieużywanego kodu JavaScript w WordPress.

2) Połącz pliki JavaScript

Następną rzeczą, którą powinieneś spróbować, jest połączenie plików JavaScript.

Jak zwykle większość wtyczek buforujących WordPress ma tę funkcję. Oto, jak możesz używać WP Rocket do łączenia plików JavaScript.

W opcji minifikacji JavaScript zobaczysz ustawienia łączenia plików JS. Musisz to włączyć.

Zapisz ustawienia i gotowe.

Wprowadź ścieżkę pliku w polu, jeśli chcesz wykluczyć określone pliki JS z łączenia. Korzystanie z tej funkcji może czasami spowodować uszkodzenie witryn internetowych. Jeśli masz problemy techniczne, zalecamy wyłączenie tej funkcji.

NOTATKA: Jeśli Twoja witryna korzysta z protokołu HTTP/2, metoda łączenia plików JS nie będzie działać poprawnie. Jeśli więc po przetestowaniu zauważysz poprawę wydajności, możesz go zatrzymać. W przeciwnym razie pozostaw tę opcję i przejdź do następnego kroku.

3) Pozbądź się kreatorów stron (jeśli to możliwe)

Kreatory stron, takie jak Elementor, Divi i Beaver Builder, mogą być świetnym dodatkiem do witryny WordPress, gdy chcesz ulepszyć projekt witryny lub utworzyć niestandardową stronę docelową.

Ponieważ dodaje do Twojej witryny zbyt dużo niechcianego kodu JS i CSS, narzędzia do tworzenia stron nie są idealnym rozwiązaniem pod kątem wydajności Twojej witryny. Jeśli chcesz zoptymalizować szybkość witryny poprzez usunięcie lub redukcję nieużywanych plików JavaScript, rozważ wyeliminowanie wtyczek do tworzenia stron.

Zamiast tego powinieneś używać szybszych motywów, takich jak GeneratePress, Astra lub Kadence i trzymać się wtyczek edytorów bloków, takich jak GenerateBlocks, Kadence Blocks, Spectra itp.

Jeśli nie potrzebujesz wymyślnych funkcji, nie potrzebujesz narzędzi do tworzenia stron. Obecnie większość ludzi korzysta z motywów FSE (Full Site Editing), aby stworzyć arcydzieło. Nie spowoduje to tak dużego problemu z wydajnością jak narzędzia do tworzenia stron i możesz łatwo tworzyć niestandardowe strony docelowe.

Powinieneś zapoznać się z motywami FSE, takimi jak Spectra One i Neve.

Staraj się więc unikać programów do tworzenia stron i trzymaj się minimalnego projektu. Minimalistyczny projekt pomoże Ci zredukować nieużywany JavaScript w WordPress.

4) Opóźnij pliki JavaScript

Aby opóźnić pliki JavaScript, użyję WP Rocket. W sekcji Optymalizacja JavaScriptu możesz zobaczyć opcję opóźniania wykonywania JavaScript.

Po włączeniu tej opcji zapisz ustawienia. Od tego momentu pliki JavaScript będą ładowane dopiero po interakcji użytkownika.

Opóźnianie plików JavaScript innych firm

Jeśli używasz plików JavaScript innych firm, takich jak Analytics lub AdSense, zastosuj tę metodę, aby zoptymalizować wyświetlanie tych plików.

Po włączeniu funkcji opóźnienia wykonania JavaScript możesz zobaczyć wszystkie możliwe narzędzia i usługi innych firm, jakie możesz sobie wyobrazić.

Możesz wybrać usługę, z której korzystasz lub planujesz skorzystać. Po dokonaniu wyboru zapisz ustawienia.

Odtąd zewnętrzne pliki JS innych firm będą opóźnione.

Latające skrypty jest również dobrą opcją, jeśli szukasz darmowej wtyczki opóźniającej JavaScript w WordPress.

W ten sposób możesz odpowiednio zredukować nieużywany JavaScript w WordPress.

5) Zoptymalizuj integrację z Google Analytics

Po umieszczeniu kodu Analytics w witrynie witryna będzie działać wolno. Google Analytics to doskonała usługa, ale dodawany przez nas kod JS musi być zoptymalizowany pod kątem wydajności. Ponieważ kod jest hostowany na serwerach Google, Twoja witryna będzie wysyłać dodatkowe żądania HTTP i działać wolniej.

Aby rozwiązać ten problem, możesz lokalnie hostować Google Analytics. Lekka wtyczka, np Analityka latania wykona tę pracę.

Wtyczka pomoże Ci lokalnie hostować Google Analytics za pomocą dowolnej z tych czterech metod:

• Gtag.js wersja 4
• Gtag.js
• Analytics.js
• Minimalny plik Analytics.js

Metody te są możliwe do optymalizacji szybkości integracji Analytics. Możesz wybrać sposób zgodnie ze swoimi preferencjami lub wymaganiami. Hosting Analytics lokalnie pomoże Ci zredukować nieużywany JavaScript w WordPress.

Jeśli wolisz wtyczkę premium, która może pomóc Ci w optymalizacji Google Analytics i innych zadaniach związanych z optymalizacją szybkości, polecam Perfmatters. Jest to lekka wtyczka do optymalizacji prędkości i bardzo ją polecam.

6) Wyłącz skrypty WooCommerc

Jeśli do prowadzenia swojego sklepu internetowego używasz WooCommerce, powinieneś go zoptymalizować. WooCommerce oferuje wiele fantazyjnych funkcji.

Perfmatters posiada funkcję, dzięki której możesz wyłączyć skrypty WooCommerce. Zobaczysz to w sekcji WooCommerce.

Po włączeniu zapisz ustawienia.

Po włączeniu tej funkcji pliki JS i CSS zostaną załadowane na stronie produktu, koszyka i kasy, wyłączając pliki JS wszędzie indziej i pomagając zmniejszyć nieużywany JavaScript w WordPress.

Jeśli szukasz darmowej alternatywy, sprawdź wyłącz wzdęcia dla WordPress i WooCommerce.

7) Włącz tryb wydajności w Kreatorach Stron

Jak wspomniałem wcześniej, narzędzia do tworzenia stron mogą spowolnić Twoją witrynę.

Ale mogą również zaoferować rozwiązanie optymalizujące wydajność. Najpopularniejsze wtyczki do tworzenia stron oferują opcję zwiększenia wydajności poprzez poprawę udostępniania zasobów. Oto przykład ustawień ładowania wydajności zasobów Elementora.

Jeśli używasz Elementora, oto ich opcja konfiguracji.

Wystarczy włączyć opcję i zapisać zmiany.

Divi ma również podobną funkcję. To samo znajdziesz pod Ogólne > Wydajność.

Jeśli więc go używasz, włącz opcje takie jak:

• Struktura modułów dynamicznych
• Dynamiczne biblioteki JavaScript
• Odłóż jQuery i migrację jQuery
• Kolejkuj skrypt zgodny z jQuery
• Odłóż dodatkowy skrypt innej firmy

W ten sposób możesz zredukować nieużywany JavaScript w WordPressie i zoptymalizować szybkość działania witryny.

8) Wyłącz jQuery

jQuery może spowolnić Twoją witrynę. Dzięki wtyczce Permatters możesz wyłączyć opcję migracji jQuery.

Pamiętaj, że niektóre motywy i wtyczki wymagają tego do prawidłowego działania. Jeśli więc po wyłączeniu tej funkcji napotkasz jakiś błąd, przywróć stary stan.

9) Ogranicz reklamy displayowe

Reklamy displayowe, takie jak Google AdSense i Media.net, to realny sposób na zarabianie pieniędzy w Internecie na swoim blogu. Jeśli jednak dodasz zbyt wiele reklam na jednej stronie, spowolni to Twoją witrynę.

Większość reklam do prawidłowego działania będzie korzystać z plików JS z witryn stron trzecich. Aby zoptymalizować szybkość witryny, musisz ograniczyć reklamy w swojej witrynie.

Oprócz tego proces ten pomoże Ci również zoptymalizować doświadczenie użytkownika. Ograniczenie reklam na stronie zmniejszy nieużywany JavaScript w WordPressie, dzięki czemu Twoja witryna będzie szybsza.

Możesz także opóźnić ładowanie reklam, opóźniając wykonanie pliku JS reklam. Wtyczka FlyingPress oferuje wygodną opcję opóźnienia JS; możesz spróbować tutaj.

10) Unikaj źle zakodowanych wtyczek

Nie jest to wykonalna opcja, jeśli używasz zbyt wielu wtyczek ze słabym kodem.

Niektóre wtyczki WordPress dodadzą trochę JS i CSS do frontonu witryny. Kiedy ktoś trafi na stronę, serwer będzie musiał załadować każdy dodany plik CSS i JS. Spowoduje to złe doświadczenia użytkownika.

Możesz skorzystać z Wtyczka Monitor zapytań do monitorowania wtyczek wpływających na wydajność. W ten sposób możesz zidentyfikować wtyczki powodujące problemy i je wyeliminować.

Upewnij się, że nie pozostawisz wtyczki włączonej po zakończeniu optymalizacji. Ta wtyczka sama wykorzystuje wiele zasobów do monitorowania. Po zakończeniu dezaktywuj wtyczkę.

11) Wyłącz zaciemnianie poczty e-mail Cloudflare

Cloudflare posiada funkcję zaciemniania wiadomości e-mail, która chroni Twój adres e-mail przed robotami spamującymi. Jeśli włączyłeś tę funkcję, Cloudflare doda mały plik JS do Twojej instalacji WordPress/WooCommerce.

Może to mieć wpływ na ogólną wydajność. W obszarze Scrape Shield możesz zobaczyć ustawienia zaciemniania wiadomości e-mail. Domyślnie będzie ona włączona.

Możesz ją dezaktywować i zapisać ustawienia. Zmniejszy to nieużywany JavaScript w WordPressie i pomoże Ci nieco lepiej zoptymalizować witrynę.

12) Ogranicz kod strony trzeciej

Dodanie niestandardowych fragmentów do witryny pomoże Ci ulepszyć jej funkcje bez użycia dedykowanej wtyczki. Pod względem szybkości i wydajności jest to zła praktyka. Możesz użyć karty narzędzia do sprawdzania elementów, aby zobaczyć cały kod strony trzeciej używany w Twojej witrynie.

Jeśli uda Ci się ich pozbyć, będzie to świetna decyzja. Z drugiej strony, jeśli Twoim celem jest ich optymalizacja, hostowanie plików lokalnie, wstępne pobieranie domen i tak dalej.

Jest to jeden z najlepszych i najprostszych sposobów na ograniczenie nieużywanego kodu JavaScript w WordPress.

13) Usuń nieużywany JavaScript za pomocą wtyczek rozładowujących zasoby

Aby zredukować nieużywany JavaScript z WordPressa, użyj wtyczki do rozładowywania zasobów. Do oczyszczenia witryny użyjemy funkcji rozładowywania zasobów wtyczki Permatters.

Pierwszą rzeczą, którą powinieneś zrobić, to włączyć funkcję Menedżera skryptów w ustawieniach Perfmatters.

Czasami włączenie Menedżera skryptów może spowodować uszkodzenie witryny. Aby temu zapobiec, włącz tryb testowy.

Następnie sprawdź, jak radzi sobie Twoja witryna. Możemy wyłączyć tryb testowy i rozpocząć konfigurację wtyczki, jeśli wszystko jest w porządku.

Następną rzeczą, którą musisz zrobić, to otworzyć plik Ustawienia Menedżera skryptów.

Tam zobaczysz wszystkie skrypty ładujące się na Twojej stronie. Będą pliki CSS, a także pliki JS.

Od tego momentu możesz rozpocząć wyłączanie skryptów. Na przykład, jeśli korzystasz z wtyczki do udostępniania w mediach społecznościowych, wystarczy, że wyświetlisz je w postach (a czasami na stronach).

Dlatego wyłączenie JS wszędzie indziej pomoże zoptymalizować witrynę.

Oto jak możesz to zrobić. Najpierw musisz wspomnieć, które pliki JS wyłączyć. Następnie wybierz lokalizację, w której chcesz załadować plik.

Na koniec zapisz ustawienia. Możesz to zrobić z każdą wtyczką i motywem na stronie.

Zakończenie tego procesu zajmie trochę czasu, ale ostatecznie możesz szybko i skutecznie zredukować nieużywany JavaScript w WordPress.

Jeśli chcesz, aby darmowe narzędzie zrobiło to samo, polecam Oczyszczanie zasobów.

14) Dezaktywuj nieużywane wtyczki

Wtyczki WordPress to najprostszy sposób na ulepszenie funkcji witryny WordPress lub sklepu WooCommerce. Możesz ich używać do niemal każdego zadania, jakie możesz sobie wyobrazić.

Zalecam jednak używanie tylko kilku wtyczek. Może spowolnić działanie Twojej witryny i może być lepszą praktyką. Gorąco polecam metodę kodowania, jeśli możesz użyć kilku linijek kodu zamiast polegać na dedykowanej wtyczce.

Ponieważ jednak wtyczka zawiera pliki JS, trzymanie nieużywanych wtyczek byłoby okropnym pomysłem. Nie ma więc problemu z dezaktywacją tych, których nie potrzebujesz.

Na przykład, jeśli czujesz się komfortowo z edytorem Gutenberga, możesz wyeliminować wtyczkę Classic Editor. Podobnie, jeśli Twoja firma hostingowa ma wbudowaną wtyczkę buforującą, nie musisz używać wtyczek buforujących innych firm, takich jak WP Super Cache, WP Fastest Cache lub WP Rocket.

Możesz dezaktywować wtyczki pojedynczo.

Z drugiej strony, jeśli masz wiele niepotrzebnych wtyczek, zaznacz je i wybierz opcję Dezaktywuj z menu rozwijanego.

Nie ma sensu przechowywać dezaktywowanych plików wtyczek. Wybierz więc opcję usuwania, aby usunąć pliki wtyczek z instalacji WordPress. W ten sposób możesz zredukować nieużywany JavaScript w WordPress.

W ten sposób możesz zmniejszyć liczbę wtyczek aktywnych na Twojej stronie i zoptymalizować prędkość.

Często Zadawane Pytania

Następnie przyjrzyjmy się niektórym z często zadawanych pytań na ten temat.

Co to są nieużywane skrypty JavaScript i dlaczego je usuwać?

Nieużywane pliki JavaSvript to pliki JS, których Twoja witryna nie musi używać do renderowania żadnego elementu witryny. Jak sama nazwa wskazuje, można ich uniknąć, aby zoptymalizować działanie witryny lub sklepu WooCommerce.

Jak sprawdzić nieużywany JavaScript

Możesz sprawdzić pliki js i ich wpływ na prędkość ładowania za pomocą dowolnego narzędzia, takiego jak GTmetrix, Page Speed ​​Insights i tak dalej.

Czy musisz znać kodowanie, aby usunąć nieużywany JavaScript?

Absolutnie nie. Możesz zmniejszyć nieużywany JavaScript w WordPress bez dotykania ani jednej linii kodu. Do tego zadania możesz użyć dedykowanych wtyczek optymalizujących prędkość.

Jak usunąć nieużywany JavaScript z WordPress

Istnieje kilka sposobów usunięcia nieużywanego kodu JavaScript z WordPress. Niektóre z popularnych opóźniają JS, łączą je, minimalizują, wyłączają skrypty WooCommerce i tak dalej. Wszystkie metody omówiliśmy w naszym artykule na technumero.com

Wniosek

Kiedy prowadzisz witrynę WordPress lub sklep WooCommerce, optymalizacja jej pod kątem najlepszej wydajności jest kluczowa. Jak wspomniałem, ponieważ Google bierze również pod uwagę szybkość witryny jako czynnik rankingowy, powinieneś zadbać o to, aby Twoja witryna była szybsza.

Wtyczka WordPress do buforowania i kompresji obrazu szybko wykona to zadanie. Jeśli jednak nadal chcesz uzyskać najlepsze wskaźniki wydajności swojej witryny, powinieneś zredukować nieużywany JavaScript w WordPress.

Każda metoda jest prosta i skuteczna. Aby wykonać te zadania, nie musisz używać żadnego kodowania. Zwykle wtyczki takie jak WP Rocket lub Perfmatters pomogą Ci w wielu optymalizacjach.

Którą metodę spróbujesz zmniejszyć nieużywany JavaScript w WordPress?

A może znacie jakieś inne metody?

Daj mi znać w komentarzach.