Jak minimalizować pliki CSS / JavaScript w WordPress (3 sposoby)

Powolne ładowanie zniechęca odwiedzających i szkodzi rankingom Google. Nawet jednosekundowe opóźnienie może kosztować Cię subskrybentów i sprzedaż.

Minifikacja brzmi technicznie, ale jest to po prostu sposób na zmniejszenie kodu Twojej witryny, aby ładowała się szybciej. Używamy tej techniki na własnych stronach internetowych, aby zapewnić najlepszą wydajność.

W tym przewodniku pokażemy Ci, jak łatwo minifikować pliki CSS i JavaScript w WordPressie.

Czym jest minifikacja i kiedy jej potrzebujesz?

Termin „minifikacja” opisuje metodę zmniejszania rozmiaru plików witryny WordPress. Robi to poprzez usuwanie białych znaków, linii i niepotrzebnych znaków z kodu źródłowego.

Oto przykład normalnego kodu CSS:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Po minifikacji kodu będzie wyglądał tak:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Zazwyczaj zaleca się minifikację tylko plików wysyłanych do przeglądarek użytkowników. Obejmuje to pliki HTML, CSS i JavaScript.

Nie musisz minifikować plików PHP. PHP to język programowania po stronie serwera, co oznacza, że działa na serwerze, zanim cokolwiek zostanie wysłane do przeglądarki internetowej odwiedzającego, więc jego minifikacja nie poprawia czasu ładowania u użytkownika.

Zalety minifikacji plików to poprawa szybkości i wydajności WordPress, ponieważ skompaktowane pliki ładują się szybciej.

Jednak niektórzy eksperci uważają, że poprawa wydajności jest bardzo niewielka dla większości stron internetowych i nie jest warta zachodu. Minifikacja usuwa tylko kilka kilobajtów danych z większości stron WordPress. Możesz skrócić czas ładowania strony bardziej poprzez optymalizację obrazów dla sieci.

Jeśli próbujesz poprawić swój wynik w Google PageSpeed Insights lub w narzędziu GTMetrix, minifikacja CSS i JavaScript jest niezbędnym krokiem.

Mając to na uwadze, przyjrzyjmy się, jak łatwo zminimalizować CSS/JavaScript na Twojej stronie WordPress. Omówimy 3 różne opcje, z których możesz wybrać:

Zacznijmy od naszej najlepszej rekomendowanej metody.

Metoda 1. Minifikacja CSS/JavaScript w WordPress przy użyciu WP Rocket

Ta metoda jest łatwiejsza i zalecana dla wszystkich użytkowników. Działa niezależnie od tego, jakiego hostingu WordPress używasz.

Najpierw musisz zainstalować i aktywować wtyczkę WP Rocket. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

WP Rocket to najlepsza wtyczka do buforowania WordPressa na rynku. Pozwala łatwo dodać buforowanie do WordPressa i znacznie poprawić szybkość witryny oraz czas ładowania stron.

Więcej szczegółów znajdziesz w naszym poradniku na temat jak zainstalować i skonfigurować WP Rocket w WordPressie.

Po aktywacji musisz odwiedzić stronę Ustawienia » WP Rocket i przejść do zakładki „Optymalizacja plików”.

Stąd musisz zaznaczyć opcję Minify CSS files.

WP Rocket wyświetli ostrzeżenie, że może to spowodować problemy na Twojej stronie. Kliknij przycisk „Aktywuj minifikację CSS”. Zawsze możesz dezaktywować tę opcję, jeśli spowoduje ona jakiekolwiek problemy z Twoją witryną.

Następnie musisz przewinąć w dół do sekcji Pliki JavaScript poniżej.

Tutaj po prostu zaznacz pole wyboru obok opcji „Minifikuj pliki JavaScript”.

Ponownie zobaczysz ostrzeżenie, że może to spowodować problemy na Twojej stronie. Kliknij przycisk „Aktywuj minifikację JavaScript”.

Po tym nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać swoje ustawienia. Dokładnie przetestuj swoją witrynę, aby upewnić się, że wszystko działa skutecznie.

WP Rocket rozpocznie teraz minifikację Twoich plików CSS i JavaScript. Możesz wyczyścić pamięć podręczną w ustawieniach wtyczki, aby upewnić się, że zacznie ona używać zminifikowanych plików CSS i JavaScript dla następnego odwiedzającego stronę.

Metoda 2. Minifikacja CSS/JavaScript w WordPress przy użyciu SiteGround

Jeśli korzystasz z SiteGround jako swojego dostawcy hostingu WordPress, możesz minifikować pliki CSS za pomocą wtyczki Speed Optimizer (wcześniej SiteGround Optimizer).

Speed Optimizer to wtyczka optymalizująca wydajność, która działa na własnej platformie. Dobrze współpracuje z ich Ultrafast PHP, aby skrócić czas ładowania Twojej witryny.

Po prostu zainstaluj i aktywuj wtyczkę Speed Optimizer na swojej stronie WordPress. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Następnie musisz kliknąć menu Speed Optimizer w bocznym pasku administracyjnym WordPress. Spowoduje to przejście do ustawień SG Optimizer.

Stąd musisz kliknąć przycisk „Przejdź do frontendu” w sekcji „Inne optymalizacje”.

Na stronie ustawień Frontend przełącz się na zakładkę „CSS”.

Następnie włącz przełącznik obok opcji „Minify CSS Files”.

Następnie musisz przejść do zakładki JavaScript i włączyć przełącznik obok opcji „Minimalizuj pliki JavaScript”.

To wszystko! Możesz teraz wyczyścić pamięć podręczną WordPress i odwiedzić swoją stronę, aby załadować zminifikowane wersje plików CSS i JS.

Metoda 3. Minimalizuj CSS/JavaScript za pomocą Autoptimize

Ta metoda jest zalecana dla użytkowników, którzy nie korzystają z SiteGround i nie używają WP Rocket.

Najpierw musisz zainstalować i aktywować wtyczkę Autoptimize. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić stronę Ustawienia » Autoptimize, aby skonfigurować ustawienia wtyczki.

Stąd najpierw musisz zaznaczyć opcję „Optymalizuj kod JavaScript” w sekcji Opcje JavaScript.

Następnie musisz przewinąć w dół do opcji CSS Options.

Po wejściu tam zaznacz pole wyboru obok opcji „Optymalizuj kod CSS”.

Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zachować swoje ustawienia.

Następnie możesz kliknąć przycisk Opróżnij pamięć podręczną, aby zacząć używać zminifikowanych plików. Wtyczki można również używać do naprawiania blokowania renderowania JavaScript i CSS w WordPress.

Często zadawane pytania dotyczące minifikacji

Oto odpowiedzi na niektóre z najczęstszych pytań, które ludzie zadają o minimalizowanie plików w WordPress. Mogą one pomóc lepiej zrozumieć proces i jego korzyści dla Twojej witryny.

1. Co dokładnie oznacza minifikacja?

Minimalizacja to proces, który zmniejsza pliki kodu Twojej strony internetowej poprzez usunięcie wszystkich niepotrzebnych znaków bez zmiany sposobu działania kodu. Obejmuje to usuwanie białych znaków, komentarzy i podziałów wierszy z plików HTML, CSS i JavaScript. Ponieważ wynikowe pliki są mniejsze i bardziej zwarte, przeglądarka odwiedzającego szybciej je pobiera i przetwarza, co może pomóc w poprawie ogólnej szybkości Twojej strony internetowej.

2. Czy minimalizowanie plików CSS i JavaScript zepsuje moją stronę?

Chociaż nie jest to powszechne w nowoczesnych wtyczkach, minifikacja może czasami powodować problemy wizualne lub funkcjonalne na Twojej stronie. Dlatego wtyczki wydajności często wyświetlają ostrzeżenie przed włączeniem tej funkcji. Zawsze warto najpierw utworzyć kopię zapasową, a następnie dokładnie przetestować swoją witrynę w oknie przeglądarki incognito po włączeniu minifikacji. Jeśli zauważysz jakiekolwiek problemy, możesz po prostu dezaktywować ustawienie lub skorzystać z funkcji wtyczki, aby wykluczyć określone pliki, które mogą powodować konflikt.

3. Czy minimalizacja naprawdę robi dużą różnicę?

Wpływ minifikacji może się różnić w zależności od Twojej witryny. W przypadku wielu witryn usuwa ona tylko kilka kilobajtów danych, a większą poprawę szybkości można uzyskać, optymalizując obrazy. Jednak jeśli Twoim głównym celem jest uzyskanie idealnego wyniku 100/100 w narzędziach do testowania szybkości, takich jak Google PageSpeed Insights lub GTMetrix, minifikacja plików CSS i JavaScript jest ważnym krokiem, który znacząco poprawi Twój wynik.

4. Czy potrzebuję wtyczki do minimalizacji plików w WordPress?

Dla prawie wszystkich użytkowników WordPressa najłatwiejszym i najbardziej polecanym sposobem na minifikację plików jest użycie wtyczki do buforowania lub optymalizacji wydajności, takiej jak WP Rocket lub Autoptimize. Narzędzia te pozwalają na włączenie minifikacji za pomocą kilku kliknięć. Niektórzy dostawcy hostingu, tacy jak SiteGround, oferują również własne wtyczki optymalizacyjne z wbudowanymi tymi funkcjami. Ręczna minifikacja plików jest złożonym i ryzykownym procesem, który nie jest zalecany dla początkujących.

Dodatkowe zasoby

Teraz, gdy wiesz, jak zminimalizować kod swojej witryny, oto kilka innych przewodników, które pomogą Ci poprawić wydajność WordPress:

• Kompleksowy przewodnik po zwiększaniu szybkości i wydajności WordPress
• Jak prawidłowo zainstalować i skonfigurować WP Rocket w WordPress
• Jak zoptymalizować Core Web Vitals dla WordPress (kompletny przewodnik)
• Przyspiesz WordPress – Jak zapisywać obrazy zoptymalizowane pod kątem sieci
• Najlepsze wtyczki buforujące WordPress do przyspieszenia Twojej witryny

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.