Jeśli Twoja witryna WordPress korzysta z płatnego motywu WordPress lub popularnego z oficjalnego repozytorium motywów WordPress, istnieje duże prawdopodobieństwo, że motyw zostanie opracowany dla różnych przypadków użycia. Być może korzystasz tylko z niewielkiego zestawu wszystkich funkcji dostępnych w motywie.
W takim przypadku Twoja witryna ładuje dużo nieużywanego kodu CSS, który nie jest wymagany do stylizowania stron witryny. Na przykład motyw WordPress, którego używasz, może mieć również style dla stron WooCommerce, ale jeśli prowadzisz tylko blog w swojej witrynie WordPress, to nie używasz CSS zawartego dla stron WooCommerce w swojej witrynie, a tym samym obsługujesz nieużywane CSS dla użytkowników.
Jeśli przetestowałeś swoją witrynę w narzędziu Google Pagespeed, prawdopodobnie już wiesz, że Twoja witryna ma nieużywane problemy z CSS. W tym przewodniku pokażemy, jak najpierw sprawdzić nieużywany kod CSS, a następnie skorzystać z bezpłatnego narzędzia, aby usunąć nieużywany kod CSS z witryny WordPress.
Jak sprawdzić nieużywany CSS
Google Chrome DevTools (ten, który widzisz po kliknięciu opcji "Sprawdź" w menu kontekstowym) ma funkcję Pokrycie na karcie Źródła. Możesz użyć opcji Pokrycie, aby znaleźć nieużywane CSS i JS, które ładuje Twoja witryna.
- Otwórz swoją witrynę w Chrome na komputerze.
- Kliknij prawym przyciskiem myszy pusty biały obszar w swojej witrynie i wybierz Sprawdzać z menu kontekstowego.
- Kliknij na Źródła tab, naciśnij Ctrl + Shift + P aby otworzyć okno poleceń, a następnie wpisz zasięg i wybierz Rozpocznij zakres oprzyrządowania i odśwież stronę z dostępnych poleceń.
- W zakładce Zasięg kliknij Filtr URL i wprowadź tutaj domenę główną swojej witryny, aby wyświetlić tylko wewnętrzne pliki CSS/JS.
└ Sprawdź Niewykorzystane bajty kolumna, aby zobaczyć procent danych ładowanych w pliku CSS/JS z Twojego motywu.
- Kliknij plik CSS, aby wyświetlić nieużywany kod CSS (oznaczony czerwonymi paskami) załadowany przez Twoją witrynę. CSS, który jest używany na bieżącej stronie, zostanie pokazany z zielonymi paskami.
Po przeanalizowaniu wszystkich nieużywanych CSS ładowanych na Twojej stronie, czas go usunąć. Dostępnych jest kilka bezpłatnych narzędzi do usuwania nieużywanego kodu CSS ze stron internetowych. Poniżej znajduje się jedno z popularnych narzędzi, które przetestowałem i wykorzystałem we własnych projektach.
Użyj PurifyCSS Online, aby usunąć nieużywany CSS
Zwykle można znaleźć wtyczkę do prawie wszystkiego w WordPressie. Ale do usuwania nieużywanego CSS niestety nie ma ani jednej dostępnej wtyczki. Dlatego użyjemy ręcznych narzędzi, które nie są specyficzne dla Wordpress, aby usunąć nieużywane CSS z Twojej witryny.
PurifyCSS jest najbardziej przyjazne narzędzie nie-deweloperskie można znaleźć, aby poradzić sobie z nieużywanym CSS. Narzędzie ma prosty interfejs użytkownika, który umożliwia użytkownikom podanie adresu URL witryny LUB kodu HTML i CSS. W przypadku WordPress będziemy używać opcji adresu URL i udostępniać linki do wszystkich rodzajów stron w Twojej witrynie, aby narzędzie mogło pobrać CSS ze wszystkich i zoptymalizować pod kątem nieużywanego CSS.
Oto krótka lista stron, które należy umieścić w narzędziu:
- Adres strony domowej
- Wiele adresów URL stron postów z każdej kategorii w Twojej witrynie
└ Ma to na celu zapewnienie, że CSS jest uwzględniony we wszystkich elementach postu.
- Kontakt, Informacje, Prywatność i wszelkiego rodzaju różne strony, które możesz mieć w swojej witrynie.
- Strona archiwum, strona wyszukiwania, strony autora
- Niestandardowe strony typu post
Gorąca wskazówka: Utwórz post/stronę z „funkcjami” ze wszystkimi elementami motywu, których używasz lub możesz użyć w przyszłości, takich jak tabela, galeria obrazów, kod, przed, listy uporządkowane, listy nieuporządkowane, formularze, karty, akordeony, bloki Gutenberga, których zwykle używasz itp.
Użyj tego adresu URL posta „funkcje” w narzędziu PurifyCSS Online, aby upewnić się, że uwzględniono CSS dla powszechnie używanych elementów.
Uderz w Oczyść CSS po dodaniu wszystkich odpowiednich typów adresów URL ze swojej witryny do narzędzia PurifyCSS Online.
Skopiuj nowy kod CSS wygenerowany przez narzędzie i użyj go w swojej witrynie. Upewnij się, że wykonaj kopię zapasową oryginalnego style.css i inne pliki CSS w Twoim motywie przed zastąpieniem nowego CSS wygenerowanego przez PurifyCSS.
Wskazówka: Możesz użyć wbudowanego edytora motywów WordPress, aby edytować pliki CSS swojego motywu, lub możesz użyć programu FTP/SFTP, aby połączyć się z serwerem i wygodnie edytować pliki za pomocą edytora Notatnika.