Jak skompresować kod HTML i inny kod witryny?

Użytkownicy serwisu oczekują, że treści będą wysokiej jakości i szybko dostępne. Jest to ważne dla optymalnego doświadczenia użytkownika. Dobrą wiadomością jest to, że za pomocą kilku linijek kodu i kilku małych sztuczek można skompresować HTML i inny kod strony internetowej od 40% do 70% (a w niektórych przypadkach nawet więcej). W tym artykule pokażę, jak to zrobić.

>> Optymalizacja szybkości strony: jak poprawić czas ładowania <<

Po co kompresować kod strony?

Teraz możesz zadać sobie pytanie: Dlaczego powinienem skompresować kod źródłowy mojej witryny? Nieskompresowany ma w końcu tylko kilkaset kilobajtów.

Odpowiedź jest bardzo prosta: ponieważ szybciej ładujące się strony internetowe zapewniają lepsze wrażenia użytkownika, co z kolei ma pozytywny wpływ na współczynnik konwersji, czas spędzony na stronie, odsłony i współczynnik odrzuceń. Szczególnie ważny jest współczynnik konwersji, który ma bezpośredni wpływ na sukces w takich sektorach jak e-commerce.

Na przykład dla giganta e-commerce Amazon, opóźnienie ładowania wynoszące 100 ms kosztuje około 1% sprzedaży. Przewidywane na cały rok podatkowy oznaczałoby to koszty w wysokości około 245 milionów dolarów. Te liczby pokazują drastyczny wpływ, jaki może mieć prędkość ładowania strony internetowej.

Należy również wziąć pod uwagę odsetek użytkowników, którzy surfują po Internecie na urządzeniach mobilnych. Zasięg sieci bezprzewodowych LTE i 4G wciąż ma tu wiele do zrobienia. Oznacza to, że mobilny internet jest często dość powolny, co sprawia, że ​​szybsza prędkość strony jest jeszcze ważniejsza.

Znaczącą poprawę czasu ładowania można osiągnąć, na przykład, stosując technologie kompresji Gzip lub Deflate. Oszczędza to pieniądze i przepustowość.

Czy można skompresować HTML, CSS i JavaScript?

Kompresja kondensuje żądane dane do klienta w celu skrócenia czasu przesyłania. Dwie najpopularniejsze metody kompresji w sieci to Gzip i Deflate. Proces kompresji lokalizuje podobne ciągi w dokumencie i zastępuje je tymczasowymi ciągami o tym samym symbolu zastępczym.

Dlatego te dwie metody są idealne do kompresji plików HTML, CSS i JavaScript, ponieważ często zawierają wiele identycznych ciągów i zwykle wiele pustych linii i spacji. Obie metody można wdrożyć lub aktywować przy stosunkowo niewielkim wysiłku.

Jak działa kompresja kodu strony internetowej

Aby skompresowane dane zostały przesłane, przeglądarka klienta musi najpierw zażądać skompresowanej transmisji danych. Odbywa się to poprzez żądanie HTTP ze specyfikacją „Accept-Encoding: gzip, deflate”. Można określić tylko jedną lub kilka metod kompresji, a przykład akceptuje zarówno gzip, jak i skompresowane dane.

Ważne, że jest to tylko żądanie, a nie żądanie – dzięki temu serwer nie musi odpowiadać skompresowanymi danymi. Jeśli dane nie są dostępne w formie skompresowanej, zostaną po prostu przesłane w postaci nieskompresowanej do żądającego klienta.

Około 90% wszystkich przeglądarek obsługuje kompresję. Wpływ na ustawienie „Accept-Encoding” lub dozwolone metody kompresji przeglądarki zwykle nie istnieje. Albo przeglądarka obsługuje kompresję danych, albo nie.

Serwer odpowiada na żądanie HTTP klienta tzw. „odpowiedzią HTTP”. Jeśli serwer obsługuje kompresję, dane są następnie przesyłane skompresowane do klienta. W nagłówku odpowiedzi HTTP serwer zgłasza na przykład „Content-Encoding: gzip”. W przeciwnym razie żądany zasób jest wysyłany do klienta w postaci nieskompresowanej.

W jaki sposób aktywowana jest kompresja kodu witryny?

W zależności od serwera kompresję kodu można aktywować za pomocą odpowiedniego pliku konfiguracyjnego.

Rysunek 1: Schemat kompresji Gzip

Aktywacja kompresji kodu za pomocą .htaccess

Na serwerach WWW zgodnych z NCSA (na przykład Apache, który jest najczęściej używanym serwerem WWW), kompresję Gzip można zainstalować przy użyciu pliku konfiguracyjnego .htaccess. W tym celu do pliku .htaccess należy wstawić następujący kod:

<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
Ustaw filtr wyjściowy DEFLATE
</FilesMatch>
</IfModule>

Najpierw za pomocą „<IfModule mod_deflate.c>” uruchamiany jest test, aby sprawdzić, czy zainstalowano moduł rozszerzenia mod_deflate. Jeśli tak, użycie „<FilesMatch”\\.(js|css|html|xml)$”>” określi, do jakich typów plików należy zastosować filtr.

Przykładowe filtry dla plików JavaScript, CSS, HTML i XML. Za pomocą „SetOutputFilter DEFLATE” ustala się, że wszystkie pliki, które pasują do wcześniej określonego wzorca, są wysyłane z filtrem DEFLATE. Następnie dopasowanie i zapytanie modułu są ponownie zamykane.

Teoretycznie filtr ten można również zastosować do innych typów danych (na przykład plików graficznych .jpg, .gif lub .png). Dopasowanie plików należałoby dostosować w następujący sposób:

„<FilesMatch”\\.(js|css|html|xml|png|jpg|gif)$”>”

Należy jednak zauważyć, że formaty te są zwykle już skompresowane, a rekompresja często prowadzi do utraty jakości plików graficznych. Dlatego zaleca się kompresowanie plików binarnych (takich jak obrazy) przed ich przesłaniem i unikanie ich kompresowania za pomocą gzip. Można do tego użyć narzędzi takich jak JPEGmini lub TinyPNG.

Aktywacja kompresji kodu za pomocą PHP

Jeśli nie masz dostępu do pliku .htaccess serwera lub chcesz przesyłać tylko pojedyncze pliki skompresowane gzip, możesz włączyć kompresję za pomocą następujących kodów:

<?php ob_start("ob_gzhandler"); ?>

Jeśli to możliwe, tę funkcję należy umieścić przed pierwszym kodem HTML.

Przykład:

<?php ob_start ( "ob_gzhandler" ); ?>
<html>
<ciało>
<p>Powinna to być skompresowana strona.</p>
</body>
</html>

5 pułapek kompresowania kodu strony internetowej

Kompresja kodu HTML i innego kodu witryny może również powodować błędy lub zagrożenia. Powinieneś pomyśleć o następujących punktach:

1. Korzystając z Gzip przez https, wszelkie luki w zabezpieczeniach mogą zostać wykorzystane. Może to powodować problemy z plikami zawierającymi poufne informacje. Dlatego kompresowanie typów plików zawierających poufne informacje za pomocą Gzip nie jest zalecane.

2. Kompresja powinna być stosowana tylko do typów plików lub plików, które nie zostały jeszcze skompresowane. Pliki graficzne są zwykle już przeskalowane i dlatego nie powinny być dodatkowo kompresowane przez gzip. Rekompresja może mieć nawet odwrotny skutek i możesz skończyć z większym rozmiarem pliku lub proces kompresji zajmie zbyt dużo pamięci.

3. Kompresja powinna być stosowana tylko do plików o odpowiednim rozmiarze. W przypadku plików o rozmiarze zaledwie kilku bajtów kompresja może spowodować, że plik stanie się jeszcze większy niż oryginalny plik.

4. Podczas etapu kompresji uważaj, aby nie skompresować zbyt mocno. Często różnica w rozmiarze plików pomiędzy słabymi, normalnymi i mocno skompresowanymi plikami jest niewielka. Jednak średnia lub ciężka kompresja wymaga znacznie większej mocy obliczeniowej.

5. Ponieważ proces kompresji zastępuje identyczne lub powtarzające się ciągi, użycie zmiennych i nazw klas (na przykład w plikach CSS i HTML) skutkuje wyższym sukcesem kompresji, niż gdyby wszystkie zmienne i klasy zostały nazwane inaczej, a zatem ma niewielki potencjał zapewniają kompresję.

Dalsze działania optymalizacyjne dla cienkich kodów

Minimalizowanie HTML i innych strategii

Aby kod źródłowy był przejrzysty i zwięzły, programiści zazwyczaj pracują z podziałami wierszy, spacjami, wcięciami i innymi znakami, które sprawiają, że kod źródłowy jest łatwy do odczytania. W celu lepszego późniejszego utrzymania kodu źródłowego, szczególnie skomplikowane konstrukcje i sekcje są często dokumentowane za pomocą komentarzy.

To, co jest niezwykle pomocne dla programisty, nie jest potrzebne robotowi indeksującemu wyszukiwarki i dlatego powinno zostać usunięte. Wycinanie zbędnych znaków nazywa się „minifikacją” i pomaga zaoszczędzić cenne bajty. Ilość bajtów zaoszczędzonych przez minifikację jest imponująco pokazana w poniższym przykładzie przy użyciu darmowej biblioteki JavaScript jQuery.

Podczas gdy oryginalny plik frameworka w wersji 2.1.4 ma rozmiar około 242kb (jQuery 2.1.4.js (nieskompresowany)), zmniejszony rozmiar pliku po usunięciu zbędnych znaków i komentarzy wynosi tylko około 82kb (jQuery 2.1.4. min.js (skompresowany)). Tylko minimalizując – innymi słowy redukując niepotrzebne znaki – można zmniejszyć rozmiar pliku o około 66%. Znakomity wynik.

Kod źródłowy przed i po procesie minifikacji

Minifikacja działa w przypadku plików HTML, CSS i JavaScript.

Ponadto zredukowany plik jQuery można zmniejszyć o kolejne 65% przy użyciu kompresji Gzip. Z oryginalnego 242kb jest ostatecznie tylko niesamowite 29,5kb.

Narzędzia do redukcji kodu CSS i JavaScript

Aby zredukować kod CSS, możesz użyć np. YUI Compressor lub cssmin.js. Istnieje również kilka narzędzi, których można użyć do zredukowania kodu JavaScript. Google PageSpeed ​​Insights zaleca Closure Compiler, JSMin lub YUI Compressor.

Wskazówka: Ponieważ podziały wierszy, spacje i komentarze są bardzo ważne dla programisty i dla szybkiej, nieskomplikowanej konserwacji, zaleca się utrzymywanie zarówno pliku w stanie oryginalnym (z niepotrzebnymi znakami), jak i pliku w stanie zoptymalizowanym / zredukowanym . Dzięki temu kod może być łatwo utrzymany, ale dla robotów indeksujących jest również znacznie szybszy do pobrania.

Łączenie plików CSS i JavaScript

Często zdarza się, że kilka plików CSS i JavaScript jest ładowanych w nagłówku HTML witryny. Za każdym razem, gdy są one wywoływane, jest to żądanie HTTP, które musi zostać przetworzone przez przeglądarkę. Nowoczesne przeglądarki mogą jednocześnie obsłużyć tylko 2-8 żądań HTTP z tej samej domeny – wszystkie inne żądania będą musiały poczekać.

Ponieważ pojedyncza strona internetowa może wymagać nawet kilkuset żądań HTTP, tworzy to ogromne wąskie gardło. Można temu zapobiec, na przykład łącząc wszystkie pliki CSS w jeden plik, a tym samym reprezentując tylko jedno żądanie HTTP.

To samo dotyczy plików JavaScript ładowanych przez element <script>. Tutaj również powinieneś upewnić się, że jeśli jest to technicznie możliwe, wszystkie pliki JavaScript są połączone w jeden plik.

Należy zauważyć, że często każdy typ strony (na przykład dolna część magazynu vs strona ze szczegółami produktu) wymaga różnych funkcji JavaScript, a co za tym idzie różnych plików JavaScript. W takim przypadku sensowne jest załadowanie tylko tych plików JavaScript i CSS, które są faktycznie potrzebne dla danego typu strony. Grupowanie wszystkich plików JavaScript w jeden może mieć w tym przypadku pewne wady.

Ponadto sensowne może być korzystanie z subdomen lub sieci dostarczania treści (CDN). Skrypty i zasoby, które nie są potrzebne od razu, można ponownie załadować za pomocą AJAX.

Podsumowanie dotyczące kompresji kodu strony internetowej

Dostarczając dane strony internetowej za pomocą Gzip lub Deflate, można osiągnąć znaczną poprawę czasu ładowania. Obie metody doskonale nadają się do kompresji plików HTML, CSS i JavaScript. Ponadto minifikacja to kolejny przydatny sposób na zachowanie szczupłego kodu.

Ponieważ roboty indeksujące wyszukiwarki nie potrzebują pomocnych podziałów wierszy, wcięć itp. w kodzie źródłowym, możesz ograniczyć te niepotrzebne znaki. Istnieją również pomocne narzędzia, które redukują kod CSS i JavaScript. Może to również zaoszczędzić wiele bajtów.

Aby strona nie potrzebowała zbyt wielu żądań HTTP, pliki CSS i JavaScript można zgrupować. Stanowią one jedynie żądanie HTTP, co pozwala zaoszczędzić dodatkowe zasoby.

W rezultacie, nawet przy zaledwie kilku linijkach kodu i niewielkich interwencjach na stronie internetowej, można osiągnąć optymalne usprawnienie kodu. Ponieważ czas ładowania strony jest ważnym czynnikiem SEO i rankingu, każdy webmaster powinien z czasem poradzić sobie z tym problemem.

Kompresja kodu strony zapewnia lepsze wrażenia użytkownika, co ma pozytywny wpływ na inne wskaźniki, takie jak współczynnik konwersji czy długość pobytu. To z kolei stanowi ważny aspekt sukcesu całej firmy i prowadzi do zadowolonych użytkowników.