Jak grupować i minifikować zasoby w WordPressie

Osiągnięcie jak najlepszej wydajności jest marzeniem każdego, kto zarządza stroną internetową. Grupowanie i minimalizacja zasobów w WordPressie to jedna z najlepszych rzeczy, które możemy w tym celu zrobić, ale może być naprawdę trudna. Grupowanie wszystkich zasobów (głównie plików CSS i JS) może narazić Twoją stronę na ryzyko, jeśli nie jesteś programistą, ponieważ może powodować konflikty.

WP Speed of Light to najlepsze rozwiązanie, aby przyspieszyć działanie Twojej witryny WordPress, ponieważ oferuje wiele opcji szybkiego ładowania strony w naprawdę przyjaznym panelu, a jedną z tych opcji jest grupowanie i minimalizacja zasobów. Możliwość włączania/wyłączania pojedynczych plików z procesu grupowania i minimalizacji jest kluczowa dla niestandardowej optymalizacji bez konfliktów.

W tym wpisie na blogu użyjemy przykładowej witryny WordPress i nauczymy się, jak to zrobić, aby proces konfiguracji wszystkiego był łatwiejszy.

Jak przeprowadzić minifikację JS i CSS w WordPressie

Nauczmy się, jak przeprowadzić minifikację JS i CSS w WordPressie, ale najpierw musimy wiedzieć, co oznacza minifikacja: „Minifikacja odnosi się do procesu usuwania niepotrzebnych lub zbędnych danych bez wpływu na sposób przetwarzania zasobu przez przeglądarkę – np. komentarzy i formatowania kodu, usuwania nieużywanego kodu, używania krótszych nazw zmiennych i funkcji itd.”.

Teraz przeprowadzimy test szybkości naszej strony, aby zobaczyć zmiany. W tym przykładzie używamy witryny z WooCommerce i kilkoma produktami, więc za pierwszym razem będzie się ładować nieco wolniej.

Tak, 2,79 sekundy na wczytanie strony, nieźle, ale mogłoby być lepiej. Po prostu zminifikujmy JS i CSS i zobaczmy różnicę. Przejdź do WP Speed of light > SpeedUp > Group & Minify, gdzie zobaczysz menu ze wszystkimi opcjami minifikacji. Darmowa wersja wtyczki zawiera opcję grupowania i minifikacji, ale wizualne wykluczanie plików jest dostępne tylko w wersji PRO Addon.

Opcje dodatku PRO to: Wyklucz skrypty inline (wyklucz skrypty inline z minifikacji), przenieś skrypty do stopki (pozwala przyspieszyć witrynę, przenosząc wszystkie zminifikowane skrypty do stopki), Grupuj czcionki i czcionki Google (grupuj lokalne czcionki i czcionki Google w jednym pliku, aby były szybciej serwowane) oraz Zaawansowane wykluczanie plików.
 
Masz możliwość minifikacji, jak widać, JS, CSS, a także HTML – teraz wystarczy aktywować te opcje, kliknąć Zapisz i wszystkie Twoje zasoby zostaną natychmiast zminifikowane. Mogą wystąpić problemy, ponieważ jest to zaawansowana konfiguracja, ale wszystko można naprawić, wykluczając niektóre fragmenty kodu i pliki (za pomocą dodatku pro).

Teraz cała praca programisty, która mogłaby zająć godziny, jest wykonywana w zaledwie kilka sekund.

Następny krok: optymalizacja CSS i JS w WordPressie

Dzięki tej wtyczce pozwolimy WordPressowi optymalizować CSS i JS po prostu włączając opcje grupowania na pulpicie, przejdź do WP Speed of Light > SpeedUp > Group & Minify, zobaczysz pulpit z opcjami grupowania CSS i JS.

Te opcje pozwalają na:

• Grupowanie JS: Połączenie kilku plików Javascript w jeden plik zminimalizuje liczbę żądań HTTP
• Grupowanie CSS: Połączenie kilku plików CSS w jeden plik zminimalizuje liczbę żądań HTTP.

Żądania HTTP: są to żądania wysyłane do serwera za każdym razem, gdy coś wybierzemy lub przejdziemy do innej strony w tej samej witrynie, więc jeśli uda nam się ograniczyć te żądania, czas ładowania ulegnie skróceniu.

Aby sprawdzić, ile plików i skryptów możesz zgrupować na swojej stronie, po prostu otwórz konsolę przeglądarki (kliknij prawym przyciskiem myszy > Zbadaj lub F12) i otwórz panel sieci.

Możesz następnie wyświetlić listę wszystkich załadowanych plików według typu; w tym przykładzie kliknąłem tylko listę plików JS.

Skoro jesteśmy już w tych ustawieniach, wystarczy włączyć opcje grupowania (Group CSS i Group JS) i kliknąć Zapisz. Pamiętaj, że z tych opcji należy korzystać ostrożnie i będziesz musiał przetestować swoją stronę, ponieważ mogą one powodować konflikty.

Let’s get serious and optimize font weight

Co? Kolejna optymalizacja? Tak! Będziesz mógł zoptymalizować grubość czcionek, a będzie to tak proste, jak włączenie opcji w ustawieniach — wystarczy przejść do WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts .
Opcja Group fonts and Google fonts pozwoli Ci zgrupować je w jednym pliku, aby były serwowane szybciej. Jest to bardzo przydatne, ponieważ większość motywów i układów WordPressa domyślnie zawiera 2 lub więcej czcionek we wszystkich odmianach (regular, bold, italic...). 

Wystarczy włączyć tę opcję, kliknąć Zapisz, a wszystkie czcionki zostaną zgrupowane.

Teraz, gdy aktywowaliśmy wszystkie opcje minimalizacji i grupowania zasobów, powinniśmy zauważyć różnicę w czasie ładowania naszej witryny. Sprawdźmy szybkość.

Jaka różnica, z 2,8 do 0,56 sekundy! Jak wspomnieliśmy na początku tego wpisu, możemy poprawić czas ładowania ;)

Jak korzystać z wykluczania plików z minifikacji

Minifikacja może powodować problemy w Twojej witrynie, dzieje się tak głównie, gdy grupujesz pewne pliki zawierające błędy w składni, błędne zmienne lub nazwy klas. Dlatego dzięki opcji „wykluczenie plików z minifikacji” będziesz mógł wykluczyć pliki z procesu minifikacji i grupowania. Przejdź do WP Speed of Light > SpeedUp > Group & Minify, gdzie zobaczysz opcję Zaawansowane wykluczanie plików .

Aby skorzystać z zaawansowanego wykluczania plików, musisz najpierw uruchomić skanowanie — włącz opcję i kliknij Uruchom skanowanie.

 
Aby móc wyświetlić listę skryptów załadowanych na Twojej stronie, WP Speed of Light musi przeskanować Twój folder, aby je wyświetlić. Zazwyczaj wszystkie znajdują się w folderze /wp-content, który grupuje wszystkie Twoje wtyczki i motyw. Wybierz ten folder (przynajmniej) i kliknij “Skanuj teraz”

Uruchomi skanowanie; na koniec, gdy skanowanie zostanie zakończone, kliknij, aby wyświetlić wyniki.

Poniżej powinna zostać wyświetlona lista plików sklasyfikowanych według typu (Wszystkie, JS, CSS, Czcionki). Jeśli zidentyfikujesz plik, który powoduje problemy podczas włączania grupowania i minifikacji plików, możesz go wykluczyć tutaj za pomocą prostego przełącznika WŁ./WYŁ..

This will help you to exclude files and, in this way, easily solve any problem that may exist when minifying resources… Group and minify process still require some work, especially in testing, but it definitely worth the effort, and you will. be always able to test how it works by running the speed test directly from WP Speed of Light.
 
Go ahead and try WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light