Przejdź do głównej treści

Jak skompresować pliki CSS, HTML i JavaScript

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Gdy kompresujesz pliki CSS, HTML i JavaScript swojej witryny, możesz zaoszczędzić cenny czas na szybkości ładowania stron Twojej witryny. Teraz nie mówimy o zmniejszeniu szybkości ładowania strony o połowę lub czymkolwiek, ale jeśli chodzi o szybkość witryny, liczy się trochę.

Szybkość ładowania witryny jest ważna nie tylko dla nowych użytkowników, ale także dla rankingu wyszukiwarek.

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

Minimalizujemy pliki na stronie internetowej, które zawierają kod CSS, HTML i JavaScript, aby Twoja przeglądarka 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 niewielki przykład z użyciem fragmentu kodu CSS, ale można sobie wyobrazić, ile miejsca zaoszczędziłoby, redukując tysiące wierszy 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 ryzykujesz błędem i niepotrzebnie marnujesz 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 niekoniecznie musisz być programistą lub znać jeden z języków programowania, aby zmniejszyć rozmiar pliku swojej witryny. Minifikacja stała się powszechną praktyką w świecie projektowania stron internetowych. Dlatego nie powinieneś być zaskoczony, gdy dowiesz się, że istnieje wiele wspaniałych (i bezpłatnych) narzędzi do wykonania pracy za Ciebie.

Zobacz także nasze Wtyczki 6 WordPress, aby tchnąć nowe życie w swoje artykuły

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

    • cssminifier.com et javascript-minifier.com (CSS i JS) - Te dwa minizatory od Andrew Chilton są proste w użyciu. Po prostu wklej swój kod, a następnie kliknij 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 / minimalizacji online obsługuje typy 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 kompresowanie kodu JavaScript typu „kopiuj i wklej”, ale można również pobrać wiele plików JavaScript jednocześnie. Świetnie nadaje się do łączenia plików JavaScript w jeden plik w celu szybszego ładowania strony.
    • Narzędzia Dana - Narzędzia Dana proponuję un zminimalizuj CSS i zminimalizuj JavaScript , Oba narzędzia mają naprawdę czysty, łatwy w użyciu interfejs użytkownika. Nie oferują żadnych zaawansowanych opcji, ale świetnie nadają się do wspólnych celów minimalizacji.
    • refresh-sf.com (HTML, CSS i JS) - Ten kompresor zmniejszy typy kodów JavaScript, CSS i HTML. Zawiera także wszystkie opcje kompresji dla każdego rodzaju kodu, jeśli jest to potrzebne.
    • Kompilator zamykania (Tylko JS) - Kompilator zamknięcia jest częścią zamknięcie narzędzia , pakiet narzędzi od Google Developers. Pozwala zminimalizować JavaScript przy pomocy innych przydatnych optymalizacji. 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 strona oferuje minizery 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.

css style divi.jpg

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

minification css.jpg

Po wygenerowaniu nowego zminimalizowanego kodu skopiuj go.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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 przy użyciu wtyczek

Najprostszym sposobem na zminimalizowanie kodu HTML, CSS i JavaScript w WordPress jest użycie wtyczki. Umożliwia to 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ą to zadanie, ale krótko wspomnę o kilku przykładach.

Automatyczne optymalizowanie (BEZPŁATNE)

autooptimize wp.png
Autoptimize to prawdopodobnie najpopularniejsza wtyczka WordPress minify. Jest popularny, ponieważ jest łatwy w użyciu i zawiera wiele zaawansowanych funkcji. Może grupować (łą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 sprawdź 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

To tyle! Całkiem proste i wydajne.

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.

ogólne parametry w3 total cache.jpg

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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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 WordPress pulpitu nawigacyjnego. Pod zakładką Ustawienia, znajdziesz opcje łączenia i zmniejszania plików HTML i CSS. Chociaż minimalizacja JavaScript jest dostępna tylko w wersji pro.

wp szybciej ustawienia pamięci podręcznej.png

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 zmniejszyć 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 wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego 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.

Wszystkie strony błędów 404 zostaną przekierowane na stronę główną lub do niestandardowy adres URL, Za pomocą tej wtyczki WordPress umożliwisz Google zmniejszenie PageRank twojej witryny, jeśli zawiera wiele stron błędów 404.

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

Ta wtyczka WordPress nie tylko przekierowuje, ale może być również odpowiednim rozwiązaniem, aby poprawić ranking witryny w wynikach wyszukiwarek.

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 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 Wtyczki 5 WordPress do czyszczenia bazy danych Twojej 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 instalacją WordPress na wielu stronach i pozwala łączyć tłumaczenia. Wtyczka zawiera języki 174 osadzone w menedżerze języków, obsługuje i nieograniczoną liczbę stron internetowych, dzięki czemu możesz tworzyć i łączyć tyle tłumaczeń, ile chcesz.

Jest to dobre dla SEO, ponieważ pozwoli ci zachować swoje języki na osobnych postach i stronach, a jeśli kiedykolwiek zdecydujesz się użyć tłumaczenia innego niż wtyczka, Twoje treści pozostaną nienaruszone (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.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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

Multilingual Press 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

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
2 akcji
udział2
ćwierkanie
Enregistrer