Jak usunąć nieużywane CSS i JS w WordPressie (bardzo łatwe)

Posiadanie wielu nieużywanych CSS i JS w Twojej witrynie może skrócić czas ładowania witryny. Jeśli uruchamiasz swoją witrynę za pomocą narzędzi do testowania szybkości, takich jak Google PageSpeed ​​Insight, możesz otrzymać ostrzeżenie o usunięciu nieużywanego kodu CSS.

Na szczęście jest na to bardzo łatwy sposób. Nie musisz posiadać specjalnej wiedzy technicznej, aby móc usunąć nieużywane CSS i JS ze swojej witryny WordPress.

Wynika to z niesamowitej wtyczki znanej jako Asset CleanUp: Page Speed ​​Booster. 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 wydawaniu kilku dolarów rocznie, dzięki WP Rocket jest usunięty nieużywany przycisk CSS, po prostu go aktywuj, a wtyczka automatycznie usunie wszystkie nieużywane CSS.

Zamówienie: 7 najlepszych zarządzanych hostingów Google Cloud WordPress

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ę, 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 używany na stronie, przeglądarka będzie marnować na to swój czas.

Klasycznym tego przykładem jest większość używanych wtyczek formularzy kontaktowych. Wtyczki te, chociaż są najczęściej używane tylko na stronie Skontaktuj się z nami, ładują CSS w całej witrynie. Nie ma znaczenia, czy jest to strona główna, na której nie jest używana, załaduje się CSS.

Jeśli istnieje zbyt wiele CSS, które nie są potrzebne, ale ładują się i spowalniają czas odczytu i wyświetlania strony przez przeglądarkę, może to stać się problemem.

Oprócz wtyczek, twórcy motywów piszą do style.css wiele rzeczy, które w większości nie są potrzebne. Ale niezależnie od tego, czy są potrzebne, czy nie, ładują się za każdym razem, gdy Twoja witryna jest ładowana!

Jeden nieużywany CSS może nie stanowić problemu, ale wiele nieużywanych CSS może wpłynąć na czas ładowania Twojej witryny.

Zamówienie: 10 najszybszych i najlepszych motywów WordPress

Jak zidentyfikować nieużywany CSS

Znalezienie nieużywanego CSS i JS jest bardzo łatwe. Polecam dwa podejścia.

Jednym z nich jest analiza witryny za pomocą Google PageSpeed ​​Insight. Sprawdź, czy Twoja witryna ma problem z usunięciem nieużywanego CSS. Kliknij na niego, a będziesz mógł zidentyfikować odpowiedzialny za to komponent Twojej witryny.

Jak widać z góry, zarejestrowano jeden przypadek nieużywanego CSS. Widzę wtyczkę i lokalizację nieużywanego CSS, patrząc na to.

Drugą opcją jest uzyskanie bardziej szczegółowej analizy. Możesz to osiągnąć za pomocą narzędzi Chrome Dev.

W przeglądarce Chrome otwórz narzędzia Chrome Dev, a następnie przejdź do zasięgu. Następnie kliknij przycisk przeładowania w obszarze zasięgu. Szczegółowy przewodnik, jak to zrobić, znajdziesz w narzędziu Google Developers.

Inną opcją jest użycie jitbit do skanowania w poszukiwaniu nieużywanych selektorów CSS. Możesz także użyć PurifyCSS, aby znaleźć nieużywane CSS

Jak usunąć nieużywany CSS

Wykonaj następujące kroki, aby usunąć nieużywany CSS z WordPressa:

1. Zainstaluj czyszczenie zasobów

Przejdź do wtyczki, a następnie Dodaj nowy. Następnie wpisz „Asset CleanUp” w polu wyszukiwania na stronie Dodaj nową wtyczkę. Zainstaluj i aktywuj wtyczkę.

2. Przejdź do ustawień wtyczki

Aby uzyskać dostęp do ustawień wtyczki, z pulpitu WordPress kliknij ustawienia, a następnie kliknij Asset CleanUp.

3. Usuń niechciane CSS i JS

W ustawieniach wtyczki, zanim zaczniesz, być może będziesz musiał zaakceptować fakt, że wiesz, jak działa wtyczka pod grubym stuknięciem.

Aby rozładować CSS i JS, kliknij Menedżer CSS i JSS. Stamtąd możesz usunąć wszystkie CSS i JS, których nie potrzebujesz. Możesz go usunąć tylko dla strony głównej, dla całej witryny lub dla określonego adresu URL. Możesz także usuwać posty, strony lub kategorie.

Przykładem jest wyładowanie 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. Upewnij się, że przetestujesz swoją witrynę po zakończeniu, aby upewnić się, że wszystko jest w porządku.

Usuń nieużywane wtyczki CSS WordPress

Oto kilka wtyczek, których możesz użyć do usunięcia nieużywanego CSS w WordpPress:

1. Czyszczenie zasobów: Przyspieszenie szybkości strony

Asset CleanUp: Page Speed ​​Booster 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 na określonej stronie.

Możesz także dezaktywować tylko dla pojedynczych postów. W wersji premium możesz dezaktywować nieużywany CSS/JS za pomocą wtyczek.

Ta wtyczka to kompletna wtyczka wydajności z wieloma innymi opcjami przyspieszenia WordPressa. Usunięcie nieużywanego CSS/JS to tylko część tego.

W tym poście użyłem tej wtyczki ma przewodnik.

2. Rakieta WP

WP Rocket to najpopularniejsza wtyczka wydajności premium WordPress. Jeśli jesteś noobem, to znaczy, jeśli nie masz doświadczenia lub nie czujesz się komfortowo z WordPressem, to WP Rocket to najłatwiejszy sposób na usunięcie nieużywanego CSS.

Musisz kupić wtyczkę, gdy to zrobisz, możesz pobrać ją ze swojego konta lub sprawdzić pocztę e-mail pod kątem linku 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żywany CSS”, zaznacz pole, zapisz i wyczyść pamięć podręczną.

3. Perfumy

Perfmatters to wtyczka premium opracowana przez Briana Jacksona i jego brata Bretta Jacksona. Ta wtyczka może 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 posta w swojej witrynie, zobaczysz ikonę menedżera skryptów w menu pulpitu nawigacyjnego, kliknij ją. Będziesz mógł usunąć nieużywane CSS i JS ze strony lub globalnie.

Ta wtyczka jest wtyczką wydajnościową, zawiera wiele innych opcji przyspieszenia WordPressa. Częścią tego jest usunięcie nieużywanego CSS/JS.

4. Menedżer CSS JS

CSS JS Manager 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ż odroczyć ł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żesz ograniczyć je do minimum. Korzystam z Asset CleanUp, aby usunąć nieużywany CSS dla TargetTrend.

Pamiętaj, optymalizuj, ale nie przejmuj się tym zbytnio, chyba że chcesz, aby Twoja witryna wyglądała jak najszybsza witryna na świecie.

Przeczytaj także:

Jak wyeliminować zasoby blokujące renderowanie w WordPress

Jak sprawić, by WordPress był bardzo szybki

Jak przyciągnąć ruch do swojego bloga