Jak grupować i minimalizować zasoby w WordPress

Posiadanie najlepszej możliwej wydajności jest marzeniem wszystkich, którzy zarządzają stroną internetową. Grupowanie i minimalizowanie zasobów na WordPress jest jedną z najlepszych rzeczy, które możemy zrobić, aby to osiągnąć, ale może to być naprawdę trudne. Grupowanie wszystkich zasobów (głównie plików css i js) może narazić Twoją stronę internetową na ryzyko, jeśli nie jesteś deweloperem, ponieważ może to powodować konflikty.

WP Speed of Light to najlepsze rozwiązanie, aby poprawić wydajność Twojej strony opartej na WordPress, ponieważ posiada wiele opcji, które pozwalają na szybkie ładowanie strony przy użyciu bardzo przyjaznego panelu administracyjnego, a tak, jedną z tych opcji jest grupowanie i minimalizacja zasobów. Pojedyncze dołączanie/wyłączanie plików z procesu grupowania i minimalizacji jest kluczem do niestandardowej optymalizacji bez konfliktów.

Zamierzamy użyć przykładowej strony opartej na WordPress dla tego artykułu i nauczymy się, jak to zrobić, aby proces konfiguracji wszystkiego był łatwiejszy.

Jak przeprowadzić minimalizację JS i CSS w WordPress

Dowiedzmy się, jak wykonać minifikację JS i CSS w WordPress, ale najpierw musimy wiedzieć, co oznacza minifikacja „Minifikacja odnosi się do procesu usuwania zbędnych lub zbędnych danych bez wpływu na to, jak zasób jest przetwarzany przez przeglądarkę - np. komentarze kodu i formatowanie, usuwanie nieużywanego kodu, używanie krótszych nazw zmiennych i funkcji itd.”.

Teraz, co będziemy robić, to test szybkości naszej strony, aby zobaczyć zmiany; w tym przykładzie używamy strony z woocommerce i produktami, więc za pierwszym razem załaduje się trochę wolniej.

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łe zadanie programisty, które mogło zająć godziny, jest wykonywane w zaledwie kilka sekund.

Następny krok, optymalizacja CSS i JS w WordPress

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.

Te opcje pozwalają Ci:

• Grupuj JS: Grupowanie kilku plików JavaScript w jeden plik zminimalizuje liczbę żądań HTTP
• Grupuj 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 wybieramy coś lub przechodzimy do innej strony na tej samej stronie, więc jeśli możemy zmniejszyć liczbę tych żądań, czas ładowania zostanie skrócony.

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.

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

Teraz, gdy mamy te ustawienia, po prostu włącz opcje grup (Grupuj CSS i Grupuj JS) i kliknij zapisz, miej na uwadze, że te opcje muszą być używane z ostrożnością i będziesz musiał przetestować swoją stronę, ponieważ może to powodować konflikty.

Zacznijmy 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ą...). 

Po prostu włącz tę opcję, kliknij zapisz i wszystkie czcionki zostaną zgrupowane.

Teraz, gdy aktywowaliśmy wszystkie opcje, aby zminimalizować i zgrupować zasoby, powinniśmy zobaczyć różnicę w czasie ładowania naszej strony, Sprawdźmy szybkość.

Co za różnica, Z 2,8 na 0,56 sekundy! Jak powiedzieliśmy na początku tego postu, możemy poprawić czas ładowania ;)

Jak używać wykluczenia minimalizacji 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 użyć zaawansowanego wykluczania plików, musisz najpierw uruchomić skanowanie, włączyć 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”.

Uruchomi się skanowanie, a po jego zakończeniu kliknij przycisk "Zobacz 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