Jak zminimalizować CSS, HTML i JavaScript swojej witryny WordPress

Minifikacja to prosta koncepcja, która jest często zalecana jako krok w kierunku przyspieszenia witryny. Ale w rzeczywistości wielu właścicieli witryn frustruje się bez końca, gdy próbują zminimalizować swoje pliki i ostatecznie psują swoją witrynę.

Co więc daje?

Minifikacja często wymaga wielu eksperymentów. Chociaż dostępnych jest wiele rozwiązań, ich zachowanie będzie się różnić w zależności od witryny, w zależności od używanego motywu i wtyczek.

W tym poście omówimy, czym jest minifikacja, jakie są jej zalety oraz niektóre z bardziej popularnych dostępnych rozwiązań minifikacji – zarówno ręcznych, jak i wtyczek – aby pomóc Ci wskazać właściwe rozwiązanie dla Twojej witryny.

Co to jest minifikacja?

Strony internetowe składają się z wielu różnych plików. Jeśli przetestujesz szybkość swojej witryny za pomocą Google PageSpeed ​​Insights, możesz otrzymać zalecenie zmniejszenia plików HTML, CSS i JavaScript.

Problem? Jako ludzie piszemy kod zawarty w tych plikach, aby móc je odczytać, ale komputery nie przejmują się takimi znakami, jak komentarze, formatowanie, białe znaki i nowe linie. Więc kiedy natkną się na te niepotrzebne znaki w plikach strony internetowej, ignorują je.

I tu pojawia się minifikacja. Minifikacja to termin programistyczny, który zasadniczo oznacza usuwanie zbędnych znaków, które nie są wymagane do wykonania kodu. Minifikacja polega na analizie i przepisaniu kodu w celu zmniejszenia całkowitego rozmiaru plików, zmniejszając w ten sposób całkowity rozmiar witryny, dzięki czemu ładuje się ona szybciej w przeglądarce użytkownika.

Oto na przykład kod CSS, który możesz znaleźć w arkuszu stylów:

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

A oto zmniejszona wersja powyższego przykładu CSS:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

Widzisz, o ile bardziej skompresowany jest kod?

Minifikacja jest wykonywana na serwerze WWW przed wysłaniem odpowiedzi. Po zminimalizowaniu serwer WWW używa mniejszych, zminimalizowanych – i znacznie szybszych – plików zamiast oryginalnych, co skutkuje mniejszą przepustowością bez utraty funkcjonalności.

Jak wyjaśnia ekspert SEO Yoast, minimalizowanie plików może w niektórych przypadkach zaoszczędzić do 30-40%, a nawet 50% rozmiaru pliku.

Dlaczego warto zminimalizować pliki HTML, CSS i JavaScript

Posiadanie szybkiej witryny nie tylko uszczęśliwia Google – i pomaga Twojej witrynie uzyskać wyższą pozycję w wynikach wyszukiwania – ale zapewnia użytkownikom lepszą wygodę.

Minifikacja ma wiele zalet:

• Mniejsze pliki oznaczają zmniejszenie całkowitego rozmiaru pobieranej witryny,
• Odwiedzający witrynę będą mogli szybciej ładować i uzyskiwać dostęp do Twoich stron,
• Odwiedzający witrynę będą mieli identyczne wrażenia użytkownika bez konieczności pobierania większych plików i
• Właściciele witryn uzyskają niższe koszty przepustowości, ponieważ w sieci przesyłanych jest mniej danych.

Jak zminimalizować pliki HTML, CSS i JavaScript

Przed zminimalizowaniem plików witryny warto wykonać kopię zapasową. Co więcej, zminimalizuj swoje pliki w witrynie testowej, aby móc sprawdzić, czy wszystko działa, zanim wprowadzisz zmiany w działającej witrynie.

Ważne jest również sprawdzenie szybkości strony przed i po zminimalizowaniu plików, aby móc porównać wyniki i sprawdzić, czy zminimalizowanie przyniosło jakiś wpływ.

Moją ulubioną witryną do testów prędkości jest GTmetrix. Analizuje wydajność Twojej strony za pomocą zarówno Google PageSpeed ​​Insights, jak i YSlow, narzędzia do testowania wydajności typu open source. Następnie generuje wyniki i przedstawia zalecenia dotyczące ulepszeń optymalizacji witryny.

Inne świetne narzędzia do testowania prędkości, które mogę polecić, to Pingdom Website Speed ​​Test oraz WebPageTest and Test your mobile speed.

Ręczne minimalizowanie plików

Ręczne minimalizowanie plików zajmuje dużo czasu i wysiłku. To znaczy, kto ma czas na usuwanie pojedynczych spacji, linii i niepotrzebnego kodu z plików? Nudny! Daje także więcej miejsca na błędy ludzkie. Więc nie polecałbym tej metody do minimalizacji plików.

Na szczęście dostępnych jest wiele bezpłatnych narzędzi do minifikacji online, które umożliwiają kopiowanie i wklejanie kodu zi do witryny. Oto krótka lista narzędzi i zachęcam do zbadania innych opcji, które mogą lepiej działać w Twojej witrynie.

1. Minifikator HTML Willa Peavy'ego

HTML Minifier to bezpłatne narzędzie online do minifikacji HTML zbudowane w PHP. Aby skorzystać z tego narzędzia, po prostu wklej swój kod HTML do obszaru tekstowego, w tym dowolny kod CSS JavaScript w znacznikach, i kliknij przycisk „Minify”. Aby mieć pewność, że skrypty będą działać po minifikacji, zaleca się kończenie instrukcji JavaScript średnikiem i używanie składni* *dla komentarzy.

2. Minifikator CSS

Kolejne bezpłatne narzędzie, CSS Minifier, działa poprzez minimalizowanie CSS, które kopiujesz i wklejasz w obszarze tekstowym „Input CSS”. Istnieją opcje pobierania zminimalizowanych danych wyjściowych jako pliku. Dla programistów to narzędzie udostępnia również interfejs API.

3. JSCompress

JSCompress to internetowy kompresor JavaScript, który pozwala kompresować i minimalizować pliki JS nawet o 80% ich pierwotnego rozmiaru. Aby z niego skorzystać, skopiuj i wklej swój kod lub prześlij i połącz wiele plików, a następnie kliknij „Kompresuj JavaScript”. To narzędzie jest oparte na UglifyJS 3 i babili-standalone.

Ręczne narzędzia do minimalizacji dla programistów

Programistom poszukującym bardziej zaawansowanych opcji Google zaleca następujące zasoby minimalizacji HTML, CSS i JavaScript:

• HTMLMinifier – kompresor/minifikator HTML oparty na Javascript (z obsługą Node.js).
• CSSNano – modułowy miniyfikator zbudowany na bazie ekosystemu PostCSS.
• csso – minifikator CSS z optymalizacjami strukturalnymi.
• UglifyJS – parser, mangler, kompresor i zestaw narzędzi „upiększających” JavaScript.

Kompilator zamknięcia Google to narzędzie optymalizacyjne dla JavaScript. Zamiast kompilować z języka źródłowego do kodu maszynowego, kompiluje z JavaScript, aby ulepszyć JavaScript. Analizuje kod, usuwa martwy kod, przepisuje go i minimalizuje to, co pozostało. To narzędzie sprawdza również składnię, odwołania do zmiennych i typy oraz ostrzega o typowych pułapkach JavaScript.

Minimalizowanie plików za pomocą wtyczek

Dostępnych jest kilka świetnych wtyczek, zarówno bezpłatnych, jak i premium, które mogą zminimalizować Twoje pliki bez konieczności wykonywania ręcznych czynności.

Uwaga: na tej liście uwzględniłem wyłącznie bezpłatne wtyczki dostępne w repozytorium wtyczek WordPress, które są aktualne i przetestowane pod kątemzgodności z najnowszymi wersjami WordPress. Aby zobaczyć opcje premium, przewiń w dół./

1. Minimalizuj HTML

Ta prosta, lekka i bezproblemowa wtyczka umożliwia zminimalizowanie kodu HTML Twojej witryny. Aby z niego skorzystać, wystarczy zainstalować i aktywować wtyczkę, a ona automatycznie zmniejszy Twoje znaczniki bez konieczności konfigurowania jakichkolwiek ustawień.

2. Zminimalizuj kod HTML

Podoba mi się opis tej wtyczki na WordPress.org: „Przyglądałeś się kiedyś znacznikom HTML swojej witryny i zauważyłeś, jak niechlujnie i amatorsko wygląda?” Ta wtyczka czyści i minimalizuje niechlujne znaczniki.

W przeciwieństwie do wtyczki HTML Minify, to narzędzie zapewnia więcej opcji. Zawiera opcjonalną minifikację dla JavaScript i CSS, chociaż nie ma to wpływu na obszary tekstowe ani wstępnie sformatowany tekst. Istnieją również opcje usuwania komentarzy HTML, CSS i JavaScript (pozostawienie komentarzy warunkowych MSIE), usuwania zbędnych tagów zamykających XHTML z pustych elementów HTML5 oraz usuwania niepotrzebnych schematów względnych i domen z linków.

3. Scalanie + Minifikacja + Odśwież — Wtyczki WordPress

Ta wtyczka nie tylko minimalizuje twój kod. Łączy pliki CSS i JavaScript, anastępnieminimalizuje wygenerowane pliki za pomocą Minify (dla CSS) i Google Closure (dla JavaScript). Minifikacja jest wykonywana za pomocą WP-Cron, dzięki czemu nie wpływa na szybkość Twojej witryny.

Gdy zawartość Twoich plików CSS lub JS ulegnie zmianie, są one ponownie przetwarzane, więc nie ma potrzeby opróżniania pamięci podręcznej. Użytkownicy wielu witryn będą zadowoleni, wiedząc, że ta wtyczka działa dobrze w sieciach.

4. Optymalizacja JCH

JCH Optimize ma wiele ciekawych funkcji darmowej wtyczki: łączy i minimalizuje CSS i JavaScript, minimalizuje HTML, kompresję GZip dla łączy plików, generowanie ikonek dla obrazów tła i możesz wykluczyć niektóre pliki z łączenia w celu rozwiązania konfliktów.

Dostępna jest wersja profesjonalna z większą liczbą funkcji optymalizacyjnych, w tym asynchronicznym ładowaniem JavaScript, optymalizacją dostarczania CSS w celu wyeliminowania blokowania renderowania, obsługą domen CDN/bez plików cookie oraz leniwym ładowaniem i optymalizacją obrazów.

5. Minimalizacja CSS

Minimalizowanie CSS za pomocą tej wtyczki nie może być prostsze – wystarczy zainstalować, aktywować, przejść doUstawienia > CSS Minify, aby włączyć tylko jedną opcję: Optymalizuj i minimalizuj kod CSS.

Kod w tej wtyczce został rozwidlony z popularnej wtyczki Autoptimize (więcej o tej wtyczce poniżej). Autor wtyczki, Peter Pfeiffer, udostępnia podobną wtyczkę dla JavaScript, Minify JavaScript.

6. Minimalizacja dużej prędkości

Dzięki ponad 20 000 aktywnych instalacji i pięciogwiazdkowej ocenie jest to jedna z bardziej popularnych opcji zmniejszania plików. Aby z niej skorzystać, zainstaluj i aktywuj wtyczkę, a następnie przejdź doUstawienia > Minifikacja prędkości. Znajdziesz tam szereg opcji konfiguracji wtyczki, w tym zaawansowane opcje dla programistów, wyjątki JavaScript i CSS, opcje CDN, a także informacje o serwerze. Jednak ustawienia domyślne działają dobrze w przypadku większości witryn.

Wtyczka wykonuje minifikację w czasie rzeczywistym na froncie i tylko podczas pierwszego niebuforowanego żądania. Po przetworzeniu pierwszego żądania wszystkie inne strony wymagające tego samego zestawu CSS i JavaScript otrzymają ten sam statyczny plik pamięci podręcznej.

7. Automatycznie optymalizuj

Dzięki ponad 400 000 aktywnych instalacji Autoptimize jest z pewnością najpopularniejszym narzędziem do minifikacji w repozytorium wtyczek WordPress.

Autoptimize może agregować, minimalizować i buforować skrypty i style, domyślnie wstrzykiwać CSS do nagłówka strony, a także przenosić i odraczać skrypty do stopki. Dostępnych jest wiele zaawansowanych opcji dla programistów i rozbudowane API, dzięki czemu możesz dostosować Autoptimize do specyficznych potrzeb Twojej witryny.

8. Optymalizacja szybkości strony kolibra

Hummingbird to stosunkowo nowa wtyczka do repozytorium wtyczek WordPress, która zaczynała jako wtyczka premium. Darmowa wersja zawiera bogatą kolekcję narzędzi do optymalizacji witryny, w tym minifikację, umożliwiającą minimalizowanie, pozycjonowanie i łączenie plików w celu uzyskania najwyższej wydajności.

Dostępna jest także świetna funkcja skanowania, która umożliwia przetestowanie wydajności witryny i uzyskanie praktycznych zaleceń dotyczących ulepszenia witryny bezpośrednio z poziomu wtyczki.

Minifikacja jako funkcja we wtyczkach buforujących WordPress

Minifikacja jest ogólnie standardową funkcją, którą można znaleźć we wtyczkach do buforowania. Oto wtyczki, które przetestowałem i mogę polecić:

• Rakieta WP
• Całkowita pamięć podręczna W3
• Super pamięć podręczna WP

Wniosek

Mam nadzieję, że ten artykuł wyjaśnił Ci tajemnicę minifikacji i zapewnił solidne zrozumienie, czym jest i jak możesz zastosować ją w swojej witrynie.

Należy pamiętać, że minifikacja to raczej krok dostrajający – możesz zauważyć niewielką poprawę szybkości działania witryny, ale nie będzie ona znacząca. To powiedziawszy, jest to najlepsza praktyka, którą warto wdrożyć jako dodatek do innych technik wydajności i optymalizacji, takich jak łączenie plików.

Upewnij się także, że konfigurujesz, testujesz, rekonfigurujesz, ponownie testujesz, poprawiasz i sprawdzasz, co działa najlepiej dla Twojej witryny podczas minimalizacji plików, ponieważ każda witryna jest inna.

Jeśli podobał Ci się ten post, sprawdź porównanie 6 najlepszych wtyczek pamięci podręcznej WordPress, aby uzyskać więcej porad na temat przyspieszenia witryny.

Czy próbowałeś minimalizować swój kod? Z jakich innych metod przyspieszania witryny korzystałeś? Daj nam znać w sekcji komentarzy poniżej!