Jak grupować i minimalizować zasoby w WordPressie

Osiągnięcie jak najlepszej wydajności to marzenie każdego, kto zarządza stroną internetową. Grupowanie i minimalizowanie zasobów w WordPressie to jedno z najlepszych rozwiązań, ale może być to bardzo trudne. Grupowanie wszystkich zasobów (głównie plików CSS i JavaScript) może narazić Twoją stronę na ataki, jeśli nie jesteś programistą, ponieważ może generować konflikty.

WP Speed of Light to najlepsze rozwiązanie do optymalizacji witryny WordPress, ponieważ oferuje wiele opcji przyspieszających ładowanie witryny i przyjazny panel sterowania. Jedną z nich jest grupowanie i minimalizowanie zasobów. Możliwość dodawania/wykluczania pojedynczych plików z procesu grupowania i minimalizowania jest kluczem do optymalizacji bez konfliktów.

W tym wpisie na blogu wykorzystamy przykładową witrynę WordPress i pokażemy, jak to zrobić, aby proces konfiguracji wszystkiego był łatwiejszy.

Jak wykonać minifikację kodu JavaScript i CSS w WordPressie

Dowiedzmy się, jak wykonać minifikację JavaScript i CSS w WordPressie, ale najpierw musimy dowiedzieć się, co oznacza minifikacja. „Minifikacja to proces usuwania niepotrzebnych lub powtarzających się danych bez wpływu na sposób przetwarzania zasobu przez przeglądarkę - np. komentarze i formatowanie kodu, usuwanie nieużywanego kodu, stosowanie krótszych nazw zmiennych i funkcji itd.”.

Teraz przeprowadzimy test szybkości naszej strony, aby zobaczyć zmiany. W tym przykładzie korzystamy ze strony z woocommerce i kilkoma produktami, więc za pierwszym razem strona będzie ładować się trochę wolno.

Tak, załadowanie strony zajmuje 2,79 sekundy, nieźle, ale mogłoby być lepiej. Wystarczy zminimalizować kod JavaScript i CSS, aby zobaczyć różnicę. Przejdź do WP Speed of light > SpeedUp > Grupuj i minimalizuj , a zobaczysz menu ze wszystkimi opcjami minimalizacji. Darmowa wersja wtyczki zawiera opcję grupowania i minimalizacji, ale wizualne wykluczenie plików jest dostępne tylko w wersji PRO Addon.

Opcje dodatku PRO to: Wyklucz skrypty wbudowane (Exclude inline script from miniification), Przenieś skrypty do stopki (przyspiesza działanie witryny poprzez przeniesienie wszystkich zminimalizowanych skryptów do stopki), Grupuj czcionki i czcionki Google (Groupowanie czcionek lokalnych i czcionek Google w jednym pliku, aby przyspieszyć ich wyświetlanie) oraz Zaawansowane wykluczanie plików.
 
Jak widać, masz możliwość minimalizacji kodu JS, CSS, a także HTML. Teraz wystarczy aktywować te opcje i kliknąć Zapisz, a wszystkie zasoby zostaną natychmiast zminimalizowane. Może to powodować problemy, ponieważ jest to zaawansowana konfiguracja, ale wszystko można naprawić, wykluczając część kodu i plików (za pomocą dodatku Pro).

Teraz cała praca programistyczna, która mogłaby zająć godziny, jest wykonywana w ciągu kilku sekund.

Następny krok: optymalizacja CSS i JS w WordPressie

Dzięki tej wtyczce umożliwimy WordPressowi optymalizację kodu CSS i JavaScript poprzez włączenie opcji grupowania na pulpicie nawigacyjnym. Przejdź do WP Speed of Light > SpeedUp > Grupuj i minimalizuj , a zobaczysz pulpit nawigacyjny z opcjami grupowania kodu CSS i JavaScript.

Opcje te umożliwiają:

• Grupa JS: Grupowanie kilku plików JavaScript w jednym pliku zminimalizuje liczbę żądań HTTP
• Grupowanie plików CSS: Grupowanie 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ś wybieramy lub przechodzimy do innej strony w tej samej witrynie. Jeśli udałoby się nam zmniejszyć liczbę tych żądań, czas ładowania uległby skróceniu.

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

Następnie możesz wyświetlić listę wszystkich załadowanych plików według typu, tutaj w tym przykładzie kliknąłem tylko na listę plików JS.

Skoro już jesteśmy w tych ustawieniach, wystarczy włączyć opcje grupy (Grupa CSS i Grupa JS) i kliknąć Zapisz. Pamiętaj, że tych opcji należy używać ostrożnie i że musisz przetestować swoją stronę, ponieważ mogą powodować konflikty.

Podejdźmy do sprawy poważnie i zoptymalizujmy grubość czcionki

Co? Inna optymalizacja? Tak! Będziesz mógł zoptymalizować grubość czcionki, a to będzie tak proste, jak włączenie tej opcji w ustawieniach. Wystarczy przejść do WP Speed of Light > SpeedUp > Grupuj i minimalizuj > Opcja grupowania czcionek i czcionek Google.
Opcja grupowania czcionek i czcionek Google pozwoli Ci zgrupować je w jednym pliku, co przyspieszy ich wyświetlanie. Jest to bardzo przydatne, ponieważ większość motywów i układów WordPressa domyślnie zawiera 2 lub 3 czcionki ze wszystkimi deklinacjami (zwykłą, pogrubioną, kursywą...).

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ść.

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

Jak korzystać z wykluczenia minifikacji plików

Minifikacja może powodować problemy w witrynie, głównie podczas grupowania plików zawierających błąd składniowy lub podobną zmienną, nazwę klasy. Dlatego dzięki opcji „wykluczenia minifikacji plików” możesz wykluczyć pliki z procesu minifikacji i grupowania. Przejdź do WP Speed of Light > SpeedUp > Grupuj i minifikuj , gdzie znajdziesz zaawansowanego wykluczania plików .

Aby skorzystać z zaawansowanego wykluczania plików, musisz najpierw uruchomić skanowanie, włączyć tę opcję i kliknąć Uruchom skanowanie.

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

Rozpocznie się skanowanie. Po jego zakończeniu kliknij opcję „Wyświetl wyniki”.

Poniżej powinna zostać wyświetlona lista plików sklasyfikowanych według typu (wszystkie, JS, CSS, czcionka). Jeśli zidentyfikowałeś plik powodujący problemy, podczas aktywacji grupy plików i minifikacji możesz go wykluczyć z tego miejsca za pomocą prostego przełącznika WŁ./WYŁ .

Pomoże Ci to wykluczyć pliki i w ten sposób łatwo rozwiązać wszelkie problemy, które mogą wystąpić podczas minifikacji zasobów… Proces grupowania i minifikacji nadal wymaga trochę pracy, zwłaszcza w fazie testowania, ale zdecydowanie warto włożyć w to wysiłek i na pewno będziesz mógł sprawdzić, jak to działa, uruchamiając test prędkości bezpośrednio z WP Speed of Light .
 
Wypróbuj WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light