Ograniczenie HTML, CSS i JavaScript: Oto jak łatwo to działa w WordPress

Sven Scheuerle Ostatnia aktualizacja 21.10.2020
9 Min.
minimalizacja css
Ostatnia aktualizacja 21.10.2020

Minifikacja plików HTML, CSS i JavaScript jest jedną z wielu małych dźwigni do optymalizacji szybkości ładowania Twojej strony. W tym artykule Sven Scheuerle wyjaśni Ci, na czym polega redukcja CSS, HTML i innych, ile czasu ładowania zaoszczędzisz dzięki odchudzonemu kodowi i które WordPress -Plugins pomogą Ci w implementacji.

Kiedy patrzysz na strony internetowe w sieci World Wide Web dzisiaj, szybko zdajesz sobie sprawę, że nie są one niczym podobnym do stron sprzed 10 lat. W początkowym okresie wystarczył prosty kod HTML i trochę tekstu. W dzisiejszych czasach jednak strony internetowe składają się z rozbudowanego kodu, który często składa się z HTML, CSS i JavaScript. Jest to częściowo spowodowane zakresem funkcji, które są obecnie dostępne dla stron internetowych, ale także ze względu na coraz bardziej rozbudowane projekty i szablony, które są używane w projektowaniu stron internetowych. 

Dlatego nierzadko pliki HTML, CSS czy JavaScript mają rozmiar setek kilobajtów. Aby przetworzyć wszystkie te kody w plikach i móc wyświetlić stronę internetową, przeglądarka internetowa wysyła do serwera liczne żądania (tzw. żądania HTTP). 

Im więcej "żądań" jest wysyłanych, tym dłuższy jest czas ładowania. Aby utrzymać jak najmniejszą liczbę zapytań, a tym samym czas ładowania strony, należy scalać i kompresować pliki.  

Co oznacza minifikacja HTML, CSS i JavaScript?

Minifikacja - czyli maksymalne zmniejszenie rozmiaru plików HTML, CSS i innych - jest częścią każdej dobrej optymalizacji OnPage. Chociaż stanowi on tylko niewielką część czasu ładowania, może mieć decydujący wpływ na Twoją pozycję w wyszukiwarkach. 

Zwłaszcza WordPress nie jest znana z narzędzi optymalizujących czas ładowania. Dlatego powinieneś regularnie sprawdzać wydajność swojej strony WordPress .

Skrócenie czasu ładowania

Każdy właściciel strony internetowej, który korzystał z narzędzia takiego jak Google PageSeepd Insights jest prawie na pewno zaznajomiony z tą sugestią optymalizacji: "Zmniejsz CSS".

Ten środek jest zalecany przez PageSpeed Insights , jeśli żądania pobrania plików CSS silnie wpływają na czas ładowania strony. Szczegółowe wyjaśnienie oraz objaśnienia innych komunikatów w narzędziu, znajdziesz w artykule"Google Pagespeed - Najważniejsze komunikaty o błędach". 

Jak redukcja CSS może wpłynąć na czas ładowania Twojej strony, chciałbym pokazać Ci na wykresie wodospadowym z mojego bloga bloggiraffe.de. Przykłady są tylko małymi fragmentami, ale wyraźnie pokazują, jak można skrócić czas ładowania.

Przykład 1 - Nieskompresowany (nie zmniejszony):

rekompresja css
Diagram wodospadowy - bez kompresji plików HTML, CSS i JavaScript

Przykład 2 - skompresowany (zredukowany):

css skompresowany
Diagram wodospadowy - z kompresją plików HTML, CSS i JavaScript

Już przy pobieraniu głównej domeny widać, że udało mi się skrócić czas ładowania z 1233 milisekund do 860 milisekund. Również czasy ładowania poszczególnych plików mogą być w niektórych przypadkach minimalnie skrócone.

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

Jak wspomniano krótko w artykule, kompresja plików takich jak HTML, CSS i JavaScript, łączy pojedyncze pliki w jeden plik. 

Oznacza to, że przeglądarka, za pomocą której wywołujemy daną stronę internetową, musi wysłać mniej żądań do serwera, aby móc wyświetlić stronę i załadować niezbędne skrypty.

Codzienny przykład dla zrozumienia

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

Konsekwencja: To zajmuje niesamowicie dużo czasu, aż znajdziesz każdy pojedynczy produkt i umieścić go w koszyku. 

Rozwiązanie: Z wyprzedzeniem informujesz supermarket, jakie produkty są Ci potrzebne. W supermarkecie produkty znajdują się na półce, a Ty musisz tylko włożyć je do koszyka i zapłacić przy kasie. 

Rezultat: Dzięki zebraniu wszystkich produktów na jednej półce, musisz przejść tylko jedną drogę przez supermarket i oszczędzasz w ten sposób niesamowitą ilość czasu. Działa to podobnie jak minifikacja poszczególnych kodów i skryptów Twojej strony. Abyś mógł zobaczyć, jak to wszystko działa w praktyce, chciałbym pokazać Ci to na małych przykładach. 

Oszczędność danych pomaga nie tylko w optymalizacji wydajności.
Ponieważ świadome korzystanie z zasobów przyczynia się również do tego, że Twoja strona jest bardziej zrównoważona. Przeczytaj artykuły na temat Jak zielone jest WordPress ? i Green Hosting.

HTML

HTML (Hypertext Markup Language) jest niezbędny dla podstawowej struktury strony internetowej. Tak więc, teksty, linki lub nawet obrazy są wyprowadzane przez to. 

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

 

  
    
    
    Kod HTML dla kompresji
  
  
    

Ten kod HMTL ma być skompresowany.

Kompresja: 

 Kod HTML dla kompresji

Ten kod HMTL ma być skompresowany.

CSS

CSS (Cascading Style Sheets) nie jest prawdziwym językiem programowania. Natomiast do zmiany wyglądu poszczególnych elementów strony służy tzw. język arkuszy 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;
}

Kompresja:

 /* 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 jest czystym językiem skryptowym, który został pierwotnie opracowany do tworzenia dynamicznego HTML w przeglądarkach internetowych(wikipedia.org). Dzięki temu, operatorzy stron internetowych mają dziś możliwość korzystania z HTML i CSS w rozszerzony sposób. 

Standardowy kod JavaScript (wiki.selfhtml.org) wygląda na przykład tak:

 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);

Kompresja: 

 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 minifikacja kodu HTML, CSS i JavaScript. Jako zaawansowany i profesjonalny użytkownik, możesz również wykonać tę kompresję ręcznie i użyć narzędzia takiego jak linkcode-generator.de. Jako użytkownik WordPress , specjalna funkcja "Minify Plugins" może wykonać tę pracę za Ciebie. Pozwala to nie tylko zaoszczędzić czas, ale również działa w pełni automatycznie.

5 Minify Plugins dla WordPress

Na poniższej liście wymieniłem pięć popularnych stronPlugins , które wykonają za Ciebie pracę przy kompresji HTML, CSS i JavaScript. 

#1 Scal + Zminimalizuj + Odśwież

Połącz minify odśwież

Jako nazwę Plugins Scal + Zminimalizuj + Odśwież (Merge + Minify + Refresh) mówi, że narzędzie to skupia się całkowicie na kompresji kodu CSS oraz JavaScript. 

Strona Plugin grupuje pliki Cascading Style Sheets (CSS) i Javascript w pojedyncze grupy. Te z kolei są minimalizowane za pomocą Minify dla CSS oraz Google Closure dla JavaScript. 

Po instalacji w WordPress Plugin Merge + Minify + Refresh oferuje kilka ustawień, aby zoptymalizować czas ładowania Twojej strony.

Połącz minify odśwież wordpresspng

Możesz między innymi wybrać, czy pliki CSS i JS mają być łączone, czy nie. Ponadto, czy kompresja powinna odbywać się za pośrednictwem WP-Cron i czy dane powinny być buforowane na zewnątrz, czy kompresowane wewnątrz pliku Gzip. 

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

3 najważniejsze funkcje Merge + Minify + Refresh Plugins: 

  • Scalanie / kompresja CSS i JavaScript
  • Serwer HTTP2 Push
  • Multisite

#2 WP Super Minify

wp super minify

Z Plugin WP Super Minify może być używany do zmniejszania i buforowania plików CSS i JavaScript. Przyspieszone ładowanie tych plików jest następnie możliwe dzięki Minify PHP Framework. 

Szczególną cechą tego Plugin jest to, że jest to oprogramowanie open source. Kod źródłowy narzędzia jest więc otwarty i może być dalej rozwijany przez każdego użytkownika.

W ustawieniach WP Super Minify nie ma zbyt dużego wyboru dla użytkowników. Widoczne są tylko ustawienia dotyczące kompresji JavaScript i CSS.

wp super minif wordpress

Kluczowe cechy WP Super Minify Plugins: 

  • Kompresja / redukcja plików CSS i Javascript
  • Minify PHP Framework

#3 Fast Velocity Minify

fast velocity minify

Strona Plugin Fast Velocity Minify pozwala na optymalizację czasu ładowania dla programistów i zaawansowanych użytkowników. Redukuje żądania HTTP poprzez łączenie plików CSS i javascript z jednej strony, a z drugiej minimalizuje pliki za pomocą PHP Minify. 

Po zainstalowaniu Minify Plugins , znajdziesz wiele opcji ustawień w backendzie WordPress , które mogą być nieco przytłaczające dla niektórych użytkowników. Dobre jest to, że wiele ustawień domyślnych jest już wstępnie zdefiniowanych, tak że laikom wystarczy aktywacja Plugin . 

Dla zaawansowanych użytkowników i programistów, Plugin Fast Velocity Minify oferuje wiele sztuczek i opcji optymalizacji.

szybka prędkość minify wordpress

Ponadto, ten Plugin oferuje również wersję Pro. W tej wersji dostępne są funkcje wykluczania różnych plików CSS i JavaScript. 

Główne cechy Fast Velocity Minify

  • Kompresja / redukcja plików HTML, CSS i JavaScript
  • PHP Minify
  • Wykluczanie plików i skryptów
  • statyczne pliki pamięci podręcznej
  • Wsparcie dla WP CLI
  • Kompatybilny z szerokim zakresem buforowaniaPlugins

#4 Autoptimize

optymalizuj automatycznie

The WordPress -Plugin Autoptimize oferuje Ci prostą optymalizację Twojej strony internetowej. Za pomocą kilku prostych kroków możesz skompresować pliki HTML, CSS i JavaScript, a tym samym przyspieszyć czas ładowania strony. 

Funkcja Autoptimize-Plugin przenosi skrypty do stopki i opóźnia ładowanie plików takich jak HTML, CSS i JavaScript, czy wielu innych plików, np. czcionek Google.

Ważne dla klientów RAIDBOXES

Autoptimize nie jest kompatybilny z innymi cache'ami, takimi jak cache serwera RAIDBOXES . Dlatego stanowczo odradzamy używanie Autoptimize na 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.

autoptymalizować wordpress

W zakładce "JS, CSS & 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 "Extras" można dokonać dalszych automatycznych optymalizacji, np. dla Google Fonts, dla Emojis, jak również dla ładowania plików przez obce domeny. 

Najważniejsze funkcje programu Autoptimize

  • Minimalizacja / cache'owanie plików HTML, CSS i JavaScript
  • Optymalizacja obrazu
  • Usuń czcionki Google Fonts
  • Usuń emojis
  • Zsynchronizuj JavaScript
  • Kompatybilny z szerokim zakresem buforowaniaPlugins

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

wp prędkość światła

Strona Plugin WP Prędkość światła jest również WordPress -Plugin, który łączy w sobie pliki HTML, CSS i JavaScript. Potężny Plugin posiada również kompresję cache i gzip, system czyszczenia bazy danych, a także optymalizację htacces. 

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

wp prędkość światła wordpress

Ponadto wersja Pro Plugins udostępnia kilka dodatkowych funkcji, takich jak wykluczanie lub przenoszenie skryptów. 

WP Speed of Light oferuje oprócz czystej kompresji plików wiele innych funkcji, z których można korzystać w łatwy sposób za pośrednictwem przejrzystego backendu. 

Główne funkcje strony Plugins: 

  • Kompresja plików HTML, CSS i JavaScript
  • Pamięć podręczna i kompresja Gzip
  • Narzędzia grupowe
  • Czyszczenie bazy danych
  • Optymalizacja obrazu

Plugins w bezpośrednim porównaniu

 Scal + Zminimalizuj
+ Odśwież
WP Super
Minify
Fast Velocity
Minify
AutoptimizeWP Speed
of Light
Bez opłattaktaktaktaktak
Odpowiednie dlaPoczątkującyPoczątkującyZaawansowani + ProfesjonaliściPoczątkujący + zaawansowaniPoczątkujący + zaawansowani
Kompresja HTMLnienietaktaktak
Kompresja CSStaktaktaktaktak
Kompresja JavaScripttaktaktaktaktak
Ocena4/53/54/55/54/5

Wnioski

Redukcja plików HTML, CSS czy JavaScript może pomóc Ci w wydłużeniu czasu ładowania strony o kilka milisekund. W tym celu można wybrać spośród kilku bardzo przydatnych i darmowych stron Plugins w WordPress . 

Nawet jeśli ta śruba regulacyjna jest tylko niewielką częścią optymalizacji OnPage, zawsze powinna być sprawdzana na nowo. W ten sposób możesz mieć pewność, że pliki wymienione powyżej nie wpłyną negatywnie na czas ładowania Twojej strony.

Zdjęcie dodane: Paula Schmidt | Unsplash

Sven Scheuerle - przedsiębiorca freelancer i partner marketingowy, od wielu lat z pasją zajmuje się marketingiem internetowym. Ponadto, jest on blogerem i regularnie publikuje o prowadzeniu biznesu online na swoim blogu BLOGGiraffe.de, gdzie dzieli się ze swoimi czytelnikami cennymi wskazówkami i swoją wiedzą.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.