Jak zminimalizować HTML, CSS i JavaScript za pomocą wtyczki Autoptimize

Google i inne wyszukiwarki zwiększają wartość witryny, jeśli ładuje się tak szybko. Ponieważ żaden z widzów nie ma wielu pacjentów, którzy długo czekają na obejrzenie Twoich treści, a Ty masz tylko 1,5 sekundy na zwrócenie ich uwagi. Jeśli otwarcie witryny trwa długo, zwykle tracisz widzów. Jest to niezbędne do przyspieszenia Twojej witryny. Istnieje kilka sposobów optymalizacji witryny. Ale jedną z najważniejszych części jest Zminimalizuj HTML, CSS i JavaScript.


Jeśli kiedykolwiek zrobiłeś test prędkości na Google PageSpeed lub GTmetrix, prawdopodobnie widzisz tę opcję.

Każda strona ładuje się z dużą ilością plików zawierających HTML, CSS i JavaScript. Większość plików zawiera dużo miejsca, komentarze, ograniczniki bloków itp. Dlatego prawidłowe ładowanie zajmuje więcej czasu.

Zależy to również od jakości motywu. Na przykład jakość motywu premium zawsze lepsza niż motyw darmowy. Motywy premium są dobrze kodowane i tworzone przez wysoko wykwalifikowanych programistów. Ale wszystkie motywy nie są takie same i mają różne funkcje. Tak więc Minifikacja tych plików HTML, CSS i JavaScript, możesz strategicznie zwiększyć szybkość witryny i sprawić, że odwiedzający będą zadowoleni.

Co to jest Minify i dlaczego jest korzystne?

Minifikacja to język programowania, który usuwa wszystkie niepotrzebne znaki z kodu źródłowego bez zmiany jego funkcjonalności. Te niepotrzebne znaki zwykle zawierają „białe znaki, nowe znaki linii, komentarze, i blokuj separatory ”. 

Przed i po minimalizacji

Służą do zwiększenia czytelności kodu, ale nie są wymagane do jego wykonania. W ten sposób zmniejsza ilość kodu, który musi być przesłany przez Internet i oszczędza przepustowość. Tak więc minimalizowanie HTML, CSS i JavaScript, możesz łatwo usunąć te niepotrzebne znaki ze swojej witryny i znacznie zwiększać prędkość witryny. 

Jak zminimalizować HTML, CSS i JavaScript

Istnieją dwa sposoby zminimalizowania HTML, CSS & JavaScript. Możesz to zrobić, edytując kod motywu lub użyć wtyczki WordPress o nazwie Automatyczna optymalizacja. W tym artykule pokażemy oba procesy Jak zminimalizować HTML, CSS i JavaScript.

Aby poznać dokładny plik HTML, CSS lub JavaScript, który powoduje problem, musisz go sprawdzić w dowolnym narzędziu do testowania szybkości witryny, takim jak Narzędzie Google PageSpeed lub GTmetrix. Ponieważ nie wszystkie twoje pliki zawierają tego rodzaju niepotrzebne znaki.

Po sprawdzeniu wyniku witryny otrzymasz go. Oto zdjęcie mojej witryny, które dotyczy naprawianie CSS i JavaScript.

Minishing Css, JavaScript

Odnosi się do jakości motywu. Więc nie martw się, jeśli zobaczysz, że oba są powiedziane do Minify i lepiej jest uzyskać motyw Premium.

Istnieje kilka narzędzi online, za pomocą których można zmniejszyć kod HTML, CSS i JavaScript. 

Przed wprowadzeniem jakichkolwiek zmian wykonaj kopię zapasową tego pliku.

# 1 Minify Code:

Narzędzie Minify Code

Minify Code to narzędzie minimalizujące wszystko w jednym. Może zminimalizować twoje kody JavaScript, CSS i HTML. Wystarczy skopiować kod HTML, CSS lub JavaScript i wkleić go tutaj. Następnie kliknij Minify Opcja. To narzędzie automatycznie zminimalizuje kod. Następnie skopiuj kod Minified do tego pliku.

Za pomocą tego narzędzia możesz również zminimalizować swój kod CSS i JavaScript, taki jak kod HTML.

# 2 Willpeavy:

Willpeavy

Willpeavy to kolejne świetne narzędzie do Zmniejsz HTML kody To narzędzie działa tak samo jak kod Minify. Minimalizuje HTML i wszelkie CSS lub JS zawarte w twoim znaczniku. Aby skorzystać z tego narzędzia, wystarczy skopiować tutaj kod i kliknąć Minify.

Minify using Autoptimize Plugin

Automatyczna optymalizacja

Jeśli nie znasz takiego kodowania, lepiej skorzystać z wtyczki i zalecanej dla początkujących. Więc nadchodzi Automatyczna optymalizacja wtyczki dla WordPress użytkownicy.

Automatyczna optymalizacja łączy wszystkie skrypty i kody stylów i zmniejsza je tak szybko, że się ładuje. Minimalizuje cały HTML, CSS & Kod JavaScript sam w sobie, dzięki czemu strona jest naprawdę lekka. Dzięki Minification ta wtyczka dodaje wygasające nagłówki i przenosi style do nagłówka strony i może przenosić skrypty do stopki.

Automatyczna optymalizacja Polecaj ustawienia

Możesz łatwo robić wszystkie rzeczy z ustawień wtyczek. Po aktywacji tej wtyczki przejdź do Ustawienia> Automatyczna optymalizacja.  Kliknij przycisk „Pokaż ustawienia zaawansowane”.

w HTML w sekcji „Optymalizuj kod HTML” i „Zachowaj komentarze HTML”, aby zwiększyć wydajność.

Automatycznie optymalizuj opcje HTML

w JavaScript w sekcji „Optymalizuj kod JavaScript”. Możesz także włączyć opcję „Wymuś JavaScript w”, aby szybko załadować JS i zmniejszyć ryzyko błędów JS. Jeśli Twój JS łamie skrypty, możesz włączyć opcję „Dodaj zawijanie próbne”.
Automatycznie optymalizuj opcje JavaScript

W CSS w sekcji „Optymalizuj kod CSS”, „Również agreguj wbudowany CSS”. Możesz także włączyć „Inline and Defer CSS”, jeśli zminimalizowałeś CSS. Wypróbuj to narzędzie, aby zminimalizować swój CSS i wklej go w polu.

Automatycznie optymalizuj opcje CSS

Wprowadź swój CDN Adres URL w polu „Podstawowy adres URL CDN”. Na przykład „//cdn.example.com/”.

Na koniec włącz „Zapisz zagregowany skrypt / css jako plik statyczny”. Ale upewnij się, że twój serwer może poprawnie obsługiwać kompresję i wygaśnięcie.

Automatycznie optymalizuj opcje CDN

Po zminimalizowaniu kodu nie zapomnij ponownie sprawdzić szybkości witryny. Następnie porównaj to z poprzednimi wynikami. Jeśli Twoja witryna ma problem lub nie wyświetla się poprawnie, możesz spróbować usunąć błąd Pamięć podręczna

Wniosek

Minimalizowanie HTML, CSS i JS jest korzystnie dla Twojej witryny. Usuwa niepotrzebne znaki w kodzie i zmniejsza je, aby były przyjazne dla przeglądarki. W ten sposób możesz poprawić szybkość ładowania witryny.

Jeśli ten samouczek pomaga zminimalizować HTML, CSS i JavaScript, udostępnij ten artykuł Facebook, Świergot, Google+.

Powiązane artykuły,

  • Jak wykorzystać buforowanie przeglądarki w WordPress
  • Jak zoptymalizować bazę danych WordPress za pomocą WP-Sweep
  • 7 Najlepszy optymalizator obrazu dla WordPress 2017
  • Jak w prosty sposób włączyć kompresję Gzip w WordPress w celu szybszego ładowania
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map