Jak zminimalizować CSS, HTML i JavaScript swojej witryny?

Gdy zminimalizujesz pliki CSS, HTML i JavaScript swojej witryny, możesz zaoszczędzić trochę cennego czasu na szybkości ładowania strony w witrynie. Teraz nie mówimy o skróceniu szybkości ładowania strony o połowę lub cokolwiek, ale jeśli chodzi o szybkość witryny, trochę pomaga. Szybkość wczytywania witryny jest ważna nie tylko dla odwiedzających ją po raz pierwszy, ale jest również ważna dla przesuwania rankingu w wyszukiwarkach.

Termin „minify” to język programowania, który opisuje procesy usuwania zbędnych znaków w kodzie źródłowym. Znaki te obejmują spacje, podziały wierszy, komentarze i ograniczniki bloków, które są przydatne dla nas, ludzi, ale niepotrzebne dla maszyn. Minimalizujemy pliki witryny zawierające kod CSS, HTML i Javascript, aby Twoja przeglądarka internetowa mogła je szybciej odczytać.

Oto przykład tego, jak wygląda minifikacja CSS.

CSS przed minifikacją

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

CSS po minifikacji

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

Oczywiście jest to tylko mały przykład z użyciem fragmentu kodu CSS, ale możesz sobie wyobrazić, ile miejsca zaoszczędziłoby to przy minimalizacji tysięcy linii kodu. Tak więc, jeśli chcesz to zrobić ręcznie, technicznie możesz. Ale naraziłbyś się na wysokie ryzyko błędu i niepotrzebnie skróciłbyś cenny czas lub swoje życie!

Skorzystaj z mojej rady i korzystaj z narzędzi, które masz do dyspozycji.

Narzędzia online do ręcznej minimalizacji plików

Na szczęście nie musisz być programistą ani znać żadnego z języków programowania, aby zminimalizować pliki witryny. Minifikacja stała się standardową praktyką w świecie projektowania stron internetowych, więc nie powinno Cię dziwić, że istnieje wiele wspaniałych (i darmowych) narzędzi, które wykonują za Ciebie pracę.

Oto lista przydatnych narzędzi na początek. Ponieważ wiele z nich może minimalizować więcej niż jeden typ kodu, umieściłem opcje typu kodu w nawiasach.

• Closure Compiler (tylko JS) — Closure Compiler jest częścią Closure Tools, zestawu narzędzi Google Developers. Pozwala zminimalizować JavaScript wraz z innymi pomocnymi optymalizacjami. Możesz pobrać kod JavaScript, używając adresu URL lokalizacji pliku js, a następnie wybierz sposób optymalizacji i formatowania kodu. Na przykład decydujesz się zoptymalizować swój kod pod kątem Whitespace tylko wtedy, gdy chcesz. Po naciśnięciu przycisku kompilacji zminimalizuje (lub skompiluje) kod, a także sprawdzi kod pod kątem błędów.
• cssminifier.com i javascript-minifier.com (CSS i JS) – Te dwa minifikatory autorstwa Andrew Chiltona są proste w użyciu. Po prostu wklej swój kod, a następnie kliknij przycisk Zminifikuj, aby wyprowadzić zminifikowany kod. Możesz nawet pobrać kod wyjściowy jako plik dla wygody.
• csscompressor.net (tylko CSS) – Ten internetowy kompresor CSS jest szybki, łatwy i darmowy w użyciu.
• jscompress.com (tylko JS) — to narzędzie do kompresji JavaScript pozwala skompresować kod JavaScript za pomocą funkcji Kopiuj i Wklej, ale możesz również przesyłać wiele plików JavaScript jednocześnie. Świetnie nadaje się do łączenia plików JavaScript w jeden plik, aby uzyskać lepszą prędkość ładowania strony.
• refresh-sf.com (HTML, CSS i JS) – Ten kompresor minimalizuje typy kodu JavaScript, CSS i HTML. Zawiera również wszystkie opcje kompresora dla każdego typu kodu, jeśli ich potrzebujesz.
• htmlcompressor.com (HTML, CSS i JS) — to internetowe narzędzie do kompresji/minifikowania obsługuje typy kodu HTML, CSS i JS. Obsługuje nawet różne kombinacje typów kodu, takie jak CSS + PHP i JavaScript + PHP. Możesz nawet sprawdzić skompresowany kod pod kątem błędów.
• minifycode.com (HTML, CSS i JS) – Ta witryna oferuje minifikatory dla JavaScript, CSS i HTML z prostym i przejrzystym interfejsem użytkownika, który minimalizuje Twój kod za pomocą jednego kliknięcia przycisku. Zawiera również narzędzie „upiększające” do dekompresowania zminifikowanego kodu, aby był łatwy do odczytania (w zasadzie przeciwieństwo minifikacji).
• Dan's Tools — Dan's Tools oferuje Minifier CSS i JavaScript Minifier. Oba narzędzia mają naprawdę przejrzysty interfejs użytkownika, który jest łatwy w użyciu. Nie oferują żadnych zaawansowanych opcji, ale są idealne do typowych celów minifikacji.

Jeśli szukasz narzędzi offline do lokalnego zminimalizowania kodu HTML CSS lub JavaScript, oto kilka opcji:

• Mniejszy (HTML, CSS i JS)
• phpied.com/cssmin-js/ (tylko CSS)
• yui.github.io/yuicompressor (JS i CSS)

Jak zminimalizować CSS, HTML i JavaScript swojej witryny?

Subskrybuj nasz kanał YouTube

Jak zminimalizować swój kod HTML, CSS i JavaScript za pomocą narzędzia online

Wiele z tych narzędzi internetowych ma podobny proces, który obejmuje następujące kroki:

Wklej kod źródłowy lub prześlij plik kodu źródłowego.
Zoptymalizuj ustawienia dla określonego wyjścia (jeśli opcje są dostępne)
Kliknij przycisk, aby zminimalizować lub skompresować kod.
Skopiuj zminifikowany kod wyjściowy lub pobierz plik z zminimalizowanym kodem.

W tym przykładzie użyję narzędzi miniify z minifycode.com.

Najpierw zlokalizuj plik css (powszechnie nazywany style.css) w plikach witryny i otwórz go za pomocą edytora stron. Następnie skopiuj cały kod CSS do schowka.

Przejdź do minifycode.com i kliknij kartę minifikatora CSS. Następnie wklej kod CSS do pola wprowadzania i kliknij przycisk Zminimalizuj CSS.

Po wygenerowaniu nowego kodu skróconego skopiuj kod.

Następnie wróć do pliku css swojej witryny i zastąp kod nową, zminifikowaną wersją.

Otóż ​​to!

Powtórz ten sam proces, aby zminimalizować również pliki JavaScript i HTML witryny.

Jak zminimalizować HTML, CSS i JavaScript w WordPress za pomocą wtyczek

Najprostszym sposobem na zminimalizowanie kodu HTML, CSS i JavaScript w WordPressie jest użycie wtyczki. Umożliwia to automatyczną optymalizację plików witryny WordPress pod kątem skrócenia czasu ładowania strony za pomocą kilku kliknięć przycisku.

Istnieje wiele wtyczek, które sprawdzą się dobrze, ale krótko wspomnę o kilku wyróżniających się elementach.

Autooptymalizacja (BEZPŁATNIE)

Autoptimize to prawdopodobnie najpopularniejsza wtyczka minifikacji. Jest popularny, ponieważ jest łatwy w użyciu i pełen potężnych funkcji wydajności. Może agregować (łączyć skrypty), minimalizować i buforować kod. Jako bonus masz dodatkowe opcje optymalizacji czcionek Google, obrazów i nie tylko.

Aby skorzystać z funkcji Autoptimize, możesz pobrać, zainstalować i aktywować wtyczkę z pulpitu nawigacyjnego WordPress w obszarze Wtyczka > Dodaj nowy.

Po aktywacji wtyczki przejdź do Ustawienia> Autooptymalizacja. Następnie w zakładce ustawień głównych zaznacz kod, który chcesz zoptymalizować (HTML, CSS i/lub JavaScript) i kliknij Zapisz zmiany.

Możesz także kliknąć przycisk Pokaż ustawienia zaawansowane u góry strony, aby jeszcze bardziej dostosować sposób optymalizacji kodu.

O to chodzi! Całkiem prosty i potężny.

Szybka Minifikacja Prędkości (ZA DARMO)

Fast Velocity Minify to kolejna popularna, darmowa i potężna wtyczka WordPress, która nie tylko minimalizuje. Minimalizuje i łączy Twój CSS i JavaScript, aby zredukować żądania HTTP do Twojego serwera, dzięki czemu spełnia swoją nazwę, aby zapewnić szybkie ładowanie strony. Dostępne są dodatkowe opcje optymalizacji, ale ustawienia domyślne działają doskonale w większości witryn.

Aby skorzystać z wtyczki, najpierw zainstaluj i aktywuj ją z pulpitu WordPress, przechodząc do Wtyczki> Dodaj nowy. Następnie wyszukaj „szybka minifikacja prędkości”, a gdy pojawi się w wynikach wyszukiwania, kliknij, aby ją zainstalować i aktywować.

Po aktywacji wtyczki Twoje pliki zostaną automatycznie zminimalizowane i zoptymalizowane pod kątem najlepszej wydajności. To było łatwe!

Przejdź do strony ustawień wtyczki (Ustawienia > Szybka minimalizacja prędkości), aby zobaczyć wszystkie dostępne opcje. Na karcie Stan możesz zobaczyć przydatną listę przetworzonych plików JavaScript i CSS.

Na karcie Ustawienia możesz dostosować sposób optymalizacji plików. Ponieważ minifikacja HTML, CSS i JavaScript jest już aktywna, możesz użyć tych ustawień, aby dostosować domyślne opcje lub wyłączyć minifikację dla niektórych typów kodu. Istnieją nawet opcje optymalizacji czcionek Google i Font Awesome.

Otóż ​​to!

Całkowita pamięć podręczna W3 (BEZPŁATNIE)

W3 Total Cache to świetna wtyczka do buforowania, która zawiera opcję minimalizacji kodu HTML, JS i CSS.

Najszybsza pamięć podręczna WP (BEZPŁATNIE)

WP Fastest Cache – ta BEZPŁATNA wtyczka buforująca WordPress jest niezwykle popularna wśród wysokich recenzji. Wtyczka wykonuje różne optymalizacje wydajności, w tym łączenie i minimalizowanie kodu HTML CSS i JavaScript w celu uzyskania lepszej wydajności.

Po zainstalowaniu wtyczki po prostu kliknij kartę WP Fastest Cache na pasku bocznym WordPress Dashboard (ten z niesamowitą ikoną geparda). W zakładce Ustawienia znajdziesz opcje łączenia i minifikacji plików HTML i CSS. Chociaż minimalizacja JavaScript jest dostępna tylko w wersji pro.

Końcowe przemyślenia

Jeśli chcesz szybszy czas ładowania strony i lepsze wyniki wydajności, będziesz chciał zminimalizować pliki HTML, CSS i JavaScript. Dzięki wszystkim dostępnym narzędziom online możesz łatwo zminimalizować swój kod dla dowolnej witryny. A dla was, użytkowników WordPress, dostępnych jest kilka potężnych wtyczek, które automatycznie minimalizują te pliki za pomocą kilku kliknięć. Powyższe wtyczki to tylko kilka świetnych wtyczek, które obsługują minifikację wśród innych optymalizacji wydajności. W rzeczywistości możesz już mieć wtyczkę typu wydajności, która ma już dostępną minifikację. Na przykład wiele wtyczek do buforowania zawiera opcję minifikacji. Mam nadzieję, że ten post pomoże Ci zdecydować, która opcja jest dla Ciebie najlepsza.

Czekam na kontakt z Państwem w komentarzach poniżej.

Pozdrawiam!