Jak zminimalizować informacje CSS / JavaScript w WordPressie (3 strategie)

Czy chcesz zminimalizować dokumenty na swojej stronie internetowej WordPress?

Zminimalizowanie informacji CSS i JavaScript WordPress może przyspieszyć ich ładowanie i przyspieszyć działanie witryny WordPress.

W tym podręczniku pokażemy, jak w prosty sposób zminimalizować pliki CSS/JavaScript w WordPressie, aby poprawić wydajność i szybkość.

Co to jest Minifikacja i kiedy będzie Ci potrzebna?

Wyrażenie „minify” jest używane do opisania systemu, który zmniejsza rozmiary plików Twojej witryny internetowej. Robi to, pozbywając się spacji, linii i niechcianych osób z kodu zasobów.

Oto przykład standardowego kodu CSS:

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

Po zminifikowaniu kodu wygląda to tak:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

Generalnie sugeruje się, aby minimalizować tylko dokumenty, które są wysyłane do przeglądarek użytkownika. Zawiera pliki HTML, CSS i JavaScript.

Możesz również minimalizować dokumenty PHP, ale minimalizacja nie przyspieszy tempa ładowania strony dla Twoich klientów. Dzieje się tak, ponieważ PHP jest językiem programowania po stronie serwera, co oznacza, że ​​działa na serwerach, zanim coś zostanie wysłane do przeglądarki internetowej odwiedzającego.

Zysk z minifikacji plików danych poprawia tempo WordPressa i ogólną wydajność, biorąc pod uwagę, że kompaktowe informacje ładują się szybciej.

Niemniej jednak niektórzy guru uważają, że zaawansowanie funkcjonalności jest dość niewielkie w przypadku większości stron internetowych i nie warte trudności. Minifikacja usuwa tylko kilka kilobajtów danych z większości witryn WordPress. Możesz znacznie skrócić czas ładowania witryny, optymalizując obrazy w sieci WWW.

Jeśli próbujesz uzyskać ocenę 100/100 w oprogramowaniu Google Pagespeed lub GTMetrix, minimalizacja CSS i JavaScript znacznie poprawi Twój wynik.

Wspominając o tym, rzućmy okiem na to, jak bez wysiłku zminimalizować CSS/JavaScript na swojej stronie WordPress.

Przejrzymy ponad 3 wyróżniające się opcje, spośród których możesz wybrać:

Wszystko gotowe? Zacznijmy od naszego najlepszego proponowanego procesu.

Proces 1. Zminimalizuj CSS/JavaScript w WordPress za pomocą WP Rocket

Ta technika jest łatwiejsza i jest proponowana wszystkim konsumentom. Działa niezależnie od tego, z jakiego hostingu WordPress korzystasz.

Najpierw musisz zainstalować i aktywować wtyczkę WP Rocket. Aby uzyskać dodatkowe informacje, zapoznaj się z naszym przewodnikiem dotyczącym faz po ruchu, jak skonfigurować wtyczkę WordPress.

WP Rocket to najlepsza wtyczka do buforowania WordPress na rynku. Pozwala bardzo łatwo wstawić pamięć podręczną do WordPressa i znacznie zwiększyć prędkość strony internetowej i momenty ładowania strony internetowej.

Aby uzyskać więcej informacji, zobacz nasz samouczek dotyczący instalacji i konfiguracji WP Rocket w WordPress.

Po aktywacji chcesz sprawdzić Ustawienia »Strona internetowa WP Rocket i przejść do zakładki „Optymalizacja pliku”.

Od tego momentu będziesz musiał spojrzeć na rozwiązanie dokumentów Minify CSS.

WP Rocket wyświetli ostrzeżenie, że może to podzielić punkty w Twojej witrynie. Śmiało i po prostu kliknij przycisk „Aktywuj minimalizację CSS”. Możesz stale dezaktywować ten wybór, jeśli spowoduje to jakiekolwiek problemy z Twoją witryną internetową.

Następnie musisz przewinąć w dół do części Dokumenty JavaScript poniżej.

W tym miejscu po prostu przetestuj pole obok możliwości „Minifikuj pliki JavaScript”.

Ponownie zobaczysz ostrzeżenie, że może to spowodować złamanie niektórych rzeczy na Twojej stronie internetowej. Śmiało i po prostu kliknij przycisk „Aktywuj minimalizację JavaScript”.

Zaraz po tym nigdy nie ignoruj ​​kliknięcia przycisku Zachowaj ustawienia, aby zachować swoje konfiguracje.

WP Rocket zacznie teraz minimalizować informacje CSS i JavaScript. Możesz bardzo wyczyścić pamięć podręczną w ustawieniach wtyczki, aby upewnić się, że zaczyna ona używać zminifikowanego CSS i JavaScript dla przyszłego odwiedzającego stronę internetową.

Technika 2. Zminimalizuj CSS/JavaScript w WordPressie, wykorzystując SiteGround

Jeśli stosujesz SiteGround jako dostawcę usług hostingowych WordPress, możesz zminimalizować pliki CSS współpracujące z SiteGround Optimizer.

SiteGround Optimizer to ogólna wtyczka optymalizacji wydajności, która działa w ich systemie. Działa dobrze z ultraszybkim PHP, aby wydłużyć okresy ładowania Twojej witryny.

Po prostu skonfiguruj i aktywuj wtyczkę SiteGround Optimizer na swojej stronie internetowej WordPress. Aby uzyskać dodatkowe informacje, zapoznaj się z naszymi wskazówkami krok po kroku, jak umieścić wtyczkę WordPress.

Następnie musisz kliknąć menu SG Optimizer na pasku bocznym administratora WordPress.

To po prostu przeniesie Cię do ustawień SG Optimizer.

Z tego artykułu musisz kliknąć przycisk „Przejdź do frontendu” mniej niż „Inne optymalizacje”.

Na następnym monitorze musisz przełączyć się na przełącznik zbliżający się do rozwiązania „Minifikuj pliki CSS”.

W nadchodzącym czasie będziesz musiał przejść do zakładki JavaScript i włączyć przełącznik, który zbliża się do wyboru „Minify JavaScript Files”.

To wszystko! Możesz teraz opróżnić pamięć podręczną WordPress i zajrzeć na swoją witrynę, aby załadować zminimalizowane wersje dokumentów CSS i JS.

Podejście 3. Zminimalizuj CSS/JavaScript za pomocą funkcji Autoptimize

Ta metoda jest proponowana dla konsumentów, którzy nie są na SiteGround i nie pracują z WP Rocket.

Początkowo musisz skonfigurować i aktywować wtyczkę Autoptimize. Aby uzyskać dodatkowe informacje, zobacz nasze wytyczne krok po kroku dotyczące instalacji wtyczki WordPress.

Po aktywacji musisz zajrzeć na stronę Opcje » Autooptymalizacja , aby skonfigurować opcje wtyczki.

Począwszy od tego artykułu, najpierw musisz zweryfikować opcję „Optymalizuj kod JavaScript” w Opcjach JavaScript.

Następnie musisz przewinąć w dół do opcji CSS Choices i sprawdzić pole obok opcji „Optymalizuj kod CSS”.

Nigdy nie zaniedbuj kliknięcia przycisku Zachowaj korekty, aby zapisać swoje konfiguracje.

Następnie możesz po prostu kliknąć przycisk Wolna pamięć podręczna, aby rozpocząć pracę ze swoimi zminimalizowanymi plikami danych. Wtyczkę można również wykorzystać do radzenia sobie z blokowaniem renderowania JavaScript i CSS w WordPress.

Mamy nadzieję, że ten wpis pomógł Ci zminimalizować CSS i JavaScript na Twojej stronie WordPress. Możesz również zapoznać się z naszym samouczkiem na temat optymalizacji podstawowych wskaźników sieci w WordPress i zastosować się do naszego najlepszego ogólnego samouczka dotyczącego wydajności WordPress.

Jeśli podobał Ci się ten wpis, koniecznie zasubskrybuj nasz kanał YouTube dla samouczków filmowych WordPress. Możesz nas również spotkać na Twitterze i Facebooku.