Podobnie jak wiele osób, które starają się przyspieszyć ładowanie swojej witryny, odwołują się do Witryna z rekomendacjami Google PageSpeed, i słusznie, ponieważ jeśli Google coś oświadcza, zazwyczaj warto tego posłuchać. Jednak czasami jest dość bałaganiarskie, aby wykonać wszystkie optymalizacje, a Ty możesz nie mieć umiejętności, aby wykonać te zmiany.
Jak zapewne wiesz, przyśpieszając działanie swojej witryny WordPress, musisz wykonać wiele optymalizacji. Jedną z nich jest wiedza, jak prawidłowo wykorzystać buforowanie przeglądarki w WordPress, coś co CollectiveRay ma świetny artykuł na ten temat.
Ale to zdecydowanie za mało, jeśli pliki CSS i Javascript są dość duże. Na tym polega minifikacja.
Czym jest minifikacja? (i jak może przynieść korzyści Twojej witrynie)
Minifikacja to funkcja polegająca na usunięciu z fragmentu kodu wszelkich znaków (takich jak spacje, podziały wierszy, tabulatory i inne), które nie przekazują żadnego znaczenia, poza uczynieniem tekstu bardziej czytelnym. Zminimalizowane pliki WordPress wykonują w taki sam sposób jak oryginalny kod, z tą różnicą, że zajmują trochę mniej miejsca, ponieważ wycinają dodatkowe informacje. Z tego powodu plik staje się mniejszy do pobrania, co skutkuje ogólnie szybszą witryną.
Minifikacja jest szczególnie ważna i użyteczna w przypadku skryptów (takich jak pliki JavaScript), arkuszy stylów CSS i innych podobnych komponentów witryn internetowych.
Czytaj więcej: Jak zatrudnić (WSPANIAŁYCH) programistów JavaScript - 5 najlepszych stron, kliknij tutaj - https://www.collectiveray.com/hire-javascript-developer
Głównym powodem takiego postępowania i korzyściami dla Twojej witryny są:
- Skrócenie czasu ładowania i ogólne przyspieszenie działania witryny. Biorąc pod uwagę, że większość stron internetowych używa kilku skryptów i plików arkuszy stylów, co skutkuje WIELOMA dodatkowymi miejscami. Podczas gdy możesz myśleć, że usunięcie spacji nie spowoduje wielu zmian, kompletny proces minifikacji wszystkich plików instalacji WordPressa może przynieść znaczące korzyści.
- Ukrywanie kodu przed zwykłymi czytelnikami. Choć wynikająca z tego minifikacja nie ukrywa kodu Twojej witryny (czyli różni się od zaciemniania kodu), to jednak sprawia, że jest on znacznie trudniejszy do zrozumienia dla zwykłych użytkowników, jeśli Cię to niepokoi.
Chociaż minifikacja kodu raczej nie spowoduje olbrzymi różnica w czasie ładowania Twojej witryny, postrzegana jako część kompletnej strategii optymalizacji, byłaby jedną z wielu rzeczy, które powinieneś zrobić. Może ona skrócić czas ładowania Twojej strony o kilka punktów procentowych, co czyni ją dobrą taktyką do wdrożenia mimo wszystko.
Co dzieje się podczas procesu minifikacji?
Zasadniczo proces minifikacji przechodzi przez takie pliki tekstowe i usuwa wszystko, co jest przeznaczone wyłącznie do użytku ludzkiego, ponieważ w końcu maszyna analizująca plik nie chce, aby był on czytelny dla człowieka. Proces minifikacji WordPress usuwa wszelkie elementy, takie jak dodatkowe odstępy (spacje, nowe linie, tabulatory), komentarze lub jakikolwiek inny tekst, który zwiększa rozmiar pliku, nie zmniejszając „semantyki” pliku dla przeglądarki. Znaczenie jest nadal takie samo, 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 następująco:
body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}
Można zobaczyć, że informacje tekstowe są dokładnie takie same, po prostu są pozbawione rzeczy, które są tam dla celów czytelności. Ta sama koncepcja dotyczy plików JavaScript.
Końcowym efektem użycia wtyczek lub narzędzi do minimalizacji kodu JavaScript w WordPressie byłoby to, ż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:
Choć może się to wydawać zbędnym śmieciem, w rzeczywistości cały sens jest taki sam - plik został po prostu „zmniejszony”, aby usunąć wszystkie niepotrzebne elementy, które powodują jego zwiększenie rozmiaru.
Istnieje wiele wtyczek, które mogą pomóc w realizacji tego procesu i o których 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 minimalizowane.
Jeśli przyjrzysz się kodowi źródłowemu swojej witryny WordPress, zobaczysz rozszerzenie .min.js, które oznacza, że pliki są już zminimalizowane.
Nie jest to jednak regułą w przypadku wtyczek i motywów innych firm.
Możesz również wykonać dodatkowy krok polegający na usunięciu wszelkich dodatkowych wtyczek i wygenerowaniu skryptów, które mogą Ci nie być potrzebne.
Jeśli jesteś absolutnie skupiony na wydajności, możesz również zdecydować się na tworzenie wersji 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łączony „na wszelki wypadek”, gdy jest potrzebny.
Może chcesz się dowiedzieć o jak to zrobić tutaj.
Zminimalizuj CSS WordPress
Ponownie proces Minify CSS WordPress jest prosty. Możesz po prostu zainstalować wtyczkę, a ona automatycznie wykona minifikację plików CSS. Podczas gdy większość podstawowych plików WordPress ma zminimalizowaną wersję plików CSS, nie dotyczy to koniecznie wszystkich wtyczek i motywów.
Po raz kolejny zalecamy wykonanie ćwiczenia pokrycia kodu CSS w celu usunięcia zbędnego kodu CSS, który stanowi po prostu nieistotny ciężar.
W następnej sekcji wymienimy kilka wtyczek, które minimalizują kod CSS WordPressa.
5 najlepszych wtyczek WordPress Minify
Omówimy zarówno produkty ogólne, które służą do przyspieszania działania 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 wykonywać wiele zadań związanych z optymalizacją szybkości, w naprawdę prosty sposób, z doskonałym efektem przyspieszenia działania Twojej witryny, łącznie z wykonaniem minifikacji plików CSS i Javascript WordPress.
Szczerze mówiąc, to tylko jedna z rzeczy, które ta wtyczka robi, ale po jej zainstalowaniu okaże 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 jej cena jest bardzo niska i wynosi zaledwie 49 USD. Biorąc pod uwagę czas, jaki oszczędzasz, i efekt szybszego ładowania witryny, dosłownie w ciągu kilku minut, zdecydowanie polecamy wybór tej wtyczki.
Instalujemy tę wtyczkę na każdej tworzonej przez nas witrynie WordPress, ponieważ oszczędza nam ona mnóstwo czasu na optymalizację.
Kliknij tutaj, aby uzyskać najniższą cenę na WP Rocket
2. Optymalizacja JCH
Oto mała sztuczka, która naprawdę ci pomoże - użyj JCH Optimize - jest to narzędzie, które działa na wielu platformach, takich jak WordPress, Joomla, Drupal i Magento.
Największą zaletą JCH Optimize jest to, że implementuje ogromną liczbę Google Page Speed i inne zalecenia, dzięki którym Twoja strona będzie ładować się jak najszybciej.
To świetne rozwiązanie, ponieważ nie wymaga praktycznie żadnej konfiguracji ani interwencji ze strony użytkownika.
Jeśli szukasz szybkiego hostingu, zapoznaj się z ofertą naszych usługodawców, których dokładnie sprawdziliśmy tutaj: https://www.collectiveray.com/inmotion-hosting-review
I nie musisz bawić się żadnym kodem, wszystko to robi wtyczka - zachowuje ona cały oryginalny kod, więc niczego nie zepsujesz, bawiąc się. Zazwyczaj wykonuje również te optymalizacje, które są najtrudniejsze do wykonania. Aby wymienić kilka, oto te, które są zrobione dobrze
- Łączy pliki CSS ze wszystkich Twoich 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, co zazwyczaj jest bardzo trudne do połączenia bez uszkodzenia witryny
- Łączy pliki CSS i Javascript, dzięki czemu stają się mniejsze, a czas transferu ulega skróceniu
- Minimalizuje kod JavaScript i CSS, aby był bardziej zwarty i jeszcze bardziej zmniejszył swój rozmiar (zmniejsza liczbę zbędnych odstępów, komentarzy itp.)
- Dodaje znacznik DEFER, dzięki czemu strona ładuje się jako pierwsza i wykonuje JavaScript po załadowaniu strony, dzięki czemu ładowanie witryny jest szybsze. Biorąc pod uwagę, że ta konkretna implementacja jest krytyczna dla szybkiej witryny, omówiliśmy to szczegółowo tutaj: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
- Tworzy obiekty IMAGE Sprite – zmniejsza to również liczbę żądań wysyłanych do Twojej witryny w znacznym stopniu i jest jedną z najtrudniejszych optymalizacji do osiągnięcia ręcznie
Umożliwia także dostosowanie niektórych zaawansowanych opcji, takich jak wykluczanie niektórych plików, aby mieć pewność, że jeśli dane rozszerzenie nie będzie działać po uruchomieniu go przez JCH Optimize, to i tak zadziała.
Wersja PRO, który jest dostępny za marne 29 dolarów, zapewni Ci dostęp do kilku innych opcji optymalizacji, takich jak włączanie wbudowanego CSS i JavaScript oraz ładowanie Javascript asynchronicznie, aby nie blokować ładowania witryny.
Zaufaj mi, zainstaluj wtyczkę, włącz ją i sprawdź swoje wyniki przed i po. Jeśli nie zauważysz znaczącej poprawy, wróć tutaj i poskarż się, ale jestem pewien, że nie wrócisz :)
Kliknij tutaj, aby pobrać JCH Optimize
3. Całkowita pojemność pamięci podręcznej W3
Oto kolejna wtyczka, która jest ogólnym oprogramowaniem wykonującym szereg czynności związanych z przyspieszeniem działania WordPressa, w tym minimalizującym pliki CSS, JS i HTML.
Chociaż w kontekście tego typu wtyczek wspomina się o tym bardzo często, należy zaznaczyć, że produkt ten zdecydowanie nie jest dobrym pomysłem dla osób niemających wiedzy technicznej.
Wiadomo, że może ono powodować poważne problemy, a niektóre błędy pozostają nawet po odinstalowaniu oprogramowania i usunięciu go ze strony internetowej.
My sami w CollectiveRay próbowałem używać tej wtyczki kilka razy, ale na tym etapie i w obecnym stanie nie zalecamy już jej używania w celu minifikacji lub przyspieszenia działania stron internetowych, chyba że dokładnie wiesz, co robisz.
4. WP Super Minify
Ta wtyczka używa Zminimalizuj Framework PHP i za jego pomocą można łączyć, minimalizować i buforować osadzone pliki JavaScript i CSS na żądanie, aby przyspieszyć ładowanie stron.
Aktywując tę opcję wtyczka, kod źródłowy HTML, inline JavaScript i CSS są teraz pozbawione zbędnych elementów, w wyniku czego ich rozmiar jest mniejszy.
Czym się różni od innych wtyczek wymienionych tutaj, jest to, że ta wtyczka wykonuje TYLKO proces minifikacji i nie przeprowadza żadnych innych optymalizacji, co jest świetnym wyborem dla tych, którzy chcą wykonywać wyłącznie tę funkcję i nic więcej z jakiegokolwiek powodu.
5. Szybka minimalizacja prędkości
Chociaż możemy polecić wiele innych wtyczek do minifikacji WordPress, to tę będziemy tu wymieniać jako ostatnią.
Wtyczka Fast Velocity łączy wszystkie pliki CSS i JavaScript, dzięki czemu serwer WWW musi obsługiwać mniej żą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 mogą wyłącz jeden lub więcej z nich ręcznie, przechodząc do Ustawienia → Szybka prędkość Minifikuj patka.
Możesz wybrać opcję wykluczenia konkretnych plików z minimalizacji, jeśli jedna z Twoich wtyczek przestanie działać po włączeniu tej opcji.
Owijanie w górę
Mimo że proces minifikacji nie jest przełomową funkcją, należy go wdrożyć jako jedno z kilku zadań mających na celu przyspieszenie działania WordPressa. Zdecydowanie zalecamy wdrożenie jednego z produktów wymienionych powyżej.
