Czy chcesz skompresować pliki CSS, HTML i JavaScript na WordPress?

Kompresując pliki CSS, HTML i Javascript swojej witryny, możesz zaoszczędzić cenny czas na szybkości ładowania strony. Teraz nie mówimy o zmniejszeniu szybkości ładowania strony o połowę, ale jeśli chodzi o szybkość witryny, liczy się każdy mały kawałek.

Szybkość ładowania Twojej witryny jest ważna nie tylko dla nowych odwiedzających, ale także dla rankingów wyszukiwarek.

Termin "minifyW języku programowania opisuje proces usuwania zbędnych znaków z kodu źródłowego. Znaki te obejmują spacje, podziały wierszy, komentarze i ograniczniki bloków, które są przydatne dla nas ludzi, ale bezużyteczne dla maszyn.

Minimalizujemy pliki witryn, które zawierają kod CSS, HTML i JavaScript, aby Twoja przeglądarka internetowa mogła je szybciej odczytać.

Przeczytaj także nasz artykuł na temat 10 WordPress wtyczki, aby zwiększyć szybkość swojego bloga

Oto przykład zminimalizowania CSS.

CSS przed zminimalizowaniem

/ * Przykładowy plik CSS ---------------------------------- * / .user-profile-card { margin: 0px; tło: #33E43} .user-profile-description {border: 0; pozycja: absolutna; szerokość: auto; margin-top: 20px; }

CSS po minifikacji

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Oczywiście jest to tylko mały przykład użycia fragmentu kodu CSS, ale możesz sobie wyobrazić, ile miejsca pozwoliłoby to zaoszczędzić, zmniejszając tysiące linii kodu. 

Jak zwiększyć czas spędzany na blogu WordPress? Dowiedz się, sprawdzając ten artykuł.

Więc jeśli chcesz to zrobić ręcznie, technicznie możesz. Ale będziesz narażony na duże ryzyko błędu i niepotrzebnie marnujesz swój cenny czas!

Postępuj zgodnie z tymi wskazówkami i skorzystaj z dostępnych narzędzi.

Niektóre narzędzia do wykonywania kompresji

Na szczęście nie musisz być programistą ani znać jednego z języków programowania, aby zmniejszyć rozmiary plików witryny. Minifikacja stała się powszechną praktyką w świecie projektowania stron internetowych. Nie powinieneś więc być zaskoczony, gdy dowiesz się, że istnieje wiele wspaniałych (i bezpłatnych) narzędzi, które wykonują tę pracę za Ciebie.

Zobacz także nasze 6 wtyczek WordPress, które tchną nowe życie w Twoje artykuły

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

    • cssminifier.com et javascript-minifier.com (CSS i JS) - Te dwa minifier, autorstwa Andrew Chiltona, są łatwe w użyciu. Wystarczy wkleić kod, a następnie kliknąć przycisk Minify aby wyświetlić skompresowany kod. Możesz nawet pobrać kod wyjścia jako plik dla wygody.
    • htmlcompressor.com (HTML, CSS i JS) - to narzędzie do kompresji / minifikacji online 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.
    • csscompressor.net (Tylko CSS) - Ten internetowy kompresor CSS jest szybki, łatwy i darmowy.
    • jscompress.com (Tylko JS) - To narzędzie do kompresji JavaScript umożliwia kompresję kodu JavaScript przez kopiowanie i wklejanie, ale można też pobierać wiele plików JavaScript jednocześnie. Jest to idealne rozwiązanie do łączenia plików JavaScript w jeden plik w celu zwiększenia szybkości ładowania strony.
    • Narzędzia Dana - Narzędzia Dana proponuję un zminimalizuj CSS i zminimalizuj JavaScript . Oba narzędzia mają naprawdę przejrzysty, łatwy w użyciu interfejs użytkownika. Nie oferują żadnych zaawansowanych opcji, ale świetnie nadają się do typowych celów minifikacji.
    • refresh-sf.com (HTML, CSS i JS) - ten kompresor ograniczy typy kodu JavaScript, CSS i HTML. Zawiera również wszystkie opcje kompresji dla każdego typu kodu, jeśli ich potrzebujesz.
    • Kompilator zamykania (Tylko JS) - Closure Compiler jest częścią zamknięcie narzędzia , pakiet narzędzi od Google Developers. Pozwala na zminimalizowanie kodu JavaScript wraz z innymi przydatnymi optymalizacjami. Możesz użyć kodu JavaScript, wprowadzając adres URL lokalizacji pliku js, a następnie wybierz sposób optymalizacji i formatowania kodu. 

Na przykład możesz zoptymalizować kod, aby usunąć tylko puste miejsca, jeśli chcesz. Po kliknięciu przycisku kompilacji zmniejszy on kod (lub skompiluje go).

    • minifycode.com (HTML, CSS i JS) - ta witryna oferuje minifier dla JAVASCRIPT , CSS et HTML z prostym i przejrzystym interfejsem użytkownika, który kompresuje kod za pomocą jednego kliknięcia. Oferuje także narzędzie „upiększające” do dekompresji zminimalizowanego kodu, aby uczynić go bardziej czytelnym (w przeciwieństwie do minimalizacji).

Jeśli szukasz narzędzi offline, aby zminimalizować lokalnie kod CSS lub JavaScript HTML, oto kilka opcji:

Jak zmniejszyć rozmiar kodu HTML, CSS i JavaScript za pomocą narzędzia online

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

  • Wklej kod źródłowy lub pobierz plik kodu źródłowego. 
  • Zoptymalizuj ustawienia dla konkretnego wyjścia (jeśli opcje są dostępne)
  • Kliknij przycisk, aby skompresować kod.
  • Skopiuj wynik zminimalizowanego kodu lub pobierz plik zminimalizowanego kodu.

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

Zobacz także: Jak dodać kod CSS bezpiecznie na WordPress sprawdzając ten link.

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

kompresuj pliki CSS, HTML i JavaScript na WordPress

przejdź do minifycode.com i kliknij kartę minifier CSS. Następnie wklej kod CSS w polu wprowadzania i kliknij przycisk Zminimalizuj CSS.

minification css.jpg

Po wygenerowaniu nowego zminimalizowanego kodu skopiuj go.

skopiuj skompresowany kod.jpg

Następnie wróć do pliku CSS swojej witryny i zamień kod na nową wersję uproszczoną.

To wszystko!

Powtórz ten sam proces, aby również zmniejszyć pliki JavaScript i HTML w Twojej witrynie.

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

Najłatwiejszym sposobem na ograniczenie HTML, CSS i JavaScript w WordPress jest użycie wtyczki. Pozwala to na automatyczną optymalizację plików witryny WordPress w celu skrócenia czasu ładowania strony za pomocą zaledwie kilku kliknięć przycisku.

Istnieje wiele wtyczek, które wykonają zadanie, ale pokrótce wspomnę o kilku przykładach.

Automatyczne optymalizowanie (BEZPŁATNE)

autooptimize wp.png
Autooptymalizacja to prawdopodobnie WordPress Plugin z najpopularniejszych minifików. Jest popularny, ponieważ jest łatwy w użyciu i wyposażony w zaawansowane funkcje. Może łączyć (łączyć skrypty), minimalizować i buforować kod. Jako bonus masz dodatkowe opcje optymalizacji czcionek Google, obrazów itp.

Aby skorzystać z funkcji automatycznej optymalizacji, możesz pobrać, zainstalować i aktywować wtyczkę z pulpitu nawigacyjnego WordPress pod Wtyczka> Dodaj nowy.

Aby uzyskać więcej informacji, zobacz nasz przewodnik na temat:  Jak zainstalować wtyczkę w WordPress

autoptimize.jpg

Po aktywacji wtyczki przejdź do Ustawienia> Automatyczna optymalizacja. Następnie w zakładce Główne parametry zaznacz kod, który chcesz zoptymalizować (HTML, CSS i / lub JavaScript) i kliknij Ezapisz zmiany.

optymalizacja css.jpg

Możesz także kliknąć przycisk Pokaż ustawienia zaawansowane u góry strony, aby dodatkowo dostosować optymalizację kodu.

opcje css Advanced.jpg

Mniej więcej tak! Całkiem proste i potężne.

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

v3 total cache.png
W3 Razem Cache to doskonała wtyczka buforująca, która oferuje możliwość zminimalizowania plików HTML, JS i CSS.

kompresować pliki CSS, HTML i javascript

Najszybsza pamięć podręczna WP (ZA DARMO)

wp fastest cache.png
WP Fastest Cache - Ta wtyczka WordPress buforowanie jest niezwykle popularne wśród wysokich recenzji. Wykonuje różne optymalizacje wydajności, w tym łącząc i redukując HTML CSS i JavaScript w celu uzyskania lepszej wydajności.

Przeczytaj także nasz artykuł na temat WordPress wtyczki 8 dodać czat na swoim blogu

Po zainstalowaniu wtyczki kliknij kartę WP Fastest Cache na pasku bocznym panelu WordPress. Pod zakładką Ustawienia, znajdziesz opcje łączenia i zmniejszania plików HTML i CSS. Chociaż minimalizacja JavaScript jest dostępna tylko w wersji pro.

kompresować pliki CSS, HTML i javascript

Podsumowując

Jeśli chcesz, aby Twój blog był szybszy i miał lepszą wydajność, musisz zmniejszyć rozmiar plików HTML, CSS i JavaScript. Dzięki wszystkim dostępnym narzędziom online możesz łatwo zredukować kod dowolnej witryny. 

Wtyczki 9 WordPress, aby ukryć zawartość swojego bloga odkryć absolutnie

Dla tych, którzy korzystają z WordPress, masz do dyspozycji potężne wtyczki, aby automatycznie zminimalizować te pliki za pomocą kilku kliknięć.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Strona błędu 404 Przekieruj na stronę główną lub niestandardową

Oto jeden z najlepszych sposobów łatwego dodania strony błędu 404, która przekieruje użytkownika na stronę główną lub stronę spersonalizowaną po aktywacji tej wtyczki. Premium WordPress.

Strona błędu 404 przekierowuje na stronę główną lub stronę niestandardową. wtyczka wordpress

Wszystkie strony błędów 404 zostaną przekierowane na stronę główną lub do niestandardowy adres URL. Używając tego WordPress Plugin, pozwolisz Google obniżyć PageRank Twojej witryny, jeśli zawiera ona wiele stron z błędami 404.

Odkryj też Jak naprawić błąd 413 na WordPress

Ce WordPress Plugin nie tylko przekierowuje, ale może być również odpowiednim rozwiązaniem poprawiającym ranking Twojej witryny w wynikach wyszukiwania.

Pobierz | Demo | hosting

2. Pamięć podręczna Borlabs

WordPress to platforma oparta na bazie danych, która generuje treści dynamicznie. Im więcej treści i wtyczek masz, tym więcej zapytań do bazy danych jest wykonywanych. Może to spowolnić działanie witryny, szczególnie gdy baza danych znajduje się na innym serwerze.

Wtyczka buforująca WordPress do buforowania pamięci podręcznej Borlabs

Wtyczka WordPress Borlabs Cache zapisuje dynamicznie generowaną zawartość jako plik statyczny w pamięci serwera. Gdy strona jest żądana, ten plik statyczny jest ładowany i wysyłany do użytkownika, co jest znacznie szybsze niż zwykłe zapytania do bazy danych. Ale to nie wszystko.

Zobacz także nasze 5 WordPress wtyczki wyczyścić bazę danych swojej witryny

Twoje strony zawierają dużo niepotrzebnych białych znaków lub komentarzy HTML, co zwiększa ogólny rozmiar strony. Borlabs Cache usuwa je wszystkie i używa GZIP do kompresji stron.

Odkrywaj Jak wyświetlić wszystkie posty WordPress na jednej stronie

Wiele wtyczek ma własne pliki JavaScript i CSS, co powoduje więcej żądań na serwerze. Borlabs Cache łączy wszystkie pliki JavaScript i CSS, dzięki czemu w najlepszym przypadku użytkownik musi załadować tylko jeden plik JavaScript i jeden plik CSS.

Pobierz Demo | hosting

3. Wielojęzyczna prasa

Multilingual Press współpracuje z wielostanowiskową instalacją WordPressa i umożliwia łączenie tłumaczeń. Wtyczka zawiera 174 języki wbudowane w menedżera języków i obsługuje nieograniczoną liczbę stron internetowych, dzięki czemu możesz tworzyć i łączyć dowolną liczbę tłumaczeń.

Wielojęzyczna wtyczka do tłumaczenia prasy Wtyczka wordpress

To jest dobre dla SEO ponieważ pozwoli Ci to zachować swoje języki na oddzielnych postach i stronach, a jeśli kiedykolwiek zdecydujesz się na użycie innego tłumaczenia wtyczki, Twoja treść pozostanie nienaruszona (nawet po wyłączeniu lub usunięciu wtyczki Multilingual Press). Dodatkowo można dodać widget do tłumaczeń, aby łatwo przełączyć się między tłumaczeniami.

Odkrywaj Jak dodać fragment kodu za pomocą Gutenberga na WordPress

Prasa wielojęzyczna to świetna bezpłatna opcja dodawania tłumaczeń do witryny WordPress za pośrednictwem wielostanowiskowa, Ponadto, jeśli kiedykolwiek okaże się, że potrzebujesz więcej opcji, możesz wybrać wersję pro, która kosztuje 75 USD.

Pobierz Demo hosting

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

Wnioski