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 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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 , zestaw narzędzi od Google Developers. Pozwala zminimalizować JavaScript za pomocą innych przydatnych optymalizacji. Możesz użyć kodu javascript, wprowadzając adres URL lokalizacji pliku js, a następnie wybierając 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.

css style divi.jpg

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.

Ł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 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
Autoptimize to prawdopodobnie najpopularniejsza wtyczka Minify do WordPressa. Jest popularny, ponieważ jest łatwy w użyciu i jest 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.

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.

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.

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]

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 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 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 wielostanowiskową instalacją WordPressa i umożliwia łączenie tłumaczeń. Wtyczka jest dostarczana z 174 językami wbudowanymi w menadżera języków i obsługuje nieograniczoną liczbę stron internetowych, dzięki czemu możesz tworzyć i łączyć dowolną liczbę tłumaczeń.

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

Twoj adres e-mail nie bedzie 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