Właściwy sposób na usunięcie nieużywanego kodu CSS w WordPress

Posiadanie dużej ilości niewykorzystanego kodu może znacznie spowolnić działanie Twojej witryny. A jednym z typowych podejrzanych w WordPressie jest zbędny kod CSS. Na szczęście istnieje kilka sposobów, aby zapobiec słabej wydajności Twojej witryny i przestać rujnować wygodę użytkownika. Chociaż jednym ze sposobów na to jest metoda ręczna, wymaga ona znacznego doświadczenia rozwojowego. Inną, bardziej przyjazną dla początkujących opcją jest skupienie się na istniejących narzędziach i usunięcie nieużywanego CSS w WordPressie, dodanego przez motywy i wtyczki, za pomocą zaledwie kilku kliknięć.

Jak skutecznie usunąć nieużywany CSS w WordPress

Jak zapewne wiesz, WordPress korzysta z wielu wtyczek, motywów i bibliotek innych firm. Wszystkie oferują liczne funkcje poprawiające funkcjonalność Twojej witryny. Ale najczęściej większość zawiera mnóstwo funkcji, których w rzeczywistości nie używasz. Niemniej jednak, jeśli nie korzystasz specjalnie z WordPressa do utrzymania i optymalizacji swojej witryny, załaduje ona wszystko dla każdego odwiedzającego. Powoduje to przenoszenie dużej ilości nieużywanego CSS i spowolnienie samego serwisu. W konsekwencji słaba wydajność zmniejszy ruch w witrynie i obniży rankingi wyszukiwania.

W wielu przypadkach usunięcie 100% nieużywanego kodu jest dość trudne, prawie niemożliwe. Ale nawet usunięcie najmniejszej ilości lub sprzecznego skryptu poprawi wydajność Twojej witryny. Oprócz typowej „minimizacji” kodu, istnieje kilka sposobów na zmniejszenie wpływu nieużywanego kodu CSS bez uszkodzenia witryny.

Dlaczego nieużywany CSS jest tam w ogóle?

Ponieważ CSS odpowiada za stylizację wyglądu Twojej witryny WordPress, każdy motyw, który możesz znaleźć, zawiera go. I nie tylko motywy, ale wiele wtyczek ma własne opcje stylizacji i dostosowywania. Nie wspominając o wszelkiego rodzaju kreatorach stron internetowych, bibliotekach, a nawet pojedynczych elementach, w których używasz tylko niewielkiej ich części. Ogólnie rzecz biorąc, kilka wtyczek nie wpłynie tak bardzo na stronę internetową. Ale jeśli masz dużo, skumulowany efekt może naprawdę spowolnić twoją stronę.

Narzędzia do usuwania nieużywanego CSS

Chociaż istnieje wiele narzędzi, które mogą pomóc w usunięciu nieużywanego kodu CSS, większość z nich nie ma zastosowania w każdej sytuacji. Oczywiście w przypadku stron statycznych większość z nich będzie bardzo pomocna. Jednak dynamiczne strony internetowe często ładują i stylizują elementy poprzez wstrzykiwanie klas CSS za pomocą JavaScript. A to jest trudniejsze, ponieważ ciężko jest wykryć te klasy. Na przykład witryny eCommerce, które dynamicznie stylizują produkty i strony koszyka.

Pomyśl o tym podczas tworzenia

Jednym ze sposobów na pozbycie się nieużywanego CSS od samego początku jest myślenie o tym podczas tworzenia strony internetowej. Zasadniczo możesz podzielić swój kod CSS na różne pliki, z których każdy służy określonemu celowi. Jednak większość ludzi woli korzystać z motywów WordPress, aby uniknąć tworzenia strony internetowej od zera. I tutaj albo musisz być bardzo umiejętny, albo znaleźć ekspertów WordPress, którzy zrobią to za Ciebie.

Korzystanie z rozwiązania online UnusedCSS

Innym sposobem jest użycie rozwiązań premium, takich jak UnusedCSS, aby łatwo znaleźć i usunąć problemy z CSS. Zaletą tego narzędzia jest możliwość skanowania plików JavaScript i wyszukiwania zastrzyków. Niektóre z jego najważniejszych cech to:

• Automatyczne wyszukiwanie nieużywanych reguł CSS
• Zapewnij Ci czysty CSS do pobrania
• Poznawanie zasad projektowania responsywnego i zapytań o media
• Sprawdzanie strony pod kątem zmian
• Podgląd zmian
• i więcej

PurgeCSS do usuwania dodatkowego CSS

To kolejne narzędzie bardzo pomocne podczas tworzenia. Ci, którzy pracują z Bootstrap, Foundation i podobnymi frameworkami CSS, uważają to za bardzo przydatne. Ponieważ prawdopodobnie używasz tylko części reguł CSS, to narzędzie może pomóc Ci odfiltrować wszystkie nieużywane style. Zasadniczo jest to świetny sposób na znaczne zmniejszenie pliku CSS.

Wtyczka autooptymalizacji

Następna w kolejce jest bardzo popularna wtyczka WordPress. Dzięki niemu możesz łatwo minimalizować, łączyć i buforować style. Wstawia niezbędne reguły w nagłówek strony, wstawia krytyczne CSS, minimalizuje HTML i przenosi skrypty do stopki. Zasadniczo może być używany do implementacji „leniwego ładowania” obrazów, optymalizacji czcionek i asynchronicznego niepołączonego JavaScriptu. Każda strona internetowa może skorzystać z tej rozbudowanej wtyczki.

Rakieta WP

Jedna z najbardziej przyjaznych dla początkujących opcji, jakie możesz znaleźć. WP Rocked oferuje skuteczne rozwiązania dla optymalizacji Twojej strony i szybkości. Nie tylko zapewni Ci satysfakcjonujące wyniki w testach prędkości, ale w widoczny sposób poprawi wrażenia użytkowników. Jeśli chcesz usunąć nieużywany CSS, po prostu go aktywuj, włącz „Optymalizacja plików” i przejdź do opcji „Optymalizuj dostarczanie CSS”. Dostarczy Ci plik CSS tylko z niezbędnymi regułami CSS, które załadują się przed innymi. Ponadto WP Rocket automatycznie wyczyści pamięć podręczną i pozwoli na minimalizację i agregację plików CSS.

Usuń nieużywany kod CSS za pomocą narzędzia Asset CleanUp

Za pomocą narzędzia Asset CleanUp można usunąć nieużywane pliki z motywów i wtyczek. Umożliwia wykonanie tego zadania dla każdej strony osobno. Chociaż jest to nieco skomplikowany i czasochłonny sposób, jest to bardzo skuteczna metoda w użyciu. Podobnie jak niektóre inne wtyczki, ma opcję „Trybu testowego”, aby zapobiec niepożądanym efektom w Twojej aktywnej witrynie internetowej. Jednak Asset CleanUp może również pomóc w usunięciu nieużywanych plików JavaScript. Wreszcie, kiedy testujesz to, co widzą Twoi goście, możesz po prostu zdecydować się na wyładowanie wszystkiego, co nie jest konieczne.

Zoptymalizuj swój CSS dzięki Perfmatters

Ostatnią, ale nie mniej ważną na tej liście, jest jedna z wtyczek wydajności premium. Perfmatters pomoże Ci usunąć zarówno nieużywane CSS, jak i JavaScript. Po rejestracji, instalacji i aktywacji będziesz mieć dostęp do menedżera skryptów. To, między innymi, może pomóc z łatwością modyfikować każdą ze stron lub postów. Zasadniczo zapewnia proste menu pulpitu nawigacyjnego, którego możesz użyć do usunięcia wszelkich nieużywanych kodów CSS i JavaScript na osobnych stronach lub dla całej witryny. Podobnie jak w przypadku CSS, możesz go użyć do łączenia lub minimalizowania plików JavaScript w celu uzyskania lepszej wydajności.

Dodatkowe uwagi mające na celu poprawę szybkości witryny

Rozważ użycie CDN do dostarczania plików CSS – aby znacznie zmniejszyć prędkość ładowania CSS lub innych plików.

Regularnie minimalizuj i łącz większość plików CSS – aby usunąć niepotrzebne reguły, klasy i dodatkowe znaki z CSS w WordPress. Jest jednak dyskusyjne, czy jest to pomocne dla wszystkich dużych witryn ze względu na złożoność kodu, rozmiar takich plików i dodatkową późniejszą optymalizację.

Usunięcie absolutnie każdej części nieużywanego CSS w WordPressie jest prawie niemożliwe. Możesz jednak skorzystać z powyższych metod, aby dość uczciwie przyspieszyć swoją witrynę. Będzie to zależało od liczby przypadków, ale jeśli Twoja witryna WordPress ma naprawdę dużo nieużywanego kodu, różnica będzie dość zauważalna. Z drugiej strony czasami nawet niewielka zmiana może oznaczać wszystko. Choć celem nie jest posiadanie najszybszej strony internetowej na świecie, drobne zmiany mają znaczenie. Jednak inne wysiłki powinny być skoncentrowane na treści i użyteczności dla użytkowników, a nie na zdobywaniu najwyższych pozycji w testach wyszukiwarek.