Redukcja HTML, CSS i JavaScript: To działa tak prosto jak to w WordPress

9 Min.
minimalizacja css
Ostatnia aktualizacja w dniu 02/09/2020 r.

Miniaturyzacja plików HTML, CSS i JavaScript jest jedną z wielu małych modyfikacji mających na celu optymalizację szybkości ładowania Twojej strony internetowej. W tym artykule wyjaśnimy na Sven Scheuerleczym polega miniaturyzacja CSS, HTML i Co, ile czasu na załadunek oszczędzasz stosując szczupły kod i które z nich WordPress -Plugins pomogą Ci w implementacji.

Jeśli spojrzysz na strony internetowe w sieci World Wide Web dzisiaj, szybko zdasz sobie sprawę, że nie są one w żaden sposób porównywalne do stron sprzed 10 lat. Na początku wystarczył prosty kod HTML i trochę tekstu. Obecnie jednak strony internetowe składają się z obszernego kodu, często składającego się z HTML, CSS i JavaScript. Wynika to częściowo z zakresu funkcji, które są obecnie dostępne dla stron internetowych, ale także z coraz bardziej rozbudowanych projektów i szablonów, które są wykorzystywane w projektowaniu stron internetowych. 

Nierzadko zdarza się więc, że pliki HTML, CSS czy JavaScript szybko rosną do setek kilobajtów. W celu przetworzenia wszystkich tych kodów w plikach i wyświetlenia strony internetowej, przeglądarka internetowa wysyła liczne żądania (tzw. żądania HTTP) do serwera. 

Im więcej "żądań" jest wysyłanych, tym dłuższy jest czas załadunku. Aby liczba zgłoszeń była jak najmniejsza, a tym samym czas ładowania strony, należy łączyć i kompresować pliki.  

Co oznacza miniaturyzacja HTML, CSS i JavaScript?

Minifikacja - czyli jak największe zmniejszenie rozmiaru plików HTML, CSS itp. - jest częścią każdej dobrej optymalizacji OnPage. Mimo, że odpowiada on tylko za niewielką część czasu ładowania, może być również decydujący dla Twoich rankingów w wyszukiwarkach. 

Prosto WordPress nie jest znane, że posiada nieodłączne narzędzia do optymalizacji czasu obciążenia. Dlatego powinieneś sprawdzić wydajność swojego WordPress -Sprawdzaj stronę regularnie.

RB Performance E Book Newsletter 02

Skrócenie czasu załadunku

Każdy operator strony internetowej, który korzystał już z takiego narzędzia jak Strona Wgląd w historię Google, zna na pewno tę sugestię optymalizacyjną: "Ograniczyć CSS

Środek ten jest zalecany w przypadku, PageSpeed Insightsgdy prośby o pobranie plików CSS mają silny wpływ na czas ładowania strony. Szczegółowe wyjaśnienie i objaśnienie dalszych komunikatów w narzędziu znajduje się w artykule "Google Pagespeed - Najważniejsze komunikaty o błędach”. 

Jak redukcja CSS może wpłynąć na czas ładowania waszej strony, chciałbym pokazać wam diagram wodospadu z mojego bloga. bloggiraffe.com Przedstawienie. Przykłady to tylko małe odcinki, ale wyraźnie pokazują, jak można skrócić czas załadunku.

Przykład 1 - Nieskompresowany (nie zmniejszony):

css zrekompresowany
Schemat wodospadu - bez kompresji plików HTML, CSS i JavaScript

Przykład 2 - Sprężony (zredukowany):

css ściśnięty
Schemat wodospadu - z kompresją plików HTML, CSS i JavaScript

Już przy pobieraniu głównej domeny widać, że mogłem skrócić czas ładowania z 1233 milisekund do 860 milisekund. Również czas ładowania poszczególnych plików może być w niektórych przypadkach zredukowany minimalnie.

Co się dzieje podczas kompresji plików HTML, CSS i JavaScript? 

Jak krótko wspomniano w artykule, kiedy pliki takie jak HTML, CSS i JavaScript są kompresowane, pojedyncze pliki są łączone w jeden plik. 

W rezultacie, przeglądarka, z której korzystasz, aby uzyskać dostęp do konkretnej strony internetowej, musi wysyłać mniej żądań do serwera, aby wyświetlić stronę internetową i wczytać niezbędne skrypty.

Codzienny przykład do zrozumienia

Wyobraź sobie, że idziesz do supermarketu i masz 10 produktów na swojej liście zakupów. Ale są w różnych korytarzach i na różnych półkach. 

Konsekwencja: Znalezienie każdego pojedynczego produktu i włożenie go do koszyka zajmuje dużo czasu. 

Rozwiązanie: Powiedz z wyprzedzeniem supermarketowi, jakich produktów potrzebujesz. Supermarket dostarczy Ci swoje produkty na półkę, więc wystarczy, że włożysz je do koszyka i zapłacisz przy kasie. 

Rezultat: Składając wszystkie produkty na jednej półce, musisz przejść tylko jedną drogę przez supermarket i zaoszczędzić niesamowitą ilość czasu. Jest to podobne do miniaturyzacji indywidualnych kodów i skryptów na Twojej stronie internetowej. Abyście mogli zobaczyć, jak to wszystko działa w praktyce, chciałbym wam to pokazać na małych przykładach. 

Oszczędność danych nie tylko pomaga zoptymalizować wydajność.
Ponieważ świadome korzystanie z zasobów przyczynia się również do uczynienia Twojej strony bardziej zrównoważoną. Prosimy o zapoznanie się z uwagami do tematów Jak bardzo jest zielonyWordPress ? lub Ekologiczny hosting Na wylot.

HTML

HTML (Hypertext Markup Language) jest niezbędny dla podstawowej struktury strony internetowej. W ten sposób wyświetlane są teksty, linki, a nawet obrazy. 

Na przykład, standardowy kod HTML wygląda tak:

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Skompresowany:

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

CSS (Cascading Style Sheets) nie jest prawdziwym językiem programowania. Jednak do zmiany wyglądu poszczególnych elementów strony stosowany jest tzw. język arkusza stylów. 

Na przykład, standardowy kod CSS wygląda tak:

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Skompresowany:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

JavaScript

JavaScript to czysty język skryptowy, który pierwotnie został opracowany dla wyjścia dynamicznego HTML w przeglądarkach internetowych (wikipedia.org). Dzięki temu operatorzy stron internetowych mają dziś możliwość korzystania z rozszerzonego HTML i CSS. 

Standardowy kod JavaScript (wiki.selfhtml.org) wygląda na to:

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Skompresowany:

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

Z pomocą powyższych przykładów można bardzo ładnie zobaczyć jak działa miniaturyzacja kodu HTML, CSS i JavaScript. Jeśli jesteś zaawansowanym i profesjonalnym użytkownikiem, możesz również wykonać tę kompresję ręcznie, używając takich narzędzi jak link-generator.com użycie. Jako WordPress użytkownik, specjalny "MinifyPlugins" może wykonać tę pracę za Ciebie. To nie tylko oszczędza czas, ale także działa w pełni automatycznie.

5 Minify Pluginsdla WordPress

Na poniższej liście wymieniłem pięć popularnych miniaturyzacjiPlugins, które wykonują pracę polegającą na kompresji HTML, CSS i JavaScript dla Ciebie. 

#1 Merge + Minify + Refresh

łączyć się w pary

Jak nazwa Plugins Łączenie + Minifikacja + Odświeżanie (Merge + Minimize + Refresh) mówi już, że narzędzie to skupia się całkowicie na kompresji kodu CSS i JavaScript. 

Łączy on Pluginkaskadowe arkusze stylów (CSS) i pliki Javascript w poszczególne grupy. Te z kolei są minimalizowane dzięki funkcji Minify for CSS i Google Closure for JavaScript. 

Po zainstalowaniuWordPress , PluginMerge + Minify + Refresh oferuje szereg ustawień optymalizujących czas ładowania Twojej strony.

łączyć odświeżanie słów

Można tu między innymi wybrać, czy pliki CSS i JS powinny być połączone, czy też nie. Co więcej, możesz wybrać czy kompresja powinna być wykonana przez WP-Cron i czy dane powinny być buforowane na zewnątrz czy skompresowane wewnątrz pliku gzip. 

Bardzo przydatną funkcją jest tzw. "HTTP2 Server Push". Tutaj serwer wysyła kilka odpowiedzi na jedno zapytanie do odpowiedniej przeglądarki. 

3 najważniejsze funkcje Merge + Minify + RefreshPlugins : 

  • Łączenie / kompresja CSS i JavaScript
  • Serwer HTTP2 Push
  • Multisite zdolny

#2 WP Super Minify

wp super minify

Z Plugin WP Super Minify Pliki CSS i JavaScript mogą być zmieniane i buforowane. Przyspieszone ładowanie tych plików jest następnie włączane poprzez Minify PHP Framework. 

Cechą szczególną tego Pluginoprogramowania jest to, że jest ono oprogramowaniem open source. Kod źródłowy narzędzia jest zatem otwarty i może być dalej rozwijany przez każdego użytkownika.

W ustawieniach WP Super Minify nie ma dużego wyboru dla użytkowników. Tutaj można zobaczyć tylko ustawienia kompresji JavaScript i CSS.

wp super minif WordPress

Najważniejsze funkcje programu WP Super MinifyPlugins : 

  • Kompresja / redukcja plików CSS i Javascript
  • Minifikacja ram PHP

#3 Fast Velocity Minify

szybka prędkość minifikacji

Plugin Fast Velocity Minify umożliwia optymalizację czasu ładowania dla programistów i zaawansowanych użytkowników. Z jednej strony redukuje on żądania HTTP poprzez połączenie plików CSS i Javascript, a z drugiej strony minimalizuje pliki za pomocą PHP Minify. 

W WordPress backendzie znajdziesz po instalacji Minify Pluginswiele opcji ustawień, które mogą być nieco przytłaczające dla niektórych użytkowników. Dobrą rzeczą jest to, że wiele domyślnych ustawień jest już wstępnie zdefiniowanych, więc wystarczy, że Pluginaktywują je laicy. 

Dla zaawansowanych użytkowników i programistów, PluginFast Velocity Minify oferuje wiele gadżetów i możliwości optymalizacji.

szybka prędkość minifikacji WordPress

Ponadto, oferuje on Pluginrównież wersję Pro. W tej wersji posiadasz funkcje pozwalające na wykluczenie różnych plików CSS i JavaScript. 

Najważniejsze funkcje Fast Velocity Minify

  • Kompresja / redukcja plików HTML, CSS i JavaScript
  • PHP Minify
  • Z wyłączeniem plików i skryptów
  • statyczne pliki w pamięci podręcznej
  • Obsługa WP CLI
  • Kompatybilny z różnymi rodzajami buforowaniaPlugins

#4 Autoptimize

Autoptimize

The- WordPress Plugin Autoptimizacja oferuje łatwą optymalizację Twojej strony internetowej. W zaledwie kilku krokach możesz skompresować pliki HTML, CSS i JavaScript, a tym samym przyspieszyć czas ładowania strony. 

Na przykład skrypt auto-optymalizacyjnyPlugin przenosi się do stopki i opóźnia ładowanie plików, takich jak HTML, CSS i JavaScript, lub wielu innych plików, takich jak Google Fonts.

Ważne dla RAIDBOXES klientów

Autoptimize nie jest kompatybilny z innymi cache'ami, na przykład cache'm serweraRAIDBOXES . Dlatego stanowczo odradzamy stosowanie Autoptimize w naszym systemie!

Po WordPress instalowaniu Plugin in, znajdziesz kilka zakładek w ustawieniach takich jak "JS, CSS, HTML", "Obrazy" i "Narzędzia". Poszczególne możliwości i opcje są tutaj opisane bardzo dobrze i są również bardzo łatwe do zrozumienia dla laików.

Autoptimize WordPress

W zakładce "JS, CSS i HTML" możesz wybrać pomiędzy różnymi opcjami optymalizacji dla plików JavaScript, CSS i HTML. Zakładka "Obrazy" pozwala na automatyczną optymalizację obrazów i opóźnienie ładowania plików graficznych. 

W punkcie menu "Dodatki" można wykonać dalsze automatyczne optymalizacje, np. dla Google Fonts, Emojis, jak również do ładowania plików przez domeny innych firm. 

Najważniejsze funkcje Autoptimize

  • Minimalizacja / buforowanie plików HTML, CSS i JavaScript
  • Optymalizacja obrazów
  • Usuń czcionki Google Fonts
  • Usuń Emojisa
  • Synchronizacja JavaScript
  • Kompatybilny z różnymi rodzajami buforowaniaPlugins

#5 WP Prędkość światła

prędkość światła wp

Na Plugin WP Prędkość światła to również jest.WordPress ..Pluginktóry łączy w sobie pliki HTML, CSS i JavaScript. Potężny Plugin posiada również pamięć podręczną i kompresję gzip, system czyszczenia baz danych, a także optymalizację htacces. 

W bezpłatnej wersji WP Speed of Light -Plugins dostępne są wszystkie standardowe funkcje do optymalizacji strony internetowej. W Pluginustawieniach możesz wybrać poszczególne grupy (HTML, CSS, JavaScript), które chcesz zminimalizować i połączyć.

prędkość światła wp WordPress

Ponadto, wersja Pro Pluginsposiada jeszcze kilka innych funkcji, takich jak wykluczanie lub przenoszenie skryptów. 

WP Speed of Light oferuje znacznie więcej funkcji poza czystą kompresją plików, z których można łatwo korzystać za pomocą przejrzyście ułożonego backendu. 

Najważniejsze funkcje Plugins: 

  • Kompresja plików HTML, CSS i JavaScript
  • Cache i kompresja Gzip
  • Narzędzia grupowe
  • Czyszczenie baz danych
  • Optymalizacja obrazu

PluginsW bezpośrednim porównaniu

 Merge + Minify
+ Odświeżenie
WP Super
Minify
szybka prędkość
Minify
AutoptimizacjaPrędkość WP
z małym bagażem
Bezpłatnietaktaktaktaktak
Nadaje się doPoczątkującyPoczątkującyzaawansowani + profesjonaliściPoczątkujący + zaawansowaniPoczątkujący + zaawansowani
Kompresja HTMLnienietaktaktak
CSS Kompresjataktaktaktaktak
Kompresja JavaScripttaktaktaktaktak
Ocena4/53/54/55/54/5

Wniosek

Zmniejszenie rozmiaru plików HTML, CSS lub JavaScript może zwiększyć czas ładowania Twojej strony o kilka milisekund. Możesz wybierać spośród wielu WordPress bardzo użytecznych i darmowychPlugins. 

Nawet jeśli ta śruba regulacyjna jest tylko niewielką częścią optymalizacji OnPage, zawsze należy ją ponownie sprawdzić. W ten sposób możesz mieć pewność, że na czas ładowania Twojej strony internetowej nie wpływają negatywnie wyżej wymienione pliki.

Zdjęcie: Paula Schmidt | Unsplash

Sven Scheuerle - Samozatrudniony freelancer i partner marketingowy z pasją, od wielu lat zajmuje się marketingiem online. Ponadto, jest on blogerem i regularnie relacjonuje na swoim blogu BLOGGiraffe.de, o samozatrudnieniu w biznesie online i daje swoim czytelnikom wskazówki i sztuczki.

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

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