W artykule:
Czy chcesz usunąć nieużywany CSS w WordPress, aby Twoja witryna ładowała się szybciej?
Nieużywany CSS to dowolny kod CSS dodany przez motyw WordPress lub wtyczki, których tak naprawdę nie potrzebujesz. Usunięcie tego kodu CSS poprawia wydajność WordPress i wrażenia użytkownika.
W tym artykule pokażemy, jak łatwo usunąć nieużywany CSS w WordPress bez łamania swojej witryny.
Co To jest Nieużywany CSS w WordPress?
Nieużywany CSS w WordPress to kod CSS, który ładuje się na twojej stronie, ale w rzeczywistości nie jest potrzebny do wyświetlenia strony.
Dodatkowy kod może sprawić, że przeglądarka odwiedzającego zajmie trochę więcej czasu, aby renderować stronę, co tworzy złe wrażenia użytkownika. Wolniejszy czas ładowania może nawet wpłynąć na rankingi wyszukiwania, powodując mniejszy ruch w witrynie.
Możesz zobaczyć, jak niewykorzystany kod CSS wpływa na Twoją witrynę za pomocą Google Pagespeed Insights. Pokaże Ci sekcję zatytułowaną „Usuń nieużywany CSS” ze szczegółami, które Pliki CSS mają wpływ na czas ładowania.
Dlaczego Nieużywany CSS jest dodawany w WordPress?
CSS służy do stylizacji wyglądu witryny WordPress. Twój motyw WordPress zawiera CSS, a większość z nich zawiera się w jednym stylu.plik css.
Oprócz CSS Twojego motywu, Twoje wtyczki WordPress będą również ładować własny CSS. Na przykład WooCommerce załaduje CSS do wyświetlania produktów, wtyczka do tworzenia stron doda własny CSS do wyświetlania niestandardowych stron, a wtyczka do tworzenia formularzy będzie zawierała CSS do stylizacji formularzy.
Następnie masz czcionki internetowe, czcionki ikon i inne elementy, które będą musiały również dodać własne pliki CSS.
Zazwyczaj pliki te są bardzo małe i szybko się ładują. Jeśli jednak Twoja witryna WordPress ma ich wiele, efekty mogą się sumować i mieć zauważalny wpływ na szybkość witryny.
Jak usunąć Nieużywany CSS w WordPress?
Istnieje kilka różnych sposobów, aby zmniejszyć nieużywane CSS w witrynie WordPress.
Jednak całkiem trudnym zadaniem byłoby całkowite usunięcie wszystkich nieużywanych CSS w WordPress. Ze względu na sposób, w jaki WordPress działa za kulisami, niektóre nieużywane CSS mogą być trudne do znalezienia i usunięcia.
Mimo to pokażemy Ci dwie metody usuwania nieużywanego CSS i możesz wybrać tę, która będzie dla ciebie najlepsza.
Metoda 1. Usuń Nieużywany CSS w WordPress za pomocą wp Rocket
Ta metoda jest łatwiejsza i zalecana jest dla początkujących. Znacznie poprawia ogólną dostawę plików CSS w witrynie WordPress, w tym usuwa większość nieużywanych 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 lepszych wrażeń użytkownikom. Oznacza to, że Twoja strona ładuje się szybko na narzędzia do testowania prędkości, a także czuje się szybko dla użytkowników.
Najpierw musisz zainstalować i aktywować wtyczkę WP Rocket. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Ustawienia ” wp Rocket strony i przejść do zakładki „Optymalizacja plików”.
Następnie przewiń w dół do sekcji Pliki CSS, a następnie zaznacz pole obok opcji ” Usuń Nieużywany CSS (Beta)”.
Ponieważ ta funkcja przez WP Rocket jest w wersji beta, zapyta ponownie, czy chcesz włączyć ustawienie. Możesz śmiało kliknąć przycisk „Aktywuj Usuń Nieużywany CSS”.
Gdy opcja „Usuń Nieużywany CSS” jest aktywna, możesz określić nazwy plików CSS, identyfikatory lub klasy, które nie powinny być usuwane w polu „CSS safelist”.
Następnie musisz zapisać zmiany, przewijając w dół i klikając przycisk Zapisz zmiany. Kiedy to zrobisz, WP Rocket zacznie przetwarzać Twoje pliki CSS i pokaże Ci pasek postępu.
To zajmie kilka minut, zanim wtyczka przetworzy i usunie nieużywane pliki CSS z twojej witryny.
Zobaczysz ’ Usuń Nieużywany CSS jest kompletny!’komunikat po zakończeniu procesu przez wtyczkę.
Teraz odwiedź narzędzie Google Pagespeed Insights i przetestuj wydajność swojej witryny.
Usuń blokowanie renderowania CSS dla WordPress
WP Rocket pozwala zoptymalizować plik CSS i usunąć CSS blokujący renderowanie ze swojej witryny.
Aby rozpocząć, możesz przejść do zakładki „Optymalizacja plików” w WP Rocket. Stąd przewiń w dół do sekcji Pliki CSS, a następnie zaznacz pole obok opcji „Optymalizuj dostarczanie CSS”.
Ta opcja generuje plik CSS, który zawiera tylko kod CSS potrzebny do wyświetlenia widocznej części witryny. Najpierw ładuje ten plik, wyświetla stronę odwiedzającym, a następnie ładuje inne pliki CSS za pomocą technologii zwanej odroczonym ładowaniem.
Usuwając ten blokujący renderowanie CSS, Twoja witryna staje się widoczna dla użytkowników znacznie szybciej niż w przypadku załadowania wszystkich plików CSS przed wyświetlaniem 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 również 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ż usuwać ciągi zapytań z plików statycznych, łączyć pliki Google Fonts i minimalizować HTML. Wszystkie te poprawki dodają drobne ulepszenia do ogólnej prędkości, które zwiększają szybsze ładowanie dla odwiedzających.
Zobaczysz także opcje minifikacji i łączenia plików CSS. Te opcje zmniejszą liczbę żądań HTTP i zapewnią dodatkowy wzrost prędkości.
Musisz jednak dokładnie sprawdzić swoją witrynę, aby upewnić się, że nic nie jest uszkodzone po włączeniu tych ustawień.
Dodatkowo możesz zastosować tę samą optymalizację dla plików JavaScript w swojej witrynie. Możesz je minifikować i łączyć, aby służyć jako pojedynczy plik i odroczyć ładowanie plików JavaScript, aby poprawić wydajność.
Aby uzyskać więcej informacji, zobacz nasz samouczek krok po kroku, jak prawidłowo skonfigurować wp Rocket w WordPress.
Metoda 2. Usuń Nieużywany CSS w WordPress za pomocą czyszczenia zasobów
Ta metoda jest trochę zaawansowana, ale niezwykle potężna i pozwoli Ci łatwo usunąć niewykorzystany CSS z dowolnej strony 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ę do czyszczenia zasobów. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Czyszczenie Zasobów ” Ustawienia stronę i przełącz na kartę tryb testowy. Stąd musisz włączyć opcję „Włącz tryb testowy”.
Pozwala to wypróbować różne ustawienia i przetestować je jako administrator bez wpływu na odwiedzających witrynę.
Następnie musisz odwiedzić Asset CleanUp ” menedżer CSS / JS strona. Stąd możesz rozładować niechciane pliki CSS i JavaScript na podstawie strony.
Najpierw pobierze twoją stronę główną i pokaże Ci wszystkie pliki CSS i JavaScript załadowane na tę stronę.
Musisz przewinąć w dół i przejrzeć załadowane pliki. Jeśli widzisz plik, którego nie potrzebujesz, możesz go rozładować dla tej konkretnej strony, typu postu lub całej witryny.
Wtyczka pozwala również wybrać określone posty lub strony stąd, lub możesz uzyskać dostęp do tych samych opcji, edytując post lub stronę, jak zwykle.
Na ekranie edycji postów znajdziesz Pole Oczyszczanie zasobów tuż pod edytorem postów.
Wtyczka automatycznie pobierze i wyświetli wszystkie pliki i zasoby załadowane, gdy odwiedzający wyświetli tę stronę w Twojej witrynie. Następnie możesz po prostu rozładować nieużywane pliki CSS lub JavaScript, których nie potrzebujesz na tej stronie.
Ważne: Nie zapomnij przetestować swojej witryny po usunięciu nieużywanych CSS lub JavaScript, aby upewnić się, że wszystko działa dobrze.
Gdy skończysz rozładowywać i usuwać nieużywane pliki CSS i JavaScript, możesz wrócić do strony ustawień wtyczki i wyłączyć „tryb testowy”.
Nie zapomnij kliknąć przycisku Aktualizuj wszystkie ustawienia, aby zapisać zmiany.
Możesz teraz przetestować swoją witrynę za pomocą Google Pagespeed Insights, aby zobaczyć zmianę w nieużywanym powiadomieniu CSS.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo usunąć nieużywany CSS w WordPress. Możesz również skorzystać z naszego kompletnego przewodnika na temat tego, ile kosztuje zbudowanie strony internetowej i sprawdź naszą listę najlepiej zarządzanych hostingów WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
