Przejdź do głównej zawartości
Czas czytania 6 minut (1143 słów)

Jak grupować i minimalizować zasoby w WordPress

file-group-and-minify

Zapewnienie lepszej możliwej wydajności to marzenie wszystkich, którzy zarządzają witryną, grupą i minimalizują zasoby w WordPress, jest jedną z najlepszych rzeczy, jakie możemy dla tego zrobić, ale może to być naprawdę trudne. Zgrupuj wszystkie zasoby (głównie pliki css i js) mogą ujawnić Twoją witrynę, jeśli nie jesteś programistą, ponieważ może to powodować konflikty.

WP Speed of Light to najlepsze rozwiązanie do wykonywania witryny Wordpress, ponieważ ma wiele opcji szybkiego ładowania witryny dzięki naprawdę przyjaznemu pulpitowi nawigacyjnemu i tak, jedną z tych opcji jest grupowanie i minimalizowanie zasobów. Włączenie/wykluczenie pojedynczego pliku z procesu grupowania i minifikacji jest kluczem do niestandardowej optymalizacji bez konfliktów.

Użyjemy przykładowej witryny wordpress do tego postu na blogu i nauczymy się, jak to zrobić, aby proces konfiguracji wszystkiego był łatwiejszy.

 

Jak wykonać minimalizację JS i CSS WordPress

Nauczmy się, jak wykonać wordpress js i minimalizację CSS, ale najpierw musimy wiedzieć, co oznacza minimalizacja „Minifikacja odnosi się do procesu usuwania niepotrzebnych lub zbędnych danych bez wpływu na sposób przetwarzania zasobów przez przeglądarkę - np. Komentarze do kodu i formatowanie, usuwanie nieużywanego kodu, używanie krótszych nazw zmiennych i funkcji itd. ”.

Teraz zamierzamy wykonać test prędkości na naszej stronie, aby zobaczyć zmiany, w tym przykładzie używamy witryny z woocommerce i niektórymi produktami, więc za pierwszym razem będzie ładować się trochę wolniej.

 

przed testem

 

Tak, 2,79 sekundy na załadowanie 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 , będziesz mógł aby zobaczyć menu ze wszystkimi opcjami do zminimalizowania. Wersja bez wtyczek zawiera opcję grupowania i minifikowania, ale wykluczenie plików wizualnych jest dostępne tylko w wersji PRO Addon.

 

pulpit nawigacyjny grupy i minimalizacji

 

Opcje dodatków PRO to: Wyklucz skrypt inline (Wyklucz skrypt inline z minifikacji), przenieś skrypty do stopki (pozwala przyspieszyć działanie witryny poprzez przeniesienie wszystkich minifikowanych skryptów do stopki), Czcionka grupowa i Czcionki Google (Czcionki grupowe lokalne i czcionki Google w pojedynczym pliku, który ma być obsługiwany szybciej) i Zaawansowane wykluczanie plików.
 
Masz możliwość zminimalizowania, jak widać, JS, CSS, a także HTML, teraz po prostu aktywuj te opcje, kliknij Zapisz, a wszystkie Twoje zasoby zostaną od razu zminifikowane, może mieć problemy, ponieważ jest to zaawansowana konfiguracja, ale wszystko można naprawić z wyłączeniem niektórych kodów i plików (za pomocą dodatku pro).

 

zasoby minify

 

 

Teraz cała praca programisty, która może zająć godziny, jest wykonywana w ciągu kilku sekund.

 

Następny krok, WordPress optymalizuje CSS i JS

Dzięki tej wtyczce pozwolimy, aby wordpress zoptymalizował CSS i js, po prostu włączając opcje grupowe na pulpicie nawigacyjnym, przejdź do WP Speed of Light > SpeedUp> Group & Minify , będziesz mógł zobaczyć pulpit nawigacyjny z opcjami do grupowania CSS i js.

Te opcje umożliwiają:

  • Group JS: Zgrupowanie kilku plików Javascript w jeden plik zminimalizuje liczbę żądań HTTP
  • Grupuj CSS: Grupowanie kilku plików CSS w jednym pliku zminimalizuje liczbę żądań HTTP.

Żądania HTTP: są to żądania wysyłane do serwera za każdym razem, gdy coś wybieramy lub przechodzimy na inną stronę w tej samej witrynie, więc jeśli możemy zmniejszyć te żądania, czas ładowania się skróci.

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

 

list-script-chrome

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

Teraz, gdy jesteśmy przy tych ustawieniach, po prostu włącz opcje grupy (Grupa CSS i Grupa JS) i kliknij Zapisz, pamiętaj, że z tych opcji należy korzystać ostrożnie, a będziesz musiał przetestować swoją stronę, ponieważ może to powodować konflikty .

 

Weźmy na poważnie i zoptymalizuj grubość czcionki

Co? Inna optymalizacja? Tak! będziesz mógł zoptymalizować wagę czcionki i będzie to tak proste, jak włączenie opcji w ustawieniach, po prostu przejdź do opcji WP Speed of Light > SpeedUp> Group & Minify> Group fonts i Google Fonts .
Opcja Grupuj czcionki i czcionki Google pozwoli Ci zgrupować je w jednym pliku, aby były szybciej obsługiwane, jest to bardzo przydatne, ponieważ większość motywów i układów WordPress ma domyślnie 2 lub czcionki ze wszystkimi deklinacjami (zwykłe, pogrubione, kursywa). ...)

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

 

czcionka grupy

 


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

 

test po

 

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

 

Jak korzystać z wyłączenia minimalizacji plików

Minifikacja może powodować problemy w Twojej witrynie, dzieje się tak głównie, gdy grupujesz pewne pliki, które zawierają błąd w składni lub podobną zmienną, nazwę klasy. Dlatego dzięki opcji „wykluczenie minifikacji plików” będziesz mógł wykluczyć pliki z procesu minifikacji i grupowania, przejdź do WP Speed of Light > SpeedUp> Group & Minify , będziesz mógł zobaczyć opcję Zaawansowane wykluczanie plików

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

 

ostrzeżenie o konflikcie zasobów grupy


 Aby móc wyświetlić listę skryptów załadowanych na twoją stronę, 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 wtyczki i motywy. Wybierz ten folder (przynajmniej) i kliknij „Skanuj teraz”

 

wybierz foldery do skanowania

 

Spowoduje to uruchomienie skanowania, a na koniec kliknij wyświetl wyniki po zakończeniu skanowania.

 

skanowane

 

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

 

pliki wykluczeń

 

Pomoże Ci to wykluczyć pliki i w ten sposób łatwo rozwiązać każdy problem, który może wystąpić podczas minimalizacji zasobów… Proces grupowania i minimalizacji nadal wymaga trochę pracy, zwłaszcza podczas testowania, ale zdecydowanie jest wart wysiłku i tak się stanie. zawsze możesz sprawdzić, jak to działa, uruchamiając test 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

5
Bądź na bieżąco

Kiedy zasubskrybujesz bloga, wyślemy Ci wiadomość e-mail, gdy pojawią się nowe aktualizacje na stronie, abyś ich nie przegapił.

powiązane posty

 

Komentarze

Nie dodano jeszcze żadnych komentarzy. Dodaj komentarz jako pierwszy
Już zarejestrowany? Zaloguj się tutaj
Czwartek, 18 kwietnia 2024 r

Captcha Image