Jak usunąć nieużywane CSS i JS w WordPress (bardzo łatwo)
Posiadanie dużej ilości nieużywanego CSS może spowolnić Twoją witrynę. Jeśli przetestujesz swoją witrynę za pomocą statystyk Google PageSpeed, możesz otrzymać ostrzeżenie o konieczności usunięcia nieużywanego CSS. Można to zrobić w łatwy sposób, bez kodowania i obsługi technicznej.
Posiadanie dużej ilości nieużywanych CSS i JS w Twojej witrynie może skrócić czas jej ładowania. Jeśli prowadzisz swoją witrynę internetową za pośrednictwem a narzędzia do testowania prędkości jak na przykład Google PageSpeed Insight, może pojawić się ostrzeżenie o konieczności usunięcia nieużywanego CSS.
Na szczęście jest na to bardzo łatwy sposób. Nie musisz posiadać żadnej specjalnej wiedzy technicznej, aby móc usunąć nieużywane CSS i JS ze swojej witryny WordPress.
Dzieje się tak dzięki niesamowitej wtyczce znanej jako Oczyszczanie zasobów: Zwiększanie szybkości strony. Dzięki tej wtyczce usunięcie nieużywanego CSS jest tak proste, jak kliknięcie kilku przycisków. Alternatywnie, jeśli nie masz nic przeciwko wydaniu kilku dolarów rocznie, z WP Rocket, został usunięty nieużywany przycisk CSS, po prostu go aktywuj, a wtyczka automatycznie usunie wszystkie nieużywane CSS.
Zamówienie: Top 7 zarządzanych hostingów WordPress w Google Cloud
Co to jest nieużywany CSS?
Nieużywany CSS to plik CSS, który jest obecny na stronie, ale w większości nie jest potrzebny do załadowania strony. Kiedy odwiedzający otwiera witrynę internetową, przeglądarka zazwyczaj musi pobrać, przeanalizować i przetworzyć wszystkie zewnętrzne arkusze stylów na odwiedzanej stronie, zanim będzie mogła wyświetlić zawartość strony odwiedzającemu. Jeśli na takiej stronie istnieje jakiś CSS, który nie jest na tej stronie używany, przeglądarka będzie marnować na to czas.
Klasycznym tego przykładem jest większość używanych wtyczek formularzy kontaktowych. Chociaż te wtyczki są najczęściej używane tylko na stronie Skontaktuj się z nami, ładują ich CSS w całej witrynie. Nie ma znaczenia, czy jest to strona główna, na której nie jest ona używana, CSS zostanie załadowany.
Jeśli jest zbyt wiele CSS, które nie są potrzebne, ale ładują się i spowalniają czas czytania i wyświetlania strony przez przeglądarkę, może to stać się problemem.
Oprócz wtyczek twórcy motywów zapisują w pliku style.css wiele rzeczy, które w większości nie są potrzebne. Ale niezależnie od tego, czy jest to potrzebne, czy nie, ładują się za każdym razem, gdy ładowana jest Twoja witryna!
Jeden nieużywany CSS może nie stanowić problemu, ale wiele nieużywanych CSS może mieć wpływ na czas ładowania Twojej witryny.
Zamówienie: Top 10 najszybszych i najlepszych motywów WordPress
Jak zidentyfikować nieużywany CSS
Znalezienie nieużywanych CSS i JS jest bardzo łatwą rzeczą. Istnieją dwa podejścia, które polecam.
Jednym z nich jest analiza Twojej witryny za pomocą Google PageSpeed Insight. Sprawdź, czy Twoja witryna ma możliwość usunięcia nieużywanego problemu CSS. Kliknij na niego, a będziesz mógł zidentyfikować komponent swojej witryny, który jest za to odpowiedzialny.
Z góry widać, że zarejestrowany jest jeden przypadek nieużywanego CSS. Patrząc na to, mogę zobaczyć wtyczkę i lokalizację nieużywanego CSS.
Drugą opcją jest uzyskanie bardziej szczegółowej analizy. Możesz to osiągnąć, korzystając z narzędzi Chrome Dev.
W przeglądarce Chrome otwórz narzędzia Chrome dla deweloperów, a następnie przejdź do zasięgu. Następnie kliknij przycisk ponownego ładowania w obszarze zasięgu. Możesz znaleźć obszerny przewodnik, jak to zrobić w narzędziu Google Developers.
Inną opcją jest użycie jitbit, aby wyszukać nieużywane selektory CSS. Możesz także użyć OczyśćCSS aby znaleźć nieużywany CSS
Jak usunąć nieużywany CSS
Wykonaj poniższe kroki, aby usunąć nieużywany CSS z WordPress:
1. Zainstaluj narzędzie Asset CleanUp
Przejdź do wtyczki, a następnie Dodaj nową. Następnie wpisz „Oczyszczanie zasobów” w polu wyszukiwania na stronie Dodaj nową wtyczkę. Zainstaluj i aktywuj wtyczkę.
2. Przejdź do ustawień wtyczki
Aby uzyskać dostęp do ustawień wtyczki, w panelu WordPress kliknij ustawienia, a następnie kliknij opcję Oczyszczanie zasobów.
3. Usuń niechciane CSS i JS
W ustawieniach wtyczki może być konieczne zaakceptowanie, że wiesz, jak działa wtyczka pod kranem do usuwania tłuszczu, zanim zaczniesz.
Aby wyładować CSS i JS, kliknij Menedżer CSS i JSS. Stamtąd możesz usunąć niepotrzebne CSS i JS. Możesz go usunąć tylko dla strony głównej, całej witryny lub określonego adresu URL. Możesz także usunąć dla postów, stron lub kategorii.
Przykładem jest wyłączenie dowolnego formularza kontaktowego z ładowania dla całej witryny z wyjątkiem strony kontaktowej
Nie spiesz się i wyładuj wszystkie CSS i JS, o których wiesz, że nie są potrzebne. Po zakończeniu przetestuj witrynę, aby upewnić się, że wszystko jest w porządku.
Usuń nieużywane wtyczki CSS WordPress
Oto kilka wtyczek, których możesz użyć, aby usunąć nieużywany CSS w WordpPress:
1. Oczyszczanie zasobów: Zwiększanie szybkości strony
Oczyszczanie zasobów: Zwiększanie szybkości strony ułatwia usuwanie nieużywanych CSS i JSin WordPress nawet początkującym. Wszystko, co musisz zrobić, to dezaktywować konkretny CSS, który nie jest potrzebny dla konkretnej strony.
Możesz także dezaktywować dla poszczególnych postów. W wersji premium możesz dezaktywować nieużywane CSS/JS przez wtyczki.
Ta wtyczka to kompletna wtyczka zwiększająca wydajność z wieloma innymi opcjami przyspieszającymi WordPress. Usuwanie nieużywanego CSS/JS to tylko część tego.
W tym poście skorzystałem z poradnika dotyczącego tej wtyczki.
2. WP Rocket
WP Rocket jest wtyczką premium WordPress numer jeden. Jeśli jesteś noobem, to znaczy, jeśli nie masz doświadczenia lub wygody z WordPressem, to WP Rocket to najłatwiejszy sposób na usunięcie nieużywanego CSS.
Musisz kupić wtyczkę. Gdy już to zrobisz, możesz pobrać ją ze swojego konta lub sprawdzić, czy w skrzynce e-mail znajduje się link do pobrania.
Zainstaluj wtyczkę poprzez Pulpit>Wtyczki>Dodaj nowy>Prześlij.
Po prostu przejdź do ustawień WP Rocket, a następnie kliknij kartę „Optymalizacja pliku”. Następnie przewiń w dół, a zobaczysz „Usuń nieużywane CSS”, zaznacz pole, zapisz i wyczyść pamięć podręczną.
3. Perfmatters
Perfmatters to wtyczka premium opracowana przez Briana Jacksona i jego brata Bretta Jacksona. Ta wtyczka może pomóc bardzo łatwo usunąć nieużywany CSS.
Najpierw musisz kupić wtyczkę. Następnie zainstaluj go. Aktywuj licencję. Po przejściu do ustawień włącz menedżera skryptów.
Po prostu przejdź do dowolnej strony lub wpisu w swojej witrynie, zobaczysz ikonę menedżera skryptów w menu panelu kontrolnego, kliknij ją. Będziesz mógł usunąć nieużywane CSS i JS ze strony lub globalnie.
Ta wtyczka jest wtyczką zwiększającą wydajność i zawiera wiele innych opcji przyspieszających WordPress. Częścią tego jest usunięcie nieużywanego CSS/JS.
4. Menedżer CSS JS
Menedżer CSS JS może w szczególności usunąć CSS lub JS z urządzeń mobilnych lub komputerów stacjonarnych. W zależności od tego, co chcesz osiągnąć.
Ta wtyczka może również opóźnić ładowanie plików CSS lub JS.
Wniosek
Jeśli masz dużo nieużywanych CSS i JS, zauważysz dużą poprawę wyników szybkości i wydajności.
Usunięcie wszystkich nieużywanych CSS może być niemożliwe, ale można je ograniczyć do minimum. Korzystam z Asset CleanUp, aby usunąć nieużywany CSS Trend docelowy.
Pamiętaj, optymalizuj, ale nie popadaj w obsesję na tym punkcie, chyba że chcesz, żeby Twoja witryna wyglądała tak najszybsza strona internetowa na świecie.
Przeczytaj także:
Jak wyeliminować zasoby blokujące renderowanie w WordPress
Powiązane artykuły
