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, 2,79 sekundy ładowania strony, nieźle, ale mogłoby być lepiej, po prostu zminimalizujmy js i CSS i zobaczmy różnicę, przejdź do WP Speed of light > Przyspiesz > Grupuj i minimalizuj, będziesz mógł zobaczyć menu ze wszystkimi opcjami minimalizacji. Wersja darmowa pluginu zawiera opcję grupowania i minimalizacji, ale opcja wizualnego wykluczania plików jest dostępna tylko w wersji PRO Addon.

Opcje dodatku PRO to: Wyklucz skrypt w linii (wyklucz skrypt w linii z minifikacji), przenieś skrypty do stopki (umożliwia to przyspieszenie witryny poprzez przeniesienie wszystkich zminifikowanych skryptów do stopki), Grupuj czcionki i czcionki Google (grupuj lokalne czcionki i czcionki Google w jednym pliku, aby były obsługiwane szybciej) oraz zaawansowane wykluczanie plików.
 
Masz opcję zminifikowania, jak widać, JS, CSS, a także HTML, teraz wystarczy aktywować te opcje, kliknąć przycisk Zapisz, a wszystkie zasoby zostaną natychmiast zminifikowane; może to powodować problemy, ponieważ jest to zaawansowana konfiguracja, ale wszystko można naprawić poprzez wykluczenie części kodu i plików (przy użyciu 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 temu pluginowi pozwolimy WordPressowi optymalizować CSS i JS, po prostu włączając opcje grupowania na pulpicie, przejdź do WP Speed of Light > Przyspiesz > Grupuj i Minifikuj, będziesz mógł zobaczyć pulpit z opcjami grupowania CSS i JS.

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, skryptów można grupować na swojej stronie, wystarczy otworzyć konsolę przeglądarki (kliknij prawym przyciskiem myszy > Inspekcja lub F12) i otworzyć 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 i będzie to równie łatwe, jak włączenie opcji w ustawieniach, wystarczy przejść do WP Speed of Light > SpeedUp > Grupuj i minimalizuj > Grupuj czcionki i Google Fonts.
Opcja grupowania czcionek i Google Fonts pozwoli Ci na zgrupowanie ich w jednym pliku, który będzie serwowany szybciej, jest to całkiem przydatne, ponieważ większość motywów i układów WordPress jest dostarczana z 2 lub więcej czcionkami domyślnie, ze wszystkimi odmianami (podstawowa, pogrubiona, pochylona...)

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 na Twojej stronie, dzieje się tak głównie wtedy, gdy grupujesz pewne pliki zawierające błąd w błędzie składni lub podobnej nazwie zmiennej, klasy. Dlatego za pomocą opcji „wykluczenie minifikacji plików” będziesz mógł wykluczyć pliki z procesu minifikacji i grupowania, przejdź do WP Speed of Light > SpeedUp > Grupuj i Minifikuj, będziesz mógł zobaczyć opcję Zaawansowane wykluczanie 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, aby wyświetlić ich listę. Zwykle znajdują się one we folderze /wp-content, który grupuje wszystkie Twoje wtyczki i szablony. Wybierz ten folder (przynajmniej) i kliknij “Skanuj teraz”

Uruchomi się skanowanie, a po jego zakończeniu kliknij przycisk "Zobacz wyniki".

Lista plików sklasyfikowanych według typu (Wszystkie, JS, CSS, Czcionki) powinna być wyświetlona poniżej. Jeśli zidentyfikowałeś plik, który powoduje problemy podczas aktywacji grupowania i minimalizacji plików, możesz go wykluczyć z tego miejsca za pomocą prostego przełącznika WŁ./WYŁ..

Pomoże to wykluczyć pliki i w ten sposób łatwo rozwiązać każdy problem, który może istnieć podczas minimalizacji zasobów… Proces grupowania i minimalizacji nadal wymaga pracy, zwłaszcza podczas testowania, ale zdecydowanie warto się tym zająć, a Ty będziesz mógł zawsze sprawdzić jak to działa poprzez uruchomienie testu prędkości bezpośrednio z WP Speed of Light.
 
Śmiało i wypróbuj WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light