Nieużywany CSS w WordPressie można ograniczyć za pomocą wtyczki optymalizacyjnej, narzędzia do zarządzania zasobami albo kodu w pliku functions.php. Najbezpieczniej zacząć od analizy konkretnej podstrony, wykonać kopię zapasową i przetestować zmiany na stagingu, ponieważ usunięcie potrzebnych reguł może zepsuć wygląd strony, wersję mobilną lub elementy uruchamiane przez JavaScript.
Dlaczego warto usuwać nieużywany CSS?
Arkusze stylów są często zasobami blokującymi renderowanie. Przeglądarka musi je pobrać i przetworzyć, zanim poprawnie wyświetli stronę. Duży plik CSS może więc wydłużać pierwsze renderowanie, wpływać na FCP i utrudniać osiągnięcie dobrych wyników w pomiarach wydajności.
Nieużywany CSS oznacza reguły wysłane do konkretnej podstrony, choć nie są na niej potrzebne. Nie należy mylić go z martwym kodem, czyli pozostałościami po dawnym motywie lub wtyczce. W pierwszym przypadku styl może być potrzebny na innej stronie, w drugim często można usunąć źródło problemu dopiero po sprawdzeniu, czy dana funkcja rzeczywiście nie jest już używana.
Nie usuwaj reguły tylko dlatego, że nie wpływa na aktualnie otwartą wersję strony. Może być potrzebna na urządzeniach mobilnych, w menu, formularzu, popupie albo po wykonaniu określonej akcji.
Jak przygotować stronę do zmian?
Najbezpieczniej pracować na kopii testowej, a dopiero po sprawdzeniu efektu przenieść konfigurację na stronę produkcyjną. Przed rozpoczęciem przygotuj:
- kopię zapasową bazy danych,
- kopię plików WordPressa, motywu i wtyczek,
- dostęp do FTP, panelu hostingu lub środowiska stagingowego,
- informację o używanych narzędziach cache i CDN.
Po każdej zmianie wyczyść cache wtyczki, serwera, CDN oraz przeglądarki. W przeciwnym razie możesz oceniać starą wersję arkuszy. Sprawdź stronę na komputerze i telefonie, a także otwórz menu, formularze, galerie, koszyk i popupy, jeśli występują w witrynie.
Ostrzeżenie: usunięcie CSS bez testów może spowodować przesunięcia elementów, niewidoczne przyciski, problemy z responsywnością albo błędy widoczne dopiero po załadowaniu treści przez JavaScript. Jeśli po wdrożeniu strona przestaje się poprawnie wyświetlać, przywróć kopię lub wyłącz ostatnią zmianę.
Którą metodę wybrać?
| Metoda | Trudność | Skuteczność | Ryzyko |
|---|---|---|---|
| Automatyczna wtyczka | Niska | Dobra przy typowych stronach | Konflikty i błędy po zmianach |
| Asset Cleanup | Średnia | Wysoka przy stylach wtyczek | Wyłączenie zasobu na potrzebnej stronie |
Ręczne zarządzanie w functions.php |
Wysoka | Wysoka przy dobrej znajomości kodu | Awaria wyglądu lub motywu |
Usuwanie CSS za pomocą wtyczki
Wtyczki wydajnościowe, takie jak WP Rocket lub Perfmatters, mogą oferować funkcję określaną jako „Remove Unused CSS”. Jej działanie polega na analizie stylów i przygotowaniu wersji arkusza zawierającej reguły potrzebne na danej stronie. Nazwy opcji i szczegóły konfiguracji mogą zmieniać się wraz z aktualizacjami, dlatego sprawdź dokumentację używanego narzędzia.
- Wykonaj kopię zapasową i włącz tryb testowy lub pracuj na stagingu.
- Otwórz ustawienia optymalizacji CSS w wybranej wtyczce.
- Włącz funkcję usuwania nieużywanych reguł i zapisz konfigurację.
- Wyczyść cache, a następnie sprawdź najważniejsze podstrony na komputerze i urządzeniach mobilnych.
- Jeśli elementy wyglądają niepoprawnie, użyj wyjątków dla klas, plików lub stron wskazanych przez wtyczkę.
Automatyczna optymalizacja jest wygodna, ale nie rozpoznaje bezbłędnie każdego elementu dynamicznego. Szczególnej uwagi wymagają popupy, filtry, formularze, rozwijane menu i komponenty ładowane dopiero po interakcji.
Wyłączanie stylów za pomocą Asset CleanUp
Asset CleanUp: Page Speed Booster pozwala kontrolować zasoby ładowane przez motyw i wtyczki. To dobre rozwiązanie, gdy na przykład arkusz formularza kontaktowego jest ładowany na każdej stronie, choć formularz znajduje się tylko na jednej z nich.
- Zainstaluj i skonfiguruj Asset CleanUp na kopii testowej witryny.
- Otwórz podstronę w panelu WordPressa i przejdź do listy załadowanych zasobów.
- Rozpoznaj arkusz należący do wtyczki lub motywu, który nie jest potrzebny na tej stronie.
- Wyłącz zasób tylko na wskazanej podstronie albo ustal regułę obejmującą konkretną grupę stron.
- Zapisz ustawienia, wyczyść cache i sprawdź stronę po wyłączeniu arkusza.
To podejście daje większą kontrolę niż globalne usuwanie CSS. Nie wyłączaj jednak pliku wyłącznie na podstawie nazwy. Sprawdź, czy nie zawiera stylów wspólnych dla kilku funkcji oraz czy nie jest potrzebny w wersji mobilnej.
Ręczne wyrejestrowanie stylu w functions.php
Zaawansowani użytkownicy mogą wyrejestrowywać arkusze przez wp_dequeue_style(). Najpierw trzeba ustalić identyfikator stylu, czyli jego handle. Można go znaleźć w kodzie motywu, dokumentacji wtyczki albo narzędziach deweloperskich przeglądarki.
add_action( 'wp_enqueue_scripts', function() {
if ( ! is_page( 'kontakt' ) ) {
wp_dequeue_style( 'plugin-form-style' );
wp_deregister_style( 'plugin-form-style' );
}
}, 100 );Przykład wyłącza arkusz poza stroną „Kontakt”. Identyfikator plugin-form-style jest przykładowy i trzeba zastąpić go handle używanym przez konkretną wtyczkę. Nie edytuj bezpośrednio plików motywu rodzica, ponieważ aktualizacja może nadpisać zmiany. Kod umieść w motywie potomnym albo w rozwiązaniu przeznaczonym do własnych fragmentów kodu.
Po zmianie sprawdź, czy arkusz nie jest wymagany przez inne komponenty. Gdy nie masz pewności, wybierz staging i wykonaj test wszystkich typów stron, zamiast wyłączać zasób na produkcji.
Najbezpieczniejsza kolejność to analiza, kopia zapasowa, staging, jedna zmiana i test na różnych urządzeniach. Dla początkujących zwykle najlepszym punktem wyjścia jest funkcja usuwania nieużywanego CSS we wtyczce optymalizacyjnej, a przy stylach konkretnych wtyczek – reguły Asset CleanUp. Ręczny kod daje największą kontrolę, lecz wymaga znajomości zależności motywu i wtyczek.
