Zmniejsz / połącz pliki WordPress CSS + Javascript = szybsza witryna

Jedna z najlepszych rzeczy, których dowiedzieliśmy się podczas badań do naszego artykułu na temat jak sprawić, by strona Joomla ładowała się szybko (dokładnie 1.29 sekundy), odkryliśmy świetną perełkę narzędzia. 

Podobnie jak wiele osób, które starają się przyspieszyć ładowanie strony internetowej, odnoszą się do Witryna z rekomendacjami Google PageSpeedi słusznie, bo jeśli Google wyda oświadczenie, to zwykle warto go posłuchać. Czasami jednak wykonanie wszystkich optymalizacji jest dość kłopotliwe i możesz nie mieć umiejętności, aby wykonać te zmiany.

Jak być może wiesz, przyspieszając swoją witrynę WordPress, musisz wykonać kilka optymalizacji. Jednym z nich jest umiejętność prawidłowego wykorzystania pamięci podręcznej przeglądarki w WordPressie, Coś co CollectiveRay ma tutaj świetny artykuł.  

Ale to nie wystarczy, jeśli pliki CSS i Javascript są dość duże. Na tym polega minifikacja. 

Co to jest minifikacja? (i jakie korzyści może to przynieść Twojej witrynie)

Minifikacja to funkcja polegająca na pobraniu fragmentu kodu i usunięciu z niego wszelkich znaków (takich jak spacje, podziały wierszy, tabulatory itp.), które nie przekazują żadnego znaczenia, z wyjątkiem tego, aby tekst był bardziej czytelny. Zminimalizowane pliki WordPress działają w taki sam sposób jako oryginalny kod, z tą tylko różnicą, że zajmują trochę czasu less przestrzeń, ponieważ wycinają dodatkowe informacje. Z tego powodu plik staje się mniejszy do pobrania, co powoduje ogólnie szybszą witrynę.

Minifikacja jest szczególnie ważna i przydatna w przypadku skryptów (takich jak pliki Javascript), arkuszy stylów CSS i innych podobnych komponentów witryny.

Czytaj więcej: Jak zatrudnić (WSPANIAŁYCH) programistów Javascript - 5 najlepszych witryn, kliknij tutaj - https://www.collectiveray.com/hire-javascript-developer

Głównym powodem tego i korzyściami dla Twojej witryny są:

• Skrócenie czasu ładowania i ogólne przyspieszenie Twojej witryny. Biorąc pod uwagę, że większość stron internetowych używa kilku skryptów i plików arkuszy stylów, co powoduje DUŻO dodatkowej przestrzeni. Chociaż możesz pomyśleć, że usunięcie spacji nie spowoduje wielu zmian, pełny proces minifikacji wszystkich plików instalacji WordPress może przynieść znaczne korzyści.
• Ukrywanie kodu przed przypadkowymi czytelnikami. Chociaż wynikowa minifikacja nie ukrywa kodu Twojej witryny (tzn. różni się to od zaciemniania kodu), to jednak nieco utrudnia zwykłym użytkownikom zrozumienie, jeśli jest to coś, co Cię niepokoi. 

Chociaż minimalizacja kodu prawdopodobnie nie spowoduje olbrzymi Różnica w czasie wczytywania Twojej witryny, postrzegana jako część pełnej strategii optymalizacji, byłaby jedną z wielu rzeczy, które powinieneś zrobić. Może skrócić czas ładowania strony o kilka punktów procentowych, co czyni go dobrą taktyką do wdrożenialess.

Co dzieje się podczas procesu minifikacji?

Zasadniczo proces minifikacji przechodzi przez takie pliki tekstowe i usuwa wszystko, co jest przeznaczone tylko do spożycia przez ludzi, ponieważ w końcu maszyna parsująca plik nie nadaje się do odczytu przez człowieka. Proces minifikacji WordPressa usuwa wszelkie elementy, takie jak dodatkowe spacje (spacje, znaki nowej linii, tabulatory), komentarze lub inny tekst, który zwiększa rozmiar pliku bez zmniejszania „semantyki” pliku dla przeglądarki. Znaczenie nadal istnieje, pliki są po prostu mniejsze.

Na przykład tak wyglądałby normalny plik CSS:

body {
margines: 30px;
padding: 30px;
color: #FFFFFF;
tło:#f7f7f7;
}
h1 {
font-size: 12px;
kolor#222222;
margin-bottom: 5px;
}

Zminimalizowana wersja tego kodu wyglądałaby tak:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Widać, że informacje tekstowe są dokładnie takie same, są po prostu odarte z rzeczy, które są tam dla celów czytelności. Ta sama koncepcja dotyczy plików JavaScript.

Efektem końcowym korzystania z wtyczek lub środków do minimalizacji JavaScript WordPress byłoby, że wynik HTML, wraz z plikami CSS i plikami JS używanymi przez Twoją witrynę i jej wtyczki, wyglądałby mniej więcej tak:

Chociaż może to wyglądać jak kupa śmieci, w rzeczywistości całe znaczenie nadal tam jest – zostało właśnie „zminimalizowane”, aby usunąć wszelkie niepotrzebne rzeczy, które nadęły jego rozmiar.

Istnieje wiele wtyczek, które mogą pomóc w osiągnięciu tego procesu, o czym wspomnimy poniżej.

Zminimalizuj JavaScript WordPress

Proces minimalizacji JavaScript WordPress jest dość prosty. Wystarczy zainstalować jedną z poniższych wtyczek. Warto również zauważyć, że podstawowe pliki JavaScript WordPress są domyślnie zminimalizowane.

W rzeczywistości, jeśli spojrzysz na kod źródłowy swojej witryny WordPress, zobaczysz rozszerzenie .min.js, które pokazuje, że rzeczywiste pliki są już zminimalizowane.

Niekoniecznie tak jest w przypadku wtyczek i motywów innych firm.

Możesz również wykonać dodatkowy krok polegający na usunięciu wszelkich wtyczek, które są dodatkowe i generowaniu skryptów, których możesz nie potrzebować.

Jeśli jesteś całkowicie skupiony na wydajności, możesz również utworzyć wersje plików JavaScript, które zawierają TYLKO skrypt używany przez Twoją witrynę. Zobacz domyślnie większość plików skryptów ma dodatkowy kod, który jest dołączany „na wszelki wypadek”, gdy jest to potrzebne.

Możesz chcieć się dowiedzieć jak to zrobić tutaj.

Zminimalizuj CSS WordPress

Po raz kolejny proces Minify CSS WordPress jest prosty. Możesz po prostu zainstalować wtyczkę, która automatycznie wykona minifikację plików CSS. Chociaż większość podstawowych plików WordPress ma zminifikowaną wersję plików CSS, niekoniecznie dotyczy to wszystkich wtyczek i motywów.

Po raz kolejny zalecamy również wykonanie ćwiczenia pokrycia kodu CSS, aby usunąć zbędny kod CSS, który jest po prostu martwą wagą.

W następnej sekcji omówimy kilka wtyczek, które minimalizują CSS WordPress. 

5 najlepszych wtyczek WordPress Miniify

Będziemy omawiać zarówno ogólne produkty, które są używane ogólnie do przyspieszania witryny poprzez minifikację, jak i konkretne wtyczki, których jedyną funkcją jest proces minifikacji.

1. WP Rocket

To zdecydowanie nasza ulubiona wtyczka.

Powód jest prosty, jest to zdecydowanie najlepszy produkt, który może wykonać kilka zadań optymalizacji prędkości, w naprawdę prosty sposób, ale z doskonałym wynikiem przyspieszania witryny, w tym wykonywania minifikacji plików CSS i JavaScript WordPress.

Naprawdę i naprawdę, to tylko jedna z rzeczy, które robi ta wtyczka, ale kiedy ją zainstalujesz, przekonasz się, że nie musisz robić nic więcej.

Jak widać poniżej, ta minifikacja jest jedną z podstawowych opcji optymalizacji. Dzięki temu zobaczysz, że istnieje konkatenacja, jest to wtórny proces optymalizacji, który tworzy jeden plik ze wszystkich plików CSS i JS (ponieważ przyspiesza to również pobieranie plików)

Wtyczka nie jest darmowa, ale cena jest bardzo niska i wynosi zaledwie 49 USD. Biorąc pod uwagę oszczędność czasu i efekt szybszego ładowania witryny, dosłownie w ciągu kilku minut, zdecydowanie zalecamy wybranie tego.

Instalujemy tę wtyczkę na każdej skonfigurowanej przez nas witrynie WordPress, po prostu dlatego, że oszczędza nam to wiele czasu na optymalizację.

Kliknij tutaj, aby uzyskać najniższą cenę na WP Rocket

2. Optymalizacja JCH

Oto mała sztuczka, która bardzo Ci pomoże - użyj Optymalizacji JCH - jest to narzędzie, które działa na wielu platformach, takich jak WordPress, Joomla, Drupal i Magento.

Wspaniałą rzeczą w JCH Optimize jest to, że implementuje ogromną liczbę Google Page Speed i inne zalecenia, aby Twoja witryna ładowała się tak szybko, jak to możliwe.

Jest świetny, ponieważ wymaga prawie zerowej konfiguracji i interwencji użytkownika.

Jeśli szukasz szybkiej usługi hostingowej, spójrz na naszego hosta, dokładnie je sprawdziliśmy tutaj: https://www.collectiveray.com/inmotion-hosting-review

I nie musisz grzebać w żadnym kodzie, wszystko to jest robione przez wtyczkę - zachowuje całe oryginalne kodowanie, więc niczego nie zepsujesz, bawiąc się. Ponadto zwykle wykonuje te optymalizacje, które zwykle są najtrudniejsze do wykonania. Aby wymienić kilka, są to te, które są zrobione dobrze

• Łączy pliki CSS ze wszystkich szablonów, modułów i wtyczek w jeden plik, zmniejszając w ten sposób liczbę żądań wysyłanych do Twojej witryny
• Łączy pliki Javascript, które zwykle są naprawdę trudne do połączenia bez uszkodzenia witryny
• Spakuje CSS i JavaScript, aby stały się mniejsze, a czas przesyłania skrócony
• Minimalizuje kod JavaScript i CSS, aby uczynić go bardziej kompaktowym i jeszcze bardziej zmniejszyć jego rozmiar (zmniejsza wszelkie dodatkowe odstępy, komentarze itp.)
• Dodaje tag DEFER, dzięki któremu strona ładuje się jako pierwsza, i wykonuje kod JavaScript po załadowaniu strony, dzięki czemu ładowanie strony jest szybsze. Biorąc pod uwagę, że ta konkretna implementacja ma kluczowe znaczenie dla szybkiej witryny, szczegółowo omówiliśmy to tutaj: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
• Tworzy IMAGE Sprites - to również zmniejsza liczbę zapytań wysyłanych do Twojej witryny o bardzo dużą ilość i jest jedną z najtrudniejszych optymalizacji do wykonania ręcznie

Pozwala także dostosować niektóre zaawansowane opcje, takie jak wykluczenie niektórych plików, aby upewnić się, że jeśli jakiekolwiek rozszerzenie nie działa po uruchomieniu go przez JCH Optimize, to i tak zadziała.

Pandemia Wersja PRO, który jest dostępny za marne 29 USD, daje dostęp do kilku innych opcji optymalizacji, takich jak włączenie wbudowanego CSS i Javascript oraz ładowanie Javascript asynchronicznie, aby nie blokować ładowania strony.

Uwierz mi na słowo, zainstaluj wtyczkę, włącz ją i sprawdź wyniki przed i po. Jeśli nie uzyskasz znacznej poprawy, wróć tutaj i narzekaj, ale jestem pewien, że nie wrócisz :)

Kliknij tutaj, aby pobrać Optymalizację JCH

3. Całkowita pojemność pamięci podręcznej W3

To kolejna wtyczka, którą zobaczysz, jest ogólnym oprogramowaniem, które robi wiele rzeczy związanych z przyspieszaniem WordPressa, w tym minifikację plików CSS, JS i HTML.

Chociaż zauważysz, że wspomina się o tym bardzo często, jeśli chodzi o takie wtyczki, należy zauważyć, że ten produkt absolutnie nie jest dobrym pomysłem dla osób, które nie są techniczne.

Wiadomo, że powoduje znaczne problemy, a niektóre błędy pozostają nawet po odinstalowaniu oprogramowania i usunięciu go ze strony internetowej.

Się w CollectiveRay próbowałem używać tej wtyczki kilka razy, ale w tym momencie i w obecnym stanie nie zalecamy już używania jej do celów minifikacji lub przyspieszenia stron internetowych, unless wiesz dokładnie, co robisz.

4. WP Super Minify

Ta wtyczka używa Zminifikuj framework PHP i używając go łączy, minimalizuje i buforuje wbudowane pliki JavaScript i CSS na żądanie, aby przyspieszyć ładowanie strony.

Aktywując to wtyczka, źródło Twojego kodu HTML, wbudowanego kodu JavaScript i CSS jest teraz pozbawione dodatkowych elementów, dzięki czemu ich rozmiar jest mniejszy.

Tym, co różni się od innych wymienionych tutaj wtyczek, jest to, że ta wtyczka wykonuje TYLKO proces minifikacji i nie ma innych optymalizacji, co jest doskonałym wyborem dla tych, którzy chcą tylko wykonywać tę funkcję i nic więcej z jakiegokolwiek powodu.

5. Szybka minimalizacja prędkości 

Chociaż istnieje wiele innych wtyczek minifikacji WordPress, które możemy polecić, będzie to ostatnia, o której tutaj wspominamy. 

Wtyczka Fast Velocity łączy wszystkie pliki CSS i JavaScript, dzięki czemu serwer WWW musi obsłużyć mniejszą liczbę żądań. Jednocześnie minimalizuje pliki i tworzy kopie w pamięci podręcznej, aby przyspieszyć ładowanie.

Ta wtyczka automatycznie włącza opcje minimalizacji kodu HTML, JavaScript i CSS, ale ty mogą wyłącz jeden lub więcej z nich ręcznie, przechodząc do Ustawienia → Szybka minimalizacja prędkości patka.

Możesz wykluczyć określone pliki z minifikacji, jeśli jedna z wtyczek ulegnie awarii po włączeniu tej opcji.

Owijanie w górę 

Chociaż proces minifikacji nie jest funkcją przełomową, należy go wdrożyć jako jedno z kilku zadań, aby przyspieszyć działanie WordPressa i zdecydowanie zalecamy wdrożenie jednego z wyżej wymienionych produktów.

O autorze

Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/

David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.