*Nie jest już w wersji Beta
Perfmatters dodał w swojej wersji 1.8.5 z 19 stycznia nową funkcję, która pozwala na usunięcie nieużywanego CSS. Nigdy nie zmęczę się polecaniem tej wtyczki, która stała się niezbędnym uzupełnieniem, jeśli chcesz poprawić wydajność swojego bloga.
Dla 25 USD krótko rok oferuje potężne narzędzie, do którego wciąż dodają ulepszenia. Tutaj masz przewodnik po konfiguracji.
Przetestowałem go już na WordPressie 5.8 i 5.9-RC i jak dotąd nic się nie zepsuło. Chociaż miałem już nieużywany CSS bardzo pod kontrolą przez Script Manager tej wtyczki, po prostu aktywując tę opcję, możesz zaoszczędzić co najmniej kilka żądań i kilka Kb.
Dlaczego warto usunąć nieużywany CSS?
Zwykłe ostrzeżenia w PageSpeed Usuń nieużywany CSS" lub "Zredukuj nieużywaną zawartość CSS" są często wyświetlane, gdy CSS ładowany przez wtyczkę lub szablon nie jest potrzebny lub nie jest używany na danej stronie.
Programiści zazwyczaj oczekują na arkusz stylów tylko wtedy, gdy jest on używany. Jednak niejednokrotnie dodaje się również dodatkowe style, które mogą nie być potrzebne. Skutkuje to dużą ilością nieużywanego CSS, co spowalnia ładowanie.
Sporadycznie może też wywołać ostrzeżenia "Usuń zasoby blokujące renderowanie".
Poza uzyskaniem lepszego wyniku PageSpeed, usunięcie nieużywanego CSS ma duży wpływ na skrócenie czasu, jaki upływa od momentu rozpoczęcia ładowania strony do momentu, gdy jakakolwiek część zawartości strony zostanie wyrenderowana na ekranie (FCP), czasu, jaki zajmuje główna zawartość strony internetowej, aby pobrać i być w pełni gotowym dla użytkownika (LCP) oraz czasu, jaki upływa od momentu rozpoczęcia ładowania strony do momentu, gdy jest ona w pełni interaktywna (TTI). W skrócie, wiesz, ważna część historii Core Web Vitals.
Jak znaleźć nieużywany CSS?
Najprostszym sposobem na znalezienie nieużywanego CSS jest przetestowanie adresu URL za pomocą PageSpeed. Jeśli istnieje niewykorzystany CSS, zobaczysz ostrzeżenie, które zostanie uruchomione tylko wtedy, gdy przekroczy próg tego, co Google uważa za wystarczająco ważne, aby ostrzec, więc jeśli postrzegana prędkość ładowania (rzeczywista prędkość, której doświadczasz) jest dobra, nie daj się zbytnio zawiesić na tym.
Innym sposobem na znalezienie nieużywanego CSS jest użycie Chrome DevTools. Otwórz inspektora w Chrome (Ctrl+Shift-I), naciśnij Shitft+Control+P, wpisz "Coverage" i tam znajdziesz nieużywane bajty zarówno dla CSS jak i JS. Na czerwono nieużywane, a na niebiesko/zielono używane.
Stąd i rozumiejąc, że rozpoznajesz każdy CSS, co robi i czy możesz go usunąć lub wyłączyć ze strony, na której mierzysz, istnieje kilka opcji, takich jak zastąpienie niektórych wtyczek innymi lżejszymi, przegląd lub rozważenie zmiany szablonu, użycie Menedżera skryptów do selektywnego wyłączenia JS i CSS itp.
Najprostszym sposobem na usunięcie ostrzeżeń PageSpeed jest aktywowanie funkcji "Usuń nieużywany CSS" w Perfmatters, która robi to wszystko automatycznie. Twierdzą, że przetestowali go na setkach adresów URL (z różnymi szablonami i konfiguracjami) i zgłaszają te wyniki:
Średni spadek PCF o 15,20%.
Średni spadek LCP o 19,66%.
Średni spadek TTI o 14,95%.
Przed aktywacją
Perfmatters zaleca, aby przed aktywacją tej opcji usunąć wszelkie istniejące preloading CSS, które zostały skonfigurowane w Perfmatters (z wyłączeniem lokalnych arkuszy stylów w Źródła Google) i NIE łączyć CSS.
CSS merge to zdeprecjonowana technika optymalizacji od czasu HTTP/2. W niektórych przypadkach scalanie CSS może być nawet szkodliwe dla wydajności. Ponownie, pamiętaj, że każda strona będzie zachowywać się inaczej w zależności od jej konfiguracji i najlepiej jest testować i obserwować, dopóki nie znajdziesz najlepszego bezbłędnego wyniku dla twojego przypadku.
Należy również pamiętać o możliwych konfiguracjach innych wtyczek wydajności lub buforowania, których możesz używać, które mogą być sprzeczne lub nadpisywać się nawzajem, mając włączone te same funkcje.
Po aktywacji znajdziesz trzy opcje:
1- Opóźnienie (domyślne i zalecane).
Twój CSS był kiedyś inline, a wszystkie arkusze stylów CSS (CSS nieużywane) są opóźnione i ładowane z interakcją użytkownika.
2- Async
Twój używany CSS jest konwertowany na inline, a wszystkie arkusze stylów CSS (nieużywane CSS) są ładowane asynchronicznie. Ta metoda może pomóc uniknąć pop-in, ponieważ arkusze stylów są wykonywane asynchronicznie podczas ładowania strony. Ta metoda spowoduje nieco wyższe LCP/FCP niż poprzednie zachowanie opóźnienia.
3- Delete
Twój używany CSS staje się inline, a wszystkie oryginalne arkusze stylów CSS (nieużywane CSS) są usuwane. Jest to najbardziej agresywna metoda, ale prawdopodobnie będzie również wymagać dodania wyjątków. Zalecane tylko dla zaawansowanych użytkowników.
Po aktywacji strony i wpisy będą zachowywały się inaczej.
Strony mają tendencję do posiadania wielu unikalnych CSS, a zatem użyty CSS zostanie wygenerowany i stanie się inline oddzielnie dla każdej strony przy pierwszej wizycie. Jednakże wpisy, jako że mają tendencję do dzielenia wielu CSS, użyty CSS zostanie wygenerowany tylko raz, przy pierwszej wizycie, i stanie się inline. Różnica wpisów w porównaniu do stron polega na tym, że generowanie użytego CSS odbywa się tylko raz.
Wszystkie używane CSS generowane przez Perfmatters będą przechowywane lokalnie w tej ścieżce:
/wp-content/cache/perfmatters/tudominio.com/css/
Tak wygląda CSS generowany przez Perfmatters dla stron, postów, kategorii, tagów, wyszukiwań, strony głównej czy 404.
W polu "Wykluczone arkusze stylów" możesz wykluczyć określone arkusze stylów z funkcji "Usuń nieużywany CSS" poprzez dodanie pełnego źródłowego adresu URL (xxxx.css) lub poprzez dodanie pojedynczej części źródłowego adresu URL. Format: jeden na linię.
W poniższym polu "Excluded Selectors" możesz wykluczyć określone CSS (selektory) z funkcji "Remove unused CSS" poprzez dodanie id elementu, nazwy klasy itp. (#id, .class). Format: jeden na linię.
Es probable que en algún momento necesites borrar el CSS utilizado. Por ejemplo, tras el rediseño de una página o después de añadir un nuevo elemento. Para borrar el CSS generado y que se vuelva a crear tras las siguientes visitas, basta pinchar en la opción al pie de "Clear Used CSS".
Możesz wykluczyć pojedynczy post, stronę lub niestandardowy typ postu z używania funkcji Usuń nieużywany CSS. W edytorze, po prawej stronie, odznacz "Nieużywany CSS".
Wykluczy to całą stronę i może być przydatne np. dla strony koszyka, kasy lub kontaktu, która może mieć więcej problemów niż reszta witryny.
Możesz również użyć filtra perfmatters_remove_unused_css, aby zmienić miejsce usuwania nieużywanego CSS na swojej stronie. Ten przykład wyłączyłby nieużywany CSS tylko na stronach.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
