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

Czy chcesz zminimalizować pliki na twojej witrynie WordPress?

Zminimalizowanie plików CSS i JavaScript WordPressa może sprawić, że będą się one wczytywać szybciej i przyspieszyć twoją witrynę WordPress.

W tym przewodniku pokażemy, jak łatwo zminimalizować pliki CSS/JavaScript w WordPress, aby poprawić wydajność i szybkość.

Co to jest minifikacja i kiedy jest potrzebna?

Termin „minify” jest używany do opisania metody, która zmniejsza rozmiar plików Twojej witryny internetowej WordPress. Odbywa się to poprzez usuwanie białych spacji, 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 zminimalizowaniu kodu będzie on wyglądał następująco:

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

Zazwyczaj zaleca się minifikowanie tylko tych plików, które są wysyłane do przeglądarek użytkowników. Obejmuje to pliki HTML, CSS i JavaScript.

Możesz również zminimalizować pliki PHP, ale nie poprawi to szybkości wczytywania twojej strony. Dzieje się tak, ponieważ PHP jest językiem programowania po stronie serwera, co oznacza, że działa na serwerach, zanim cokolwiek zostanie wysłane do przeglądarki internetowej odwiedzającego.

Zaletą minifikacji plików jest poprawa szybkości i wydajności WordPressa, ponieważ kompaktowe pliki są szybciej wczytywane.

Niektórzy eksperci uważają jednak, że poprawa wydajności jest bardzo niewielka w przypadku większości witryn internetowych i nie jest warta zachodu. Minifikacja usuwa tylko kilka kilobajtów danych na większości witryn WordPress. Czas wczytywania strony można bardziej skrócić poprzez optymalizację obrazków dla sieci.

Jeśli próbujesz osiągnąć wynik 100/100 w Google PageSpeed Insights lub narzędziu GTMetrix, to minifikacja CSS i JavaScript znacznie poprawi twój wynik.

Powiedziawszy to, przyjrzyjmy się, jak łatwo zminimalizować CSS/JavaScript na twojej witrynie WordPress. Omówimy 3 różne opcje do wyboru:

Gotowy? Zacznijmy od naszej najbardziej zalecanej metody.

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

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

Najpierw należy zainstalować i włączyć wtyczkę WP Rocket. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

WP Rocket to najlepsza na rynku wtyczka do pamięci podręcznej WordPress. Pozwala łatwo dodać pamięć podręczną do WordPressa i znacznie poprawić szybkość witryny internetowej i czasy wczytywania stron.

Więcej szczegółów można znaleźć w naszym poradniku na temat instalacji i konfiguracji WP Rocket w WordPress.

Po włączaniu należy przejść na stronę Ustawienia ” WP Rocket i przełączyć się na kartę „Optymalizacja plików”.

W tym miejscu należy zaznaczyć opcję Zminimalizuj pliki CSS.

WP Rocket wyświetli ostrzeżenie, że może to zepsuć działanie twojej witryny. Kliknij przycisk „Włącz Minifikację CSS”. Zawsze możesz wyłączyć tę opcję, jeśli powoduje ona jakiekolwiek problemy z twoją witryną internetową.

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

Tutaj wystarczy zaznaczyć pole obok opcji „Zminimalizuj pliki JavaScript”.

Ponownie zobaczysz ostrzeżenie, że może to zepsuć twoją witrynę. Kliknij przycisk „Włącz Minify JavaScript”.

Następnie nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać twoje ustawienia.

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ć zminimalizowanego CSS i JavaScript dla następnego odwiedzającego witrynę internetową.

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

Jeśli korzystasz z SiteGround jako dostawcy hostingu WordPress, możesz zminimalizować pliki CSS za pomocą SiteGround Optimizer.

SiteGround Optimizer to wtyczka do optymalizacji wydajności, która działa na własnej platformie. Działa dobrze z ich Ultrafast PHP, aby poprawić czas wczytywania twojej witryny.

Wystarczy zainstalować i włączyć wtyczkę SiteGround Optimizer na twojej witrynie WordPress. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Następnie należy kliknąć na menu SG Optimizer w twoim panelu bocznym administratora WordPress.

Spowoduje to przejście do ustawień SG Optimizer.

W tym miejscu należy kliknąć przycisk „Przejdź do frontendu” w sekcji „Inne optymalizacje”.

Na następnym ekranie będziesz mógł zarządzać front-endem CSS.

Musisz włączyć przełącznik obok opcji „Zminimalizuj pliki CSS”.

Następnie należy przejść do karty JavaScript i włączyć przełącznik obok opcji „Minify JavaScript Files”.

To wszystko! Możesz teraz opróżnić pamięć podręczną WordPress i przejść na twoją witrynę internetową, aby wczytywać zminimalizowane wersje plików CSS i JS.

Metoda 3. Zminimalizuj CSS/JavaScript za pomocą Autoptimize

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

Najpierw należy zainstalować i włączyć wtyczkę Autoptimize. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść na stronę Ustawienia ” Autoptymalizacja, aby skonfigurować ustawienia wtyczki.

W tym miejscu należy najpierw zaznaczyć opcję „Optymalizuj kod JavaScript” w Opcjach JavaScript.

Następnie należy przewinąć w dół do opcji CSS.

Tam należy zaznaczyć pole obok opcji „Optymalizuj kod CSS”.

Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać twoje ustawienia.

Następnie możesz kliknąć przycisk Empty Cache, aby rozpocząć korzystanie z twoich zminimalizowanych plików. Wtyczka może być również używana do poprawki blokujących renderowanie skryptów JavaScript i CSS w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci zminimalizować CSS i JavaScript na twojej witrynie WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat optymalizacji rdzeni Web Vitals w WordPress i naszym eksperckim wyborem najlepszych kreatorów stron WordPress typu „przeciągnij i upuść„.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.