Jak usunąć nieużywany CSS w WordPress (właściwy sposób)

Jako właściciele witryn WordPress, wszyscy staramy się zapewnić szybkie i optymalne doświadczenie użytkownika. To nie tylko utrzymuje zaangażowanie odwiedzających, ale także pomaga naszym witrynom zajmować wyższe pozycje w wynikach wyszukiwania.

Możesz nie zdawać sobie sprawy, że Twoje motywy i wtyczki często ładują znacznie więcej kodu CSS, niż potrzebują Twoje strony. Ten nieużywany CSS może potajemnie spowalniać Twoją witrynę.

Każda dodatkowa linia kodu, którą muszą pobrać Twoi odwiedzający, dodaje cenne sekundy do czasu ładowania. A w dzisiejszym świecie nawet jednominutowe opóźnienie może kosztować Cię odwiedzających i sprzedaż.

Dlatego przygotowaliśmy ten kompletny przewodnik po prawidłowym usuwaniu nieużywanego CSS z WordPress. Pokażemy Ci dokładne metody, których używamy do czyszczenia przeładowanych arkuszy stylów i przyspieszania witryn bez ich psucia.

Czym jest nieużywany CSS w WordPressie?

Nie używane CSS w WordPressie odnosi się do kodu CSS , który jest ładowany na Twoich stronach internetowych, ale faktycznie nie jest używany do stylizowania niczego widocznego na tych konkretnych stronach.

Ten dodatkowy kod zmusza przeglądarki odwiedzających do pobierania i przetwarzania niepotrzebnych plików, co spowalnia czas ładowania strony. Nawet kilka dodatkowych sekund może zaszkodzić doświadczeniu użytkownika i pozycjonowaniu w wyszukiwarkach, potencjalnie kosztując Cię odwiedzających i konwersje.

Możesz łatwo sprawdzić, czy nieużywany CSS wpływa na Twoją witrynę, uruchamiając ją przez Google Pagespeed Insights. Poszukaj ostrzeżenia „Remove unused CSS” w swoich wynikach. Pokaże Ci dokładnie, które pliki spowalniają działanie witryny.

Dlaczego WordPress ładuje nieużywany CSS?

Chodzi o to, że WordPress nie został zaprojektowany tak, aby był wybredny co do tego, jakie pliki CSS ładuje. Twój motyw WordPress zawiera główny arkusz stylów (zwykle nazywany style.css), który zawiera reguły stylizacji dla każdego możliwego elementu, nawet tych, których możesz nigdy nie użyć.

Ale Twój motyw to dopiero początek. Każda zainstalowana wtyczka dodaje swoje własne pliki CSS. WooCommerce ładuje style sklepu na każdej stronie (nawet na Twoich postach na blogu), kreatory stron ładują swoje CSS globalnie, a wtyczki formularzy kontaktowych ładują style formularzy na stronach bez formularzy.

Dodaj niestandardowe czcionki, biblioteki ikon i inne elementy projektu, a otrzymasz dużo nadmiarowego CSS. Chociaż każdy pojedynczy plik może być mały, szybko się sumują i wpływają na szybkość Twojej witryny.

Jak usunąć nieużywane CSS w WordPressie

Teraz dobra wiadomość: istnieje kilka skutecznych sposobów na uporządkowanie nieużywanego CSS na Twojej stronie WordPress. Przetestowaliśmy wiele podejść i znaleźliśmy metody, które działają niezawodnie, nie psując Twojej witryny.

Oto, co musisz wiedzieć z góry: całkowite wyeliminowanie 100% nieużywanego CSS jest prawie niemożliwe ze względu na sposób, w jaki WordPress dynamicznie ładuje treści. Niektóre pliki CSS muszą pozostać gotowe dla elementów interaktywnych, treści warunkowych i różnych typów stron.

Ale nie martw się, nie potrzebujesz perfekcji, aby zobaczyć znaczące ulepszenia. Nawet usunięcie 50-70% nieużywanego CSS może drastycznie przyspieszyć Twoją witrynę.

Pokażemy Ci dwie sprawdzone metody, które zapewniają właściwą równowagę między zyskami wydajności a stabilnością witryny, dzięki czemu możesz wybrać podejście, które odpowiada Twojemu poziomowi komfortu.

1. Usuń nieużywane CSS w WordPress za pomocą WP Rocket
2. Remove Unused CSS in WordPress Using Asset CleanUp

Metoda 1: Usuń nieużywane CSS w WordPress za pomocą WP Rocket

Ta metoda jest łatwiejsza i zalecana dla początkujących. Znacznie poprawia ogólne dostarczanie plików CSS na Twojej stronie WordPress, w tym usuwa większość nieużywanego CSS.

Uważamy, że jest to najlepsze rozwiązanie dla początkujących, ponieważ jest łatwiejsze i osiąga główny cel, jakim jest zapewnienie lepszego doświadczenia dla Twoich użytkowników. Oznacza to, że Twoja witryna ładuje się szybko w narzędziach do testowania prędkości i jest również szybka dla Twoich użytkowników.

Najpierw musisz zainstalować i aktywować wtyczkę WP Rocket. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić stronę Ustawienia » WP Rocket i przejść do zakładki „Optymalizacja plików”.

Następnie musisz przewinąć w dół do sekcji Pliki CSS, a następnie zaznaczyć pole wyboru obok opcji „Usuń nieużywany CSS (Beta)”.

Ponieważ ta funkcja WP Rocket jest w wersji beta, ponownie zapyta, czy chcesz włączyć to ustawienie. Możesz śmiało kliknąć przycisk „Aktywuj usuwanie nieużywanego CSS”.

Gdy opcja „Usuń nieużywany CSS” będzie aktywna, możesz następnie określić nazwy plików CSS, identyfikatory lub klasy, które nie powinny być usuwane, w polu „Biała lista CSS”.

Po prostu wpisz je w pole.

Następnie musisz zapisać swoje zmiany, przewijając w dół i klikając przycisk „Zapisz zmiany”.

Kiedy to zrobisz, WP Rocket zacznie przetwarzać Twoje pliki CSS i wyświetli pasek postępu.

Przetworzenie i usunięcie nieużywanych plików CSS z Twojej witryny zajmie wtyczce kilka minut.

Zobaczysz komunikat „Usuwanie nieużywanego CSS zakończone!” po tym, jak wtyczka zakończy proces.

Teraz odwiedź narzędzie Google Pagespeed Insights i przetestuj wydajność swojej witryny.

Usuń blokujący renderowanie CSS dla WordPress

WP Rocket pozwala optymalizować pliki CSS i usuwać blokujący renderowanie CSS z Twojej witryny.

Aby rozpocząć, możesz przejść do zakładki „Optymalizacja plików” w WP Rocket. Stamtąd przewiń w dół do sekcji Pliki CSS, a następnie zaznacz pole obok opcji „Optymalizuj dostarczanie CSS”.

Ta opcja generuje plik CSS zawierający tylko kod CSS potrzebny do wyświetlenia widocznej części Twojej witryny. Najpierw ładuje ten plik, wyświetla stronę odwiedzającym, a następnie ładuje inne pliki CSS przy użyciu technologii zwanej ładowaniem odroczonym.

Usuwając ten blokujący renderowanie CSS, Twoja strona internetowa staje się znacznie szybciej widoczna dla użytkowników, niż gdybyś musiał załadować wszystkie pliki CSS przed wyświetleniem strony.

Po włączeniu opcji „Optymalizuj dostarczanie CSS” kliknij przycisk „Zapisz zmiany” i poczekaj, aż WP Rocket wygeneruje niezbędny plik CSS dla wszystkich Twoich postów i stron. Automatycznie wyczyści pamięć podręczną Twojej witryny.

Po zakończeniu możesz ponownie przetestować wydajność swojej witryny za pomocą Google Pagespeed Insights.

Dodatkowe poprawki dostarczania plików w celu zwiększenia wydajności

WP Rocket pozwala również na usuwanie ciągów zapytań ze statycznych plików, łączenie plików Google Fonts i minifikację HTML.

Wszystkie te poprawki dodają drobne ulepszenia do ogólnej prędkości, co przekłada się na szybsze ładowanie dla Twoich odwiedzających.

Zobaczysz również opcje minifikacji i łączenia plików CSS. Te opcje zmniejszą liczbę żądań HTTP i zapewnią dodatkowe przyspieszenie.

Jednakże, będziesz musiał/a dokładnie sprawdzić swoją stronę internetową, aby upewnić się, że nic nie zostało zepsute po włączeniu tych ustawień.

Dodatkowo możesz zastosować tę samą optymalizację dla plików JavaScript na swojej stronie internetowej.

Możesz je zminimalizować i połączyć, aby były serwowane jako pojedynczy plik, oraz odroczyć ładowanie plików JavaScript, aby poprawić wydajność.

Aby uzyskać więcej informacji, zapoznaj się z naszym samouczkiem krok po kroku, jak prawidłowo zainstalować i skonfigurować WP Rocket w WordPress.

Metoda 2: Usuń nieużywany CSS w WordPressie za pomocą Asset CleanUp

Ta metoda jest nieco zaawansowana, ale niezwykle potężna i pozwoli Ci łatwo usunąć nieużywane CSS z dowolnej strony Twojej witryny WordPress.

Jest to jednak nieco skomplikowane i będziesz musiał dokładnie przetestować funkcjonalność i wygląd swojej witryny, aby upewnić się, że nic nie jest zepsute.

Najpierw musisz zainstalować i aktywować wtyczkę Asset Cleanup. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść na stronę Asset CleanUp » Ustawienia i przełączyć się na zakładkę Tryb testowy. Stąd musisz włączyć opcję „Włącz tryb testowy”.

Pozwala to na wypróbowanie różnych ustawień i przetestowanie ich jako administrator, bez wpływu na odwiedzających witrynę.

Następnie musisz odwiedzić stronę Asset CleanUp » CSS/JS Manager. Stąd możesz rozładować niechciane pliki CSS i JavaScript na zasadzie strony po stronie.

Najpierw pobierze Twoją stronę główną i pokaże Ci wszystkie pliki CSS i JavaScript załadowane na tej stronie.

Musisz przewinąć w dół i przejrzeć załadowane pliki. Jeśli widzisz plik, którego nie potrzebujesz, możesz go wyłączyć dla konkretnej strony, typu posta lub całej witryny.

Wtyczka pozwala również na wybór konkretnych postów lub stron stąd, lub możesz uzyskać dostęp do tych samych opcji, edytując post lub stronę tak, jak zwykle.

Na ekranie edycji posta znajdziesz pole Asset CleanUp tuż pod edytorem posta.

Wtyczka automatycznie pobierze i wyświetli listę wszystkich plików i zasobów ładowanych, gdy odwiedzający wyświetli tę stronę w Twojej witrynie.

Następnie możesz po prostu wyładować nieużywane pliki CSS lub JavaScript, których nie potrzebujesz na danej stronie.

Ważne: Nie zapomnij przetestować swojej witryny po usunięciu nieużywanego CSS lub JavaScript, aby upewnić się, że wszystko działa poprawnie.

Po zakończeniu rozładowywania i usuwania nieużywanego CSS i plików JavaScript, możesz wrócić do strony ustawień wtyczki i wyłączyć „Tryb testowy”.

Nie zapomnij kliknąć przycisku „Zaktualizuj wszystkie ustawienia”, aby zapisać zmiany.

Teraz możesz przetestować swoją witrynę za pomocą Google Pagespeed Insights, aby zobaczyć zmianę w powiadomieniu o nieużywanym CSS.

Eksperckie poradniki dotyczące poprawy wydajności WordPressa

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo usunąć nieużywany CSS w WordPress. Możesz również zapoznać się z innymi poradnikami dotyczącymi poprawy wydajności WordPress:

• Kompleksowy przewodnik po zwiększaniu szybkości i wydajności WordPress
• Jak przyspieszyć wydajność WooCommerce
• Jak prawidłowo przeprowadzić test szybkości strony internetowej (najlepsze narzędzia)
• Ważne metryki do zmierzenia na Twojej witrynie WordPress
• Jak zoptymalizować Core Web Vitals dla WordPress (kompletny przewodnik)
• Jak używać wtyczki GTmetrix do poprawy wydajności witryny WordPress
• Jak łatwo zoptymalizować dostarczanie CSS w WordPress
• Najszybszy hosting WordPress (testy wydajności)
• Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości
• Najlepsze wtyczki buforujące WordPress do przyspieszenia Twojej witryny

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.