TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

315

Lekkie motywy, takie jak Astra, GeneratePress i Genesis, ładują bardzo mniej CSS i skryptów na stronie. Pomaga to usunąć nieużywane błędy CSS i JavaScript w narzędziu Google PageSpeed ​​Insights i podnieść wynik szybkości. Jednak 99% komercyjnych motywów WordPress łączy wiele funkcji i ładuje ciężkie skrypty i CSS. Niezależnie od tego, czy używasz lekkiego, czy ciężkiego motywu, nadal potrzebujesz wielu funkcji za pośrednictwem wtyczki. Łącząc motyw i wtyczki, ogólny wynik szybkości będzie miał wpływ na każdy plik źródłowy w witrynie. W tym artykule wyjaśnimy, jak usunąć nieużywane CSS i JavaScript z WordPressa, aby poprawić wynik Google PageSpeed ​​Insights.

Powiązane: Przeczytaj 400+ darmowych samouczków WordPress.

Co to jest nieużywany CSS i JavaScript?

Wyjaśnijmy to na prostym przykładzie. Contact Form 7 to jedna z popularnych wtyczek do dodawania formularzy kontaktowych w witrynach WordPress. Generalnie potrzebujesz formularza kontaktowego na stronie „Kontakt" i być może na kilku innych stronach. Nie będziesz używać formularza kontaktowego w każdym poście na blogu. Jednak wtyczka Contact Form 7 załaduje CSS i JavaScript na każdej stronie i poście na blogu w Twojej witrynie To spory problem, gdy masz 1000 postów na blogu i wszystkie ładują się bez potrzeby skrypt formularza kontaktowego / CSS Te niepotrzebne CSS i skrypty nazywane są nieużywanym CSS i nieużywanym skryptem.

Innym dobrym przykładem jest sklep WooCommerce. Potrzebujesz stylów i skryptów WooCommerce tylko na stronach takich jak produkty, archiwa produktów, koszyk, kasa i sklep. Wtyczka nie posiada jednak żadnej opcji uniemożliwiającej wczytywanie plików w postach lub stronach bloga.

Dlaczego to jest problem?

Niestety prawie wszystkie wtyczki ładują zasoby na wszystkich stronach Twojej witryny. Wpłynie to znacząco na szybkość ładowania strony i zmniejszy wynik szybkości w narzędziach takich jak Google PageSpeed ​​Insights. Podczas testowania adresu URL strony w PageSpeed ​​Insights zobaczysz błędy takie jak poniżej jako możliwości.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Błąd PageSpeed ​​dla nieużywanego CSS i JS

Chociaż narzędzie twierdzi, że nie wpłynie to bezpośrednio na wynik wydajności, ma ogromny wpływ na czas ładowania. W tym momencie wynik 30% dotyczy czasu blokowania, a posiadanie niewykorzystanych zasobów CSS / JS i blokowania renderowania obniży wynik do dołu. Ponadto niektóre firmy hostingowe pobierają opłaty na podstawie wykorzystania przepustowości. Załadowanie niepotrzebnych plików CSS / skryptów na Twojej stronie wielokrotnie zwiększy wykorzystanie przepustowości. Dlatego konieczne jest zidentyfikowanie nieużywanych CSS i JavaScript oraz usunięcie ich z ładowania na wszystkich stronach.

Jak zidentyfikować nieużywany CSS i JavaScript?

Musisz zrozumieć, co powoduje ładowanie nieużywanych zasobów na Twoich stronach. Jak wyjaśniono powyżej, nie musisz ładować formularza kontaktowego, sklepu internetowego ani przeglądać wtyczek na wszystkich stronach. Całe zadanie jest jednak bardziej skomplikowane niż myślisz.

  • Najpierw wyczyść pamięć podręczną i wyłącz wtyczkę pamięci podręcznej w swojej witrynie. Teraz przejdź do narzędzia Google PageSpeed ​​Insights i sprawdź wynik szybkości.
  • Kliknij komunikaty „Usuń nieużywany kod JavaScript” i „Usuń nieużywany kod CSS”, aby je rozwinąć. Google pokaże Ci listę zasobów z wielkością transferu i potencjalnymi oszczędnościami.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Wyświetl nieużywane zasoby w PageSpeed

  • Kod zewnętrzny – jak widać na powyższym zrzucie ekranu, „pagad2.googlesyndication.com” pochodzi z Google AdSense. Nie można usunąć nieużywanego kodu CSS i JavaScript załadowanego z witryn innych firm. Skrypty te są ładowane w Twojej witrynie za pomocą wtyczek reklamowych, Analytics, osadzania wideo YouTube lub wtyczek do udostępniania społecznościowego. Musisz więc zrozumieć, że te zewnętrzne zasoby wpłyną na szybkość strony i nie masz nad nimi kontroli, chyba że zdecydujesz się je usunąć. zapoznaj się z artykułem na temat AdSense Vs Page Speed, aby zrozumieć, że reklamy zabiją szybkość Twojej strony.
  • Pliki wtyczek i motywów – w następnej sekcji wyjaśnimy, jak je usunąć.
  • Inline CSS i skrypty – narzędzie Google PageSpeed ​​Insights zazwyczaj ich nie wyświetla. Musisz ręcznie zidentyfikować i usunąć je ze swojej witryny. Jeśli wtyczka wstawia wbudowany kod CSS/skrypt, wyłącz pliki wtyczki lub unikaj dodawania niestandardowego kodu wbudowanego. Pamiętaj, że jest duży problem z ciężkimi motywami, które używają style.css z tysiącami linii. Musisz ręcznie usunąć kod z pliku style.css, aby zmniejszyć rozmiar.

Podsumowując, łatwo jest usunąć nieużywane CSS i JavaScript, jeśli są one ładowane jako osobne pliki. Wczytywania dużego pliku style.css lub wbudowanego kodu CSS nie można usunąć, chyba że ręcznie je przejrzysz i usuniesz nieużywane kody. Alternatywnie może być konieczne znalezienie lekkiego motywu lub wtyczki, aby pozbyć się problemu. Po znalezieniu przyczyny błędu możesz ponownie włączyć wtyczkę buforowania w swojej witrynie.

Jak usunąć nieużywany CSS i JavaScript?

Istnieją dwa sposoby usuwania nieużywanych plików CSS i JS, gdy strona ładuje się w przeglądarce. Pierwszą opcją jest użycie wtyczek premium, takich jak WP Rocket, a drugą opcją jest użycie bezpłatnej wtyczki. Obie metody szczegółowo wyjaśnimy, abyś mógł sprawdzić i wybrać tę łatwą dla siebie.

Usuń nieużywany CSS za pomocą WP Rocket

WP Rocket to najpopularniejsza wtyczka buforująca dla WordPressa, która oferuje bardzo prosty interfejs użytkownika. Aby skrócić czas ładowania strony, należy zakupić wtyczkę i zaktualizować ją do najnowszej wersji (powyżej 3.9).

  • Przejdź do menu „Ustawienia> WP Rocket” w panelu administracyjnym WordPress.
  • Kliknij kartę „Optymalizacja plików” i przewiń w dół do sekcji „Pliki CSS”.
  • Włącz opcję „Nieużywany CSS (Beta)” i potwierdź opcję „Aktywuj Usuń nieużywany CSS” z komunikatu ostrzegawczego.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Usuń nieużywany CSS w WP Rocket

  • Wtyczka rozpocznie przetwarzanie kodu CSS w Twojej witrynie, co może potrwać kilka minut.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Usuń nieużywany CSS jest zakończony

  • Po zakończeniu zobaczysz komunikat o sukcesie „Usuń nieużywany CSS jest kompletny!”.
  • Możesz także włączyć opcję „Optymalizuj dostarczanie CSS”, aby wygenerować krytyczne CSS, aby uniknąć problemów z blokowaniem renderowania CSS.
  • Kliknij przycisk „Zapisz zmiany” u dołu strony, aby ponownie wygenerować pliki z pamięci podręcznej.

Usuń nieużywany JavaScript za pomocą WP Rocket

W przeciwieństwie do CSS, usunięcie JS nie jest możliwe za pomocą wtyczki WP Rocket. Możesz jednak włączyć opcje „Załaduj odroczony JavaScript” i „Opóźnij wykonanie JavaScript” w sekcji „Optymalizacja pliku > Pliki JavaScript”. Opóźni to zarówno kody wewnętrzne, jak i zewnętrzne oraz wyeliminuje blokujące renderowanie problemy JavaScript.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Opóźnij wykonanie JavaScript

Upewnij się, że po włączeniu tych opcji Twoja witryna działa poprawnie.

Używanie wtyczki Asset CleanUp do usuwania nieużywanych CSS i JavaScript

Gdy masz załadowanych wiele wtyczek i plików motywów, postępuj zgodnie z poniższymi instrukcjami, aby usunąć je ze stron, na których ich nie potrzebujesz.

  • Zaloguj się do panelu administracyjnego WordPress i przejdź do sekcji „Wtyczki > Dodaj nowy”.
  • Wpisz „asset cleanup” w polu wyszukiwania i znajdź wtyczkę „Asset CleanUp: Page Speed ​​Booster”.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Zainstaluj i aktywuj wtyczkę

  • Kliknij przycisk „Zainstaluj teraz”, a następnie aktywuj wtyczkę.
  • Po aktywacji wtyczki zalecamy zapoznanie się z pokazaną dokumentacją. Jest to niezbędne do prawidłowego korzystania z wtyczki.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Przeczytaj przewodniki wprowadzające

Ustawienia wtyczek

Wtyczka ma wiele ustawień, których nie wyjaśnimy w tym artykule. Jeśli używasz w swojej witrynie wtyczki do buforowania, takiej jak WP Rocket, nie używaj żadnych innych funkcji poza wyłączeniem nieużywanych skryptów i CSS. Przejdź do menu „Asset CleanUp > Ustawienia”, a następnie do zakładki „Preferencje użytkowania wtyczek”. Tutaj możesz zdecydować, w jaki sposób chcesz przeglądać i wyłączać nieużywane CSS / skrypty na swoich stronach.

  • Zarządzaj w Dashboard – włącz tę opcję. Pomoże Ci to przeanalizować stronę z edytora postów w panelu administratora.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Włącz zarządzanie w panelu

  • Zarządzaj we Front-endzie – jeśli chcesz analizować stronę z poziomu przeglądarki front-endowej, włącz tę opcję. W przeciwnym razie możesz to wyłączyć. Pamiętaj, że analiza front-end może być wykonana tylko przez zalogowanego administratora. Użytkownicy odwiedzający Twoją witrynę nie zostaną naruszeni podczas sprawdzania.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Włącz lub wyłącz zarządzanie w programie Frontend

  • Układ listy zasobów — kliknij menu rozwijane i wybierz „Wszystkie style i skrypty > Pogrupowane według lokalizacji (motywy, wtyczki, rdzeń i zewnętrzne). Pomoże Ci to przeglądać pliki zasobów pogrupowane w różne kategorie.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Ustaw układ widoku

  • Ukryć główny plik WordPress z listy zasobów? – włącz tę opcję, aby nie zadzierać z podstawowymi plikami WordPress.

Teraz przejdź do zakładki „Tryb testowy” i włącz opcję „Włącz tryb testowy”. Pomoże Ci to sprawdzić, czy witryna nie działa po wyłączeniu skryptów i CSS przed upublicznieniem.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Włącz tryb testowy

Kliknij „Aktualizuj wszystkie ustawienia” u dołu, aby zastosować zmiany.

Usuń nieużywane CSS i JavaScript

W zależności od ustawień możesz analizować stronę z edytora lub z interfejsu.

  • Wyłączanie skryptów i CSS w edytorze — edytuj dowolny istniejący post, aby przejść do edytora postów. Przewiń w dół, aby wyświetlić pola meta z wtyczki Asset CleanUp. Wyświetl wszystkie CSS i skrypty załadowane na tej stronie i wyłącz zasoby, których nie potrzebujesz.
  • Wyłączanie skryptów i CSS z frontendu – Jeśli włączyłeś opcję „Zarządzaj w interfejsie”, otwórz dowolny swój post w interfejsie przeglądarki. Pamiętaj, że powinieneś być zalogowany do panelu administracyjnego WordPress w innej zakładce przeglądarki. U dołu strony zobaczysz podobne meta pola wyłączające zasoby załadowane na stronie.

W obu przypadkach zobaczysz wszystkie pliki CSS i JavaScript załadowane na stronie pogrupowane zgodnie z Twoimi ustawieniami.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Wyświetl załadowane zasoby w grupie

Rozwiń każdą grupę i zobacz szczegóły plików załadowanych przez twoje wtyczki i motywy. Dla każdego pliku CSS i JS masz wiele opcji, jak pokazano na poniższym obrazku.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Wyłącz lub włącz CSS i JS

  • Zwolnij zasób na stronie.
  • Wyłącz plik w całej witrynie
  • Wyłącz we wszystkich postach (będzie nadal ładowany na stronach i niestandardowych typach postów ).
  • Kilka innych opcji, takich jak używanie RegEx, jest dostępnych tylko w wersji pro wtyczki.

Po wyłączeniu plików zaktualizuj swój post, aby zmiany zaczęły obowiązywać na stronie.

Przeglądanie wyłączonych plików i usuwanie trybu testowego

  • Przejdź do sekcji „Oczyszczanie zasobów > Zmiany zbiorcze”.
  • Przejdź do zakładki „Posty, strony i niestandardowe typy postów” i wybierz „post” z menu.
  • Tutaj możesz wyświetlić wszystkie wyłączone pliki w swojej witrynie.
  • Zaznacz pole wyboru „Usuń regułę zbiorczą” i kliknij przycisk „Zastosuj zmiany” na dole, aby ponownie włączyć ładowanie pliku.
  • Alternatywnie możesz edytować dowolne posty w edytorze postów i modyfikować sposób ładowania plików.

Jak usunąć nieużywany CSS i JavaScript w WordPressie?

Przeglądaj i usuwaj pliki zbiorcze

Sprawdź swoją witrynę i jeśli wszystko jest w porządku, wróć do strony ustawień i wyłącz opcję „Tryb testowy”. Dzięki temu zmiany będą widoczne dla wszystkich użytkowników odwiedzających Twoją witrynę. Podobnie możesz wyłączyć pliki CSS i JS w niestandardowych typach postów, stronach i stronach produktów, edytując je. Sprawdź swoje strony za pomocą narzędzia Google PageSpeed ​​Insights, aby sprawdzić, czy błędy zostały usunięte.

Ostatnie słowa

Mamy nadzieję, że artykuł przyda się do usunięcia nieużywanych plików CSS i JavaScript z Twojej witryny i poprawienia wyniku Google PageSpeed. Zalecamy korzystanie z WP Rocket, ponieważ za pomocą kilku kliknięć można łatwo usunąć CSS i opóźnić zewnętrzny JS. Jeśli korzystasz z bezpłatnej wtyczki Asset Cleanup, pomoże Ci ona tylko wyłączyć ładowanie pliku CSS i JS z wtyczek i motywów. Musisz unikać używania kodów firm trzecich i ręcznie usuwać niepotrzebne kody z głównego pliku style.css. Podczas ręcznej edycji plików upewnij się, że używasz motywu potomnego do aktualizacji arkusza stylów, aby nie utracić zmian przy każdej aktualizacji motywu.

Źródło nagrywania: www.webnots.com

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów