W tym artykule dowiesz się, jak usunąć nieużywany kod JavaScript ze swojej strony, co pomoże przyspieszyć ładowanie Twojej witryny. Chodzi o to, że znaczna część kodu JavaScript nie jest wykorzystywana na stronie i niepotrzebnie ją spowalnia, gdyż im więcej kodu na stronie, tym dłużej trwa jej ładowanie. A przecież nikt nie lubi powolnego działania witryny. Dlatego też niezwykle ważne jest, by umieć zlokalizować i usunąć niepotrzebny kod JavaScript ze strony internetowej.
Czym jest JavaScript?
JavaScript jest językiem programowania, który pozwala między innymi tworzyć dynamicznie aktualizowane treści i zarządzać multimediami, a także wiele, wiele więcej. To niesamowite, jak wiele efektów można osiągnąć przy pomocy zaledwie kilku linii kodu JavaScript.
Poprzez interfejs API Document Object Model, język JavaScript jest używany także do dynamicznej edycji kodu HTML i CSS w celu odświeżania treści na stronach internetowych. Podczas tworzenia strony pamiętaj, że kod strony internetowej zazwyczaj ładuje się i działa w kolejności w jakiej pojawia się na stronie. Jeśli więc JavaScript wykorzystujący kod HTML zostanie załadowany i uruchomiony zanim załaduje się kod HTML z których ma korzystać, mogą wystąpić błędy na stronie.
Czym jest nieużywany JavaScript
Nieużywany kod JavaScript, to zasoby które nie są wykorzystywane ani wymagane do renderowania i wyświetlania zawartości witryny.
Mimo tego, że kod ten nie jest używany, to nadal przeglądarka użytkownika musi go załadować do pamięci. Nie ma z tego żadnego pożytku, a jedynie niepotrzebnie spowalnia ładowanie strony i obciąża pamięć komputera użytkownika.
Dlaczego warto usuwać nieużywany JavaScript?
Ładowanie niepotrzebnego kodu JavaScript może znacząco negatywnie wpływać na wydajność witryny i na ogólne wrażenia użytkownika strony internetowej. Parametr „First Contentful Paint” (FCP), to jeden z głównych wskaźników Google PageSpeed Insights, oceniający wrażenia użytkownika, na który kod JavaScript ma duży wpływ.
Typy niepotrzebnego kodu JavaScript
Podzielmy sobie nieużywany kod JavaScript na dwie kategorie:
- Niekrytyczny JavaScript: jest używany gdzie indziej na stronie, ale nie jest potrzebne by był ładowany w pierwszej kolejności i blokował ładowanie innych elementów witryny. Blokowanie ładowania witryny przez taki kod pogarsza nam parametr FCP
- Martwy JavaScript: Nie jest w ogóle używany na stronie i może zostać bezpiecznie usunięty.
Wady ładowania nieużywanego kodu JavaScript
Nieużywany kod JavaScript ma negatywny wpływ na wydajność witryny internetowej i opóźnia ładowanie strony. Pozycja w wyszukiwarce Google naszej witryny zależy między innymi od prędkości witryny. Jest to jeden z kluczowych parametrów. Ponadto prawdopodobieństwo, że użytkownicy opuszczą naszą stronę internetową internetową i odwiedzą inną wzrasta, jeśli nasza strona działa powoli. Wpływa to na współczynnik odrzuceń, który jest niezwykle ważny dla SEO i sprawia, że Google obniża wyniki wyszukiwania naszej witryny.
Należy odróżnić dwie nietożsame rzeczy: faktyczny czas ładowania witryny, to nie to samo jak użytkownicy naszej witryny postrzegają czas jej ładowania. Najważniejsze dla użytkownika jest, by jak naszybciej mógł zobaczyć pierwsze elementy u góry strony i by były one responsywne. Reszta elementów strony które występują poniżej, mogą ładować się później, ważne by użytkownik jak najkrócej widział pustą stronę.
Zalety usuwania nieużywanego kodu JavaScript
To oczywiste, że im więcej przeglądarka musi pobrać i uruchomić kodu JavaScript, HTML, czy CSS, tym dłużej trwa ładowanie strony. Nieważne czy kod JavaScript jest potrzebny, czy nie, jeśli znajduje się na stronie to przeglądarka zawsze pobierze go i uruchomi.
Jest to ważne zwłaszcza dla użytkowników mobilnych korzystających ze smartfonów. Nie dość że niepotrzebny kod zużywa nam transfer internetowy, to dodatkowo urządzenia mobilne nie są tak wydajne jak komputery stacjonarne. Aby przyspieszyć ładowanie witryny, powinieneś umieć znaleźć nieużywany kod JavaScript i usunąć go, albo przynajmniej sprawić żeby ładował się później i nie blokował początkowych etapów ładowania strony.
Jak zredukować ilość nieużywanego kodu JavaScript?
Najpierw spróbujemy znaleźć duże pliki JavaScript przy pomocy GTMetrix, a następnie pokażę Ci sposoby usunięcia niechcianego kodu.
Użyj GTMetrix aby znaleźć duże pliki JavaScript
- Wejdź na stronę GTMetrix i w odpowiednim polu wprowadź adres swojej strony internetowej.
- Kliknij zakładkę Waterfall
- Kliknij poniżej w zakładkę JS, a zobaczysz pliki JavaScript. Klikając na Size uporządkuj je od największego do najmniejszego
Minimalizacja kodu JavaScript
Minimalizacja JavaScript polega na usuwaniu ze skryptu niepotrzebnego kodu.
UWAGA: Nieumiejętna minimalizacja kodu może uszkodzić Twoją witrynę. Przed korzystaniem z tego poradnika koniecznie zrób kopię bezpieczeństwa całej witryny wraz z bazą danych.
Usuwanie niepotrzebnego kodu JavaScript przy pomocy wtyczki LiteSpeed Cache.
Jeśli Twoja witryna pracuje na serwerze www LiteSpeed, lub Open LiteSpeed, do minimalizacji kodu JavaScript możesz użyć wtyczki LiteSpeed Cache. Jeśli dodatkowo korzystasz z panelu CyberPanel, to ta wtyczka jest instalowana domyślnie.
- Przejdź do Kokpitu WordPress i kliknij LiteSpeed Cache
- Kliknij na Page Optimization
- Kliknij Ustawienia JS u góry, a następnie JS Minify
- Kliknij Zapisz zmiany
Usuwanie niechcianego kodu JavaScript w Elementor
Jeśli korzystasz z wtyczki Elementor, możesz usunąć niechciany kod JavaScript przy jego pomocy.
- Przejdź do Kokpitu WordPress, kliknij po lewej stronie na Elementor, a następnie na Ustawienia.
- Kliknij u góry zakładkę Eksperymenty
- Przewiń w dół do działu Stabilne funkcje i włącz opcję Ulepszone ładowanie zasobów.
- Przejdź na sam dół strony i kliknij Zapisz zmiany
Opóźnienie ładowania potrzebnego, ale nie krytycznego JavaScript przy pomocy Async JavaScript
- Idź do Kokpitu WordPress i zainstaluj wtyczkę AsyncJavaScript, jeśli jej nie posiadasz.
- Kliknij Ustawienia, a następnie Async JavaScript
- Kliknij u góry w zakładkę Settings, a następnie kliknij przycisk Apply Defer.
- Przejdź na sam dół strony i kliknij Save Settings
Usuwanie nieużywanego kodu przy pomocy wtyczki Asset CleanUp
Gdy jakieś pliki, bądź w tyczki nie muszą być ładowane na danej podstronie naszej witryny, możemy je wyłączyć przy pomocy wtyczki Asset CleanUp: Page Speed Booster. Ta wtyczka to potężne narzędzie, jednak w niedoświadczonych rękach może wyrządzić szkody naszej witrynie. Pamiętaj o zrobieniu kopii bezpieczeństwa witryny przed jej edycją.
- Zainstaluj Asset CleanUp jeśli jeszcze nie posiadasz tej wtyczki.
- Przejdź do Kokpit WordPress, a następnie kliknij AssetCleanUp i Settings po lewej stronie.
- Kliknij zakładkę Test Mode po lewej stronie i włącz funkcję Test Mode. To bardzo przydatna funkcja. Po jej włączeniu jedynie zalogowani administratorzy będą widzieli wprowadzone zmiany. Jeśli podczas testów okaże się, że nasza strona nie działa poprawnie, jedynie administratorzy to zobaczą, a normalnym użytkownikom naszej witryny strony nadal będą działać poprawnie. Dopiero po upewnieniu się, że wszystko działa poprawnie możemy wyłączyć funkcję Test Mode i od tej pory strona będzie się już ładować szybciej bez niepotrzebnego kodu JavaScript.
- Po wprowadzeniu zmian przewiń stronę w dół i kliknij Update All Settings
- Po lewej stronie kliknij zakładkę Optimize JavaScript
- Włącz opcję Combine loaded JS (JavaScript) into fewer files
- Przewiń na dół strony i kliknij Update All Settings by zapisać ustawienia
Podsumowanie
Ładowanie niepotrzebnego kodu JavaScript sprawia, że ładowanie witryny trwa dłużej, ponieważ przeglądarka użytkownika musi go pobrać, przeanalizować, skompilować i uruchomić bez potrzeby. Nieużywany kod niepotrzebnie zużywa nasz transfer danych komórkowych i spowalnia renderowanie strony. To wszystko pogarsza wrażenia użytkownika i obniża pozycję naszej witryny w wynikach wyszukiwania Google.
Minimalizując JavaScript i usuwając niepotrzebny kod przyspieszysz ładowanie witryny i poprawisz jej ogólną funkcjonalność.
