Ograniczenie HTML, CSS i JavaScript jest jedną z wielu małych dźwigni optymalizacji szybkości ładowania strony. Jeśli spojrzysz dziś na różne strony w sieci, szybko zdasz sobie sprawę, że nie można ich w żaden sposób porównać do stron sprzed 10 lat. W początkowym okresie wystarczył prosty kod HTML i trochę tekstu. Dziś jednak strony internetowe składają się z rozbudowanego kodu, często zawierającego HTML, CSS i JavaScript. Wynika to z jednej strony z szeregu 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. 

Nie jest rzadkością, że pliki HTML, CSS czy JavaScript mają rozmiar setek kilobajtów. Aby przetworzyć cały ten kod w plikach i wyświetlić stronę internetową, przeglądarka internetowa wysyła do serwera liczne żądania (tzw. żądania HTTP). 

Zwłaszcza WordPress nie jest znany z narzędzi do optymalizacji czasu ładowania. Dlatego należy regularnie sprawdzać wydajność witryny WordPress.

Im więcej "żądań" jest wysyłanych, tym dłuższy jest czas ładowania. Aby utrzymać jak najmniejszą liczbę żądań, a przez to także czas ładowania strony, powinieneś kompresować pliki i łączyć je, jeśli to konieczne.

Co to znaczy minifikować?

Minifikacja oznacza, że wszystkie elementy stworzone dla czytelności kodu (tj. podziały linii, spacje, wcięcia, niepotrzebne średniki i komentarze) są usuwane z pliku w celu zmniejszenia jego rozmiaru. Obejmuje to również konwersję bardziej złożonych wyrażeń na prostsze. Nawet identyfikatory zmiennych mogą zostać skrócone, na przykład poprzez zastąpienie zmiennej numberOfButtons przez n.

Efekt minifikacji jest oczywiście bardzo różny, w zależności od tego, ile z tych elementów zostało uwzględnionych podczas pisania kodu, ale rozmiar pliku jest zwykle zmniejszany o wartość od 20 do 40 procent, co w każdym przypadku może mieć znaczenie dla twoich rankingów w wyszukiwarkach. Minifikacja zawsze ma sens i rzadko prowadzi do problemów.

Co oznacza słowo "skompresować"?

Kod jest kompresowany za pomocą kodowania gzip po stronie serwera. 

Tutaj ciągi, które pojawiły się już wcześniej, są zastępowane wskaźnikiem. Te wskaźniki zawierają o wiele mniej treści niż rzeczywisty łańcuch. Ponieważ to jest już nie ciąg znaków dla przeglądarki, ale odwołanie do poprzedniego ciągu. Nagłówek odpowiedzi HTTP będzie wtedy zawierał "content-encoding: gzip". Efekt kompresji jest ekstremalny; możesz zmniejszyć rozmiar pliku do około 20 procent jego oryginalnego rozmiaru.

Skróć czas ładowania

Jeśli kiedykolwiek korzystałeś z narzędzia Google PageSpeed Insights, prawdopodobnie znasz tę sugestię dotyczącą optymalizacji: "Minify CSS".

Ten środek jest zalecany przez PageSpeed Insights, jeśli żądania pobrania plików CSS mają duży wpływ 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".  

Chciałbym ci pokazać, jak redukcja CSS może wpłynąć na czas ładowania twojej strony, używając diagramu wodospadowego z mojego bloga bloggiraffe.de. Przykłady są tylko małymi fragmentami, ale już one jasno pokazują, jak można zredukować czas ładowania.

Przykład 1 - Nieskompresowany:

Przykład 2 - Skompresowany (zredukowany):

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, gdy pliki CSS i JavaScript są łączone? 

Jak już wspomnieliśmy pokrótce w artykule, podczas łączenia plików CSS i JS poszczególne pliki są łączone w jeden plik. 

Oznacza to, że przeglądarka - za pomocą której użytkownik wywołuje daną witrynę - musi wysłać mniej żądań do serwera, aby umożliwić wyświetlenie witryny i załadowanie niezbędnych skryptów.

Przykłady z życia codziennego 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. 

Skutek: Znalezienie każdego produktu i dodanie go do koszyka zajmuje niesamowicie dużo czasu. 

Rozwiązanie: Z wyprzedzeniem informujesz supermarket, jakich produktów potrzebujesz. Supermarket umieści twoje produkty na półce, dzięki czemu wystarczy, że włożysz je do wózka na zakupy i zapłacisz przy kasie. 

Rezultat: Grupując wszystkie produkty na jednej półce, musisz przejść przez supermarket tylko w jedną stronę i oszczędzasz niesamowicie dużo czasu. Działa to w podobny sposób, jak grupowanie poszczególnych kodów i skryptów na twojej stronie. Abyś mógł zobaczyć, jak to wszystko działa w praktyce, chciałbym pokazać ci to na małych przykładach. 

Zapisywanie danych nie tylko pomaga zoptymalizować wydajność.
Bo świadome korzystanie z zasobów przyczynia się także do tego, że Twoja strona staje się bardziej zrównoważona. Przeczytaj artykuły na temat Jak zielony jest WordPress? i Zrównoważone projektowanie stron internetowych.

W przypadku niektórych konfiguracji - tj. kombinacji wtyczek i motywów - łączenie plików CSS, a zwłaszcza plików JavaScript, może niestety również prowadzić do problemów. Może to mieć również negatywny wpływ na wartość LCP lub inne wartości Web Vitals.

To, czy scalanie ma pozytywny wpływ na twoją witrynę, czy też prowadzi do problemów, jest czymś, co po prostu musisz ostatecznie przetestować. Nie martw się, możesz zmienić ustawienia w dowolnym momencie.

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: 

 <!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>

Zminimalizowane:

 <!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. 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;
}

Zminimalizowane:

 /* 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, pierwotnie stworzonym do tworzenia dynamicznego HTML w przeglądarkach internetowych(wikipedia.org).

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

Zminimalizowane:

 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żesz zobaczyć, jak działa minifikacja kodu HTML, CSS i JavaScript. Zaawansowani i profesjonalni użytkownicy mogą także przeprowadzić tę kompresję ręcznie, korzystając z narzędzia takiego jak linkcode-generator.de. Specjalne "wtyczki minify" lub minifikatory mogą wykonać tę pracę za ciebie. To nie tylko oszczędza czas, ale też działa w pełni automatycznie.

4 Wtyczki Minify do WordPressa

Na poniższej liście umieściłem pięć popularnych wtyczek do minifikacji, które ułatwiają kompresję HTML, CSS i JavaScript. 

#1 Autoptimize

Wtyczka WordPress Autoptimize oferuje prostą optymalizację twojej strony. Dzięki kilku prostym krokom możesz skompresować pliki HTML, CSS i JavaScript, a tym samym przyspieszyć czas ładowania swojej strony.  

Funkcja Autoptimize przenosi skrypty na przykład do stopki i opóźnia ładowanie plików takich jak HTML, CSS i JavaScript oraz wielu innych plików, np. czcionek Google.

Kiedy zainstalujesz wtyczkę w WordPressie, w ustawieniach znajdziesz różne zakładki, takie jak "JS, CSS, HTML", "Obrazy" i "Dodatki". Poszczególne możliwości i opcje zostały tu bardzo dobrze opisane i są zrozumiałe także dla osób nie będących ekspertami.

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 "Dodatki" można wprowadzić dalsze automatyczne optymalizacje, na przykład dla czcionek Google, emojis i ładowania plików z domen innych firm. 

Najważniejsze funkcje programu Autoptimize: 

• Minimalizacja / cache'owanie plików HTML, CSS i JavaScript
• Optymalizacja obrazu
• Usunięcie czcionki Google Fonts
• Usunięcie Emojis
• Synchronizacja JavaScript
• Kompatybilność z szerokim zakresem buforowania wtyczek

#2 WP Super Minify

Za pomocą wtyczki WP Super Minify Pliki CSS i JavaScript mogą być zmniejszane i buforowane. Przyspieszone ładowanie tych plików jest następnie możliwe dzięki frameworkowi Minify PHP. 

Szczególną cechą tej wtyczki jest to, że jest to oprogramowanie typu open source. Kod źródłowy narzędzia jest więc otwarty i może być dalej rozwijany przez wszystkich.

W ustawieniach WP Super Minify nie ma zbyt wielu opcji. Widoczne są tylko ustawienia dotyczące kompresji JavaScript i CSS.

Najważniejsze funkcje wtyczki WP Super Minify:  

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

#3 Fast Velocity Minify

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

Po zainstalowaniu wtyczki Minify znajdziesz wiele opcji ustawień w backendzie WordPressa, co dla niektórych może być nieco przytłaczające. Dobrą rzeczą jest to, że wiele domyślnych ustawień jest już wstępnie zdefiniowanych, tak że wystarczy, by nieprofesjonaliści aktywowali wtyczkę. 

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

Co więcej, wtyczka ta oferuje także 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
• WP-CLI Wsparcie
• Kompatybilność z szerokim zakresem buforowania wtyczek

#4 WP Speed of Light

Wtyczka WP Speed of Light jest również wtyczką WordPressa, która łączy pliki HTML, CSS i JavaScript. Ta potężna wtyczka posiada także kompresję cache i Gzip, system czyszczenia bazy danych, a także optymalizację htacces.  

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

Ponadto wersja Pro 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 wtyczki: 

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

Bezpośrednie porównanie wtyczek

	Merge + Minify + Refresh	WP Super Minify	Fast Velocity Minify	Autoptimize	WP Speed of Light
Bez opłat	tak	tak	tak	tak	tak
Odpowiednie dla	Początkujących	Początkujących	Zaawansowani + Profesjonaliści	Początkujący + Zaawansowani	Początkujący + Zaawansowani
Kompresja HTML	nie	nie	tak	tak	tak
Kompresja CSS	tak	tak	tak	tak	tak
Kompresja JavaScript	tak	tak	tak	tak	tak
Ocena	4/5	3/5	4/5	5/5	4/5

Wnioski

Redukcja plików HTML, CSS czy JavaScript może wydłużyć czas ładowania strony o kilka milisekund. WordPress oferuje wiele bardzo przydatnych i darmowych wtyczek do tego celu. 

Nawet jeśli ta śruba regulacyjna stanowi tylko niewielką część optymalizacji OnPage, zawsze powinna być sprawdzana na nowo. W ten sposób masz pewność, że wyżej wymienione pliki nie wpłyną negatywnie na czas ładowania twojej strony.