Minifikacja plików CSS i JavaScript w motywie WordPress polega na usunięciu zbędnych spacji, komentarzy, wcięć i znaków końca linii. Dzięki temu pliki zajmują mniej miejsca, a przeglądarka może pobrać je szybciej. Najprościej włączyć tę funkcję we wtyczce cache, natomiast podczas tworzenia własnego motywu lepiej zautomatyzować ją za pomocą Gulp lub Webpack.
Co daje minifikacja plików motywu?
Minifikator nie powinien zmieniać działania kodu. Usuwa jedynie elementy potrzebne osobom rozwijającym projekt, ale nieprzydatne przeglądarce. Dotyczy to przede wszystkim plików CSS i JavaScript znajdujących się w motywie oraz zasobów ładowanych przez wtyczki.
Mniejsze pliki oznaczają mniej danych przesyłanych do użytkownika. Może to skrócić czas ładowania strony i poprawić wyniki narzędzi takich jak PageSpeed Insights. Minifikacja nie zastępuje jednak cache, optymalizacji obrazów ani usuwania niepotrzebnych skryptów.
Najczęstsze korzyści z tego procesu to:
- Szybsze pobieranie arkuszy stylów i skryptów.
- Mniejszy transfer danych między serwerem a przeglądarką.
- Ograniczenie rozmiaru zasobów wpływających na ładowanie strony.
- Możliwa poprawa wybranych wyników wydajności i wskaźników Core Web Vitals.
Jak zminifikować CSS i JavaScript za pomocą wtyczki?
To rozwiązanie sprawdzi się, gdy nie pracujesz na własnym procesie budowania motywu. Do wyboru masz między innymi LiteSpeed Cache, Autoptimize oraz WP Rocket. Jeśli serwer działa na LiteSpeed, użyj natywnej wtyczki LiteSpeed Cache zamiast łączenia kilku niezależnych systemów cache.
- Wykonaj kopię zapasową strony i bazy danych.
- Wejdź w panelu WordPress do sekcji „Wtyczki”, wybierz „Dodaj nową” i zainstaluj wybrane narzędzie.
- W ustawieniach wtyczki włącz minifikację plików CSS.
- Włącz minifikację JavaScript, ale na początku pozostaw wyłączone łączenie plików i opóźnianie skryptów.
- Wyczyść pamięć cache strony, przeglądarki oraz ewentualnie cache serwera.
Po każdej zmianie otwórz stronę w oknie prywatnym i sprawdź kilka podstron. Jeżeli korzystasz z Autoptimize lub WP Rocket, ustawienia mogą znajdować się w osobnych sekcjach dotyczących CSS, JavaScriptu i optymalizacji plików.
Minifikacja i konkatenacja to różne operacje. Minifikacja zmniejsza kod, natomiast konkatenacja łączy kilka plików w jeden. Łączenie może ograniczyć liczbę żądań, ale nie zawsze poprawia wynik, szczególnie przy nowoczesnych protokołach HTTP. Włączaj je tylko po testach.
Minifikacja w procesie tworzenia motywu
Własne motywy najlepiej minifikować podczas przygotowywania wersji produkcyjnej. Deweloper zachowuje wtedy czytelne pliki źródłowe, a użytkownik otrzymuje ich zoptymalizowane kopie, na przykład w katalogu dist lub build. Gulp i Webpack mogą automatycznie wykonywać minifikację po każdej kompilacji.
| Cecha | Wtyczki WordPress | Narzędzia build, Gulp lub Webpack |
|---|---|---|
| Poziom trudności | Niski, konfiguracja z panelu | Wyższy, wymaga środowiska Node.js i konfiguracji projektu |
| Kontrola nad kodem | Ograniczona, ustawienia działają na zasobach wykrytych przez wtyczkę | Duża, można wskazać pliki, kolejność i sposób budowania |
| Zastosowanie | Gotowe strony i motywy używane bez procesu developmentu | Tworzenie i rozwijanie własnych motywów |
W prostym projekcie proces może obejmować instalację zależności, przygotowanie zadania budującego oraz wdrożenie plików produkcyjnych:
- Trzymaj czytelne pliki źródłowe CSS i JavaScript poza katalogiem z gotowymi zasobami.
- Skonfiguruj Gulp lub Webpack do minifikacji arkuszy i skryptów.
- Uruchamiaj kompilację w trybie produkcyjnym przed wdrożeniem motywu.
- W WordPressie rejestruj i kolejkować wersje plików z katalogu produkcyjnego, a nie źródłowego.
Na co uważać po minifikacji?
Minifikacja JavaScript może ujawnić błędy, których wcześniej nie było widać. Problemy pojawiają się zwłaszcza wtedy, gdy skrypty zależą od konkretnej kolejności ładowania, zmiennych globalnych albo biblioteki takiej jak jQuery. Objawami mogą być niedziałające menu, suwaki, formularze, wyskakujące okna lub elementy koszyka.
Nie włączaj jednocześnie minifikacji, łączenia, opóźniania i przenoszenia skryptów bez testów. Gdy strona przestanie działać, trudniej będzie ustalić, która opcja wywołała konflikt.
Przed zmianami utwórz kopię zapasową i, jeśli to możliwe, pracuj na środowisku stagingowym. Przy rozbudowanym motywie wyklucz z minifikacji konkretny plik powodujący błąd zamiast wyłączać całą optymalizację.
Po wdrożeniu sprawdź następujące elementy:
- Wyczyść cache wtyczki, serwera i przeglądarki.
- Otwórz stronę główną oraz najważniejsze podstrony na komputerze i telefonie.
- Wyślij formularze kontaktowe i sprawdź komunikaty walidacyjne.
- Uruchom menu mobilne, suwaki, galerie oraz inne elementy interaktywne.
- Otwórz narzędzia deweloperskie klawiszem F12 i sprawdź zakładkę konsoli pod kątem błędów JavaScript.
Jeżeli po wykluczeniu problematycznych plików strona nadal generuje błędy, przywróć poprzednią konfigurację i zleć analizę osobie znającej dany motyw lub skrypt. Najbezpieczniej zacząć od samej minifikacji CSS i JS, a kolejne funkcje optymalizacyjne dodawać pojedynczo.
