Jak bezpiecznie usunąć nieużywany CSS w WordPress

Czy chcesz usunąć nieużywany CSS w WordPress i przyspieszyć swoją stronę?

Kluczowym celem optymalizacji strony internetowej jest usunięcie zbędnego kodu. Zmniejsza to całkowity rozmiar stron Twojej witryny i prowadzi do skrócenia czasu ładowania strony oraz lepszego doświadczenia użytkowników dla odwiedzających.

Jednym z obszarów, w którym można znacznie zmniejszyć rozmiar stron internetowych, jest stylizacja. Stylizacja strony internetowej jest kontrolowana przez oparty na regułach język zwany Kaskadowymi Arkuszami Stylów, który obok HTML i Javascript jest jednym z podstawowych elementów składowych sieci World Wide Web.

Arkusze stylów, częściej określane skrótem CSS, mogą być używane do definiowania kolorów strony, czcionek, tła, stylizacji obrazu, marginesów, dopełnienia i nie tylko. W poniższym przykładzie kod CSS zapewnia, że ​​nagłówki są wyśrodkowane i wyświetlane na czerwono.

 h1 { text-align: center; color: red; }

Typowa witryna WordPress będzie wymagać wielu arkuszy stylów, aby poprawnie wyświetlić stronę. Oprócz stylu CSS używanego w podstawowej wersji WordPress, wywołania CSS są wykonywane przez aktywowany motyw WordPress i wtyczki WordPress. Dlatego witryna WordPress może wymagać tuzina plików CSS, aby wszystko poprawnie wystylizować.

Kaskadowe arkusze stylów mogą wydłużyć czas ładowania strony, jeśli pliki są zbyt duże lub wywołanych jest zbyt wiele plików CSS. Aby rozwiązać ten problem, można zastosować wiele technik, takich jak Odroczenie, Minifikacja i Łączenie.

Poniżej znajduje się podsumowanie tych technik.

Jeśli chcesz jeszcze bardziej zmniejszyć wagę CSS, zalecam usunięcie nieużywanych reguł CSS w WordPress, aby odwiedzający pobierali tylko wymagane style. Uniemożliwiając przeglądarce ładowanie niepotrzebnego kodu CSS, możesz przyspieszyć ładowanie strony i zapewnić odwiedzającym lepszą obsługę.

Przyjrzyjmy się bliżej nieużywanemu CSS i sprawdźmy, jak usunąć nieużywany kod CSS ze swojej witryny WordPress.

Co to jest nieużywany CSS w WordPress i dlaczego występuje?

Nieużywany CSS odnosi się do wszystkich reguł CSS, które nie są wywoływane na bieżącej stronie. Dzieje się tak często, ponieważ strony rzadko muszą wywoływać każdą pojedynczą regułę CSS z arkusza stylów. Na przykład arkusz stylów może zawierać regułę CSS służącą do wyświetlania nagłówka w kolorze czerwonym, ale zostałaby sklasyfikowana jako nieużywany CSS, gdyby nie została o to poproszona.

Ponieważ przeglądarki nie wymagają nieużywanych reguł CSS, kod niepotrzebnie zwiększa rozmiar plików CSS. Możesz zatem skrócić czas ładowania strony, usuwając nieużywany kod CSS w WordPress.

Motywy WordPress muszą używać pliku styles.css jako głównego arkusza stylów, chociaż motywy często używają dodatkowych arkuszy stylów dla czcionek, skórek motywów i innych elementów projektu. Wiele reguł CSS zawartych w plikach CSS motywu jest wymaganych tylko w określonych sytuacjach. Mimo to te pliki CSS są zwykle ładowane na każdej stronie Twojej witryny.

Wtyczki WordPress są szczególnie złe do wstawiania nieużywanego CSS na strony, ponieważ programiści często domyślnie ładują arkusze stylów na wszystkich stronach.

Dobrą praktyką jest usuwanie nieużywanych CSS w WordPress, ale jeśli usuniesz jakikolwiek kod CSS, który jest ważny dla projektu Twojej witryny, projekt Twojej witryny się zepsuje.

Co z krytycznym CSS?

Innym terminem, który często słyszysz, jest Critical CSS . Odnosi się do dowolnej stylizacji, która jest wymagana do natychmiastowego wyświetlania treści użytkownikom bez przewijania. Ten obszar jest określany jako Powyżej zakładki , a czas potrzebny przeglądarce na załadowanie zawartości powyżej zakładki to First Contentful Paint (FCP).

Google zaleca wyodrębnienie krytycznego kodu CSS, zminimalizowanie go i wyświetlenie w elemencie HEAD, aby zapewnić szybkie ładowanie pierwszej treści. Opóźnienia można użyć do późniejszego załadowania niekrytycznych plików CSS, aby mieć pewność, że mniej ważne pliki CSS nie spowalniają początkowego ładowania strony.

Jak znaleźć nieużywany CSS

Szybkim sposobem na wykrycie nieużywanego CSS na stronie jest wprowadzenie jej adresu URL do narzędzia do raportowania wydajności, takiego jak GTmetrix, Google PageSpeed ​​Insights lub Pingdom Website Speed ​​Test. Raport wyróżni nieużywane CSS i zaleci usunięcie lub odroczenie nieużywanych reguł.

Nowoczesne przeglądarki udostępniają narzędzia programistyczne ułatwiające analizę projektu i kodu witryny. Opcje programistyczne w Google Chrome nazywają się Chrome DevTools, a na karcie Zasięg można znaleźć nieużywany kod JavaScript i CSS. Jest to szybki i skuteczny sposób znajdowania plików CSS, które mają wiele nieużywanych reguł.

Aby załadować Chrome DevTools, wystarczy kliknąć stronę prawym przyciskiem myszy i wybrać Inspect . Następnie możesz kliknąć kartę Zasięg, aby zobaczyć adres URL każdego pliku i określić, czy jest to plik JavaScript, CSS, czy oba. Po prawej stronie możesz zobaczyć całkowity rozmiar pliku w bajtach i całkowitą liczbę niewykorzystanych bajtów. Pasek wizualizacji wyświetla nieużywany kod w kolorze czerwonym, a wymagany kod w kolorze niebiesko-zielonym. Jest to podsumowane w dolnym panelu, ale jeśli klikniesz konkretny plik, zobaczysz nieużywane reguły CSS podświetlone na czerwono w panelu powyżej.

Sprawdź stronę Zakres dla programistów Chrome, aby uzyskać więcej informacji o tym, jak działa karta Zakres.

Wiele innych darmowych i nieużywanych narzędzi CSS premium można znaleźć w Internecie.

• Narzędzie JitBit Unused CSS – bezpłatna usługa, która indeksuje każdą stronę w Twojej witrynie i wyróżnia selektory CSS, które nie są nigdzie używane
• PurifyCSS Online – przydatne bezpłatne narzędzie, które podkreśla nieużywany kod i zapewnia czyste pliki CSS
• UnusedCSS – usługa premium, która skanuje adresy URL stron i zapewnia czystsze pliki CSS bez zbędnego kodu (cena zaczyna się od 25 USD miesięcznie)

Podczas gdy narzędzia takie jak Chrome DevTools i PurifyCSS Online mogą być przydatne do przeglądania nieużywanych reguł CSS na stronach internetowych, nie zawsze są praktyczne w rozwiązywaniu problemu nieużywanych CSS na dynamicznej platformie, takiej jak WordPress.

Motywy i wtyczki WordPress wymagają załadowania różnych arkuszy stylów w całej witrynie, dlatego ilość nieużywanych CSS zmienia się ze strony na stronę. Dlatego uważam, że generalnie lepiej jest używać wtyczek optymalizacyjnych WordPress do usuwania (lub odkładania) nieużywanych CSS w WordPress.

Przyjrzyjmy się bliżej niektórym przydatnym wtyczkom WordPress, które pomagają usunąć nieużywany CSS z Twojej witryny WordPress.

Usuń nieużywany CSS w WordPress za pomocą WP Rocket

WP Rocket to jedno z najpopularniejszych rozwiązań wydajnościowych WordPress na rynku. Licencja na WP Rocket jest dostępna za 49 USD rocznie.

Wtyczka zawiera narzędzie, które może jednym kliknięciem usunąć wszystkie nieużywane CSS z Twojej witryny. W tle WP Rocket przegląda wszystkie arkusze stylów i skrypty na każdej stronie oraz dopasowuje reguły CSS do selektorów CSS znajdujących się w kodzie HTML. Ten proces odbywa się zewnętrznie na serwerach WP Rocket, więc upewnij się, że wtyczka bezpieczeństwa WordPress umieściła adres IP ich serwera na białej liście.

Ponieważ WP Rocket automatycznie usuwa cały nieużywany kod CSS, możesz napotkać sytuacje, w których to narzędzie może zepsuć część projektu Twojej witryny, na przykład formularz kontaktowy. Jeśli tak się stanie, dodaj odpowiedni plik CSS, identyfikator lub klasę do bezpiecznej listy WP Rocket CSS.

Zalecana lektura: Jak wyczyścić bazę danych WordPress

Usuń nieużywany CSS w WordPress za pomocą Perfmatters

Perfmatters to rozwiązanie optymalizacyjne, którego używam na mojej stronie internetowej do usuwania nieużywanego kodu CSS. Jest to wtyczka premium WordPress, która jest dostępna za jedyne 24,95 USD rocznie.

Za pomocą Menedżera skryptów Perfmatters możesz włączać i wyłączać pliki CSS i pliki JavaScript w określonych postach i na stronach w całej witrynie. Wyjątki mogą dotyczyć wykluczeń skryptów na podstawie wyrażeń regularnych, statusu logowania użytkownika i typu jego urządzenia.

Przekonałem się, że wtyczka jest bardzo skuteczna w radzeniu sobie ze źle zoptymalizowanymi wtyczkami WordPress. Weźmy na przykład Jetpack. Nawet jeśli nie używasz żadnych modułów Jetpack do front-endu swojej witryny, nadal będzie on ładował plik CSS o wielkości 85,1 KB na każdej stronie Twojej witryny. Jak widać poniżej, Perfmatters pozwala mi zatrzymać ładowanie tego niepotrzebnego pliku CSS.

Usuwanie nieużywanego CSS w WordPress za pomocą Asset CleanUp

Doskonałą alternatywą dla Perfmatters jest Asset CleanUp. Wtyczka jest darmowa, chociaż dostępna jest wersja premium za 42,08 €, która odblokowuje wiele dodatkowych funkcji.

Menedżer CSS i JavaScript Asset CleanUp umożliwia wstępne ładowanie plików i wyłączanie plików na określonych stronach w witrynie. Wyjątki mogą dotyczyć zalogowanych użytkowników.

Jeśli dokonasz aktualizacji do Asset CleanUp Pro, uzyskasz większą kontrolę nad tym, które obszary Twojej witryny są ładowane, pliki CSS i JavaScript oraz będziesz mógł dodawać dodatkowe wyjątki dotyczące rozmiaru ekranu i wyrażeń regularnych.

Usuwanie nieużywanych plików CSS za pomocą RapidLoad

Autoptimize to skuteczna wtyczka optymalizacyjna WordPress, która umożliwia agregowanie, minimalizowanie i buforowanie plików CSS, JavaScript i HTML. Wtyczka WordPress RapidLoad Power-Up jeszcze bardziej rozszerza Autoptimize, pomagając usunąć nieużywany CSS w WordPress.

Podobnie jak narzędzie do optymalizacji CSS WP Rocket, RapidLoad Power-Up skraca czas ładowania strony, sprawdzając, które reguły CSS są rzeczywiście potrzebne.

Jak sama nazwa wskazuje, wtyczka wykorzystuje usługę RapidLoad w celu zmniejszenia rozmiaru plików CSS. Dlatego musisz zarejestrować się w usłudze RapidLoad, aby korzystać z RapidLoad Power-Up. Miesięczne plany są dostępne dla RapidLoad za 5,83 USD miesięcznie.

Końcowe przemyślenia

Deweloperzy nie robią wystarczająco dużo, aby zoptymalizować arkusze stylów, które nadają styl i kształt naszym witrynom. Przekonasz się, że wiele motywów i wtyczek WordPress ładuje wszystkie reguły CSS w całej witrynie, nawet jeśli te reguły są wymagane tylko na określonych stronach.

Aby zobaczyć, ile niewykorzystanego kodu CSS znajduje się na Twojej stronie internetowej, polecam przeprowadzić kilka testów porównawczych w narzędziu do raportowania wydajności, takim jak GTmetrix, Google PageSpeed ​​Insights lub Pingdom Website Speed ​​Test. Narzędzia dla programistów, takie jak Chrome DevTools i PurifyCSS Online, mogą być również używane do sprawdzania, ile niepotrzebnego ciężaru CSS dodaje do stron.

Na szczęście możemy usunąć nieużywany CSS w WordPress za pomocą wielu rozwiązań wydajnościowych WordPress. Jeśli wolisz zautomatyzować proces, polecam użycie WP Rocket lub RapidLoad Power-Up. Ci z was, którzy mają bardziej praktyczne podejście do konserwacji WordPress, będą preferować Perfmatters i Asset CleanUp, ponieważ te wtyczki zapewniają pełną kontrolę nad tym, które obszary witryny ładowane są pliki CSS i JavaScript.

Należy pamiętać, że usunięcie ważnego kodu CSS spowoduje uszkodzenie projektu witryny, dlatego należy regularnie sprawdzać strony witryny, aby upewnić się, że wszystko działa poprawnie.

Zalecana lektura: Jak odroczyć parsowanie javascript w WordPress

Powodzenia.

Kevina