Jak działa skompresowany HTML i dlaczego może być potrzebny

Jak działa skompresowany HTML i dlaczego może być potrzebny

Jeśli prowadzisz stronę internetową, powinieneś już wiedzieć, jak to zrobić używaj odpowiednich formatów obrazu i zoptymalizuj swoje obrazy pod kątem internetu . Jednak podczas gdy kompresja obrazu jest dobrze znaną praktyką, kompresja HTML zwykle jest pomijana, co jest wstydem, ponieważ korzyści są warte zachodu.





W tym artykule omówimy dwie główne metody zmniejszania plików HTML, dlaczego pliki HTML powinny być zmniejszane i jak się do tego zabrać.



Kompresja a minifikacja

Jeśli chodzi o optymalizację plików HTML, istnieją na to dwie główne metody: kompresja oraz minifikacja . Z pozoru brzmią podobnie, ale w rzeczywistości są to dwie różne techniki, więc nie pomyl ich.





Minifikacja

Możesz myśleć o minifikacji jako usuwaniu zbędnych znaków i linii w kodzie źródłowym. Pomyśl o wcięciach, komentarzach, pustych liniach itp. Żadne z tych elementów nie są wymagane w HTML - istnieją, aby ułatwić czytanie pliku. Przycięcie tych szczegółów może zmniejszyć rozmiar pliku bez wpływu na nic.

Przykładowa strona HTML:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Rozmiar oryginału: 354. Rozmiar pomniejszony: 272. Oszczędność: 82 (23,16%).

Wielu twórców stron internetowych i właścicieli witryn rezerwuje minifikację tylko dla plików JS i CSS, ale ta przestarzała praktyka jest błędem. Ważna jest również minimalizacja HTML.



W 2000 roku narzędzia minifikacyjne były rzadkie. Trzeba było ręcznie minimalizować pliki za każdym razem, gdy coś się zmieniało. Ponieważ pliki HTML zmieniają się częściej niż pliki JS i CSS, było to po prostu zbyt żmudne, aby za każdym razem minimalizować. W dzisiejszych czasach jest to kwestia sporna.

Kompresja

Gdy użytkownicy odwiedzają Twoją witrynę, robią to za pomocą protokołu HTTP. Przeglądarka wysyła żądanie do serwera WWW o konkretną stronę, serwer WWW odnajduje stronę, a następnie wysyła zawartość tej strony z powrotem do przeglądarki odwiedzającego.



Ale ponieważ protokół HTTP obsługuje kompresję, Twój serwer sieciowy może skompresować stronę przed wysłaniem jej do użytkownika (zakładając, że kompresja jest włączona w ustawieniach serwera), a następnie przeglądarka odwiedzającego może rozpakować stronę z powrotem do pierwotnego stanu.

Najpopularniejszym schematem kompresji jest GZIP , który jest formatem pliku wykorzystującym a bezstratny algorytm kompresji o nazwie DEFLATE.

Algorytm szuka powtarzających się wystąpień tekstu w pliku HTML, a następnie zastępuje te powtarzające się wystąpienia odniesieniami do poprzedniego wystąpienia. Każde odniesienie to po prostu dwie liczby: jak daleko wstecz jest odwołanie i do ilu znaków się odnosimy.

Rozważ taki ciąg tekstu (przykład zaczerpnięty ze strony GZIP):

Blah blah blah blah blah.

Algorytm rozpoznaje następujące powtórzenia:

B{lah b}{lah b}{lah b}{lah b}lah.

Pierwsze wystąpienie jest naszym odniesieniem, więc zostaw to tak:

Blah b{lah b}{lah b}{lah b}lah.

Drugie wystąpienie odnosi się do pierwszego wystąpienia, które ma pięć znaków za i pięć znaków:

Blah b[5,5]{lah b}{lah b}lah.

Ale w tym przypadku algorytm rozpoznaje, że następne wystąpienie to ten sam ciąg znaków, więc wydłuża długość odniesienia o kolejne pięć:

Blah b[5,10]{lah b}lah.

I znowu:

Blah b[5,15]lah.

A algorytm jest na tyle sprytny, by zdać sobie sprawę, że następne trzy znaki to pierwsze trzy znaki w odnośniku, więc wydłuża się o trzy:

Blah b[5,18].

Teraz pomyśl o typowym pliku HTML i ilości powtórzeń w nim zawartych. Prawie każdy tag, taki jak

, ma odpowiedni znacznik zamykający, np.

. Ponadto wiele tagów jest powtarzanych w całym tekście, takich jak

,

,

,

  • , itp. Atrybuty są również często powtarzane, w tym

    class

    ,

    href

    , oraz

    src

    . Łatwo zrozumieć, dlaczego kompresja GZIP jest tak skuteczna w HTML.

    Jedynym minusem jest to, że serwer WWW potrzebuje nieco więcej procesora, aby wykonać kompresję za każdym razem, gdy żądana jest strona. Ale ponieważ procesor nie jest obecnie wielkim problemem, prawie zawsze lepiej jest włączyć GZIP niż obejść się bez niego, nawet jeśli masz hosting na poziomie podstawowym .

    Dlaczego powinieneś kompresować i minifikować

    Istnieją dwie główne korzyści, z których obie są kluczowe w dzisiejszym środowisku internetowym z dużą ilością urządzeń mobilnych.

    Szybsze ładowanie stron

    Średnio minifikator HTML może zmniejszyć rozmiar pliku o około 3 procent przy podstawowych ustawieniach. Dzięki opcjonalnym ustawieniom zaawansowanym plik HTML można zmniejszyć o kolejne 3 do 7 procent, co daje potencjalną redukcję nawet o 10 procent. Przekłada się to bezpośrednio na szybsze ładowanie strony.

    Mniej używanej przepustowości

    Załóżmy, że masz 10 plików, z których każdy został skrócony z 50 KB do 45 KB w celu całkowitego zmniejszenia rozmiaru o 50 KB. Załóżmy, że Twoja witryna obsługuje średnio 1000 użytkowników dziennie, a każda wizyta to średnio dziesięć stron. Sama minifikacja HTML zmniejsza wykorzystanie przepustowości o 50 MB dziennie (1,5 GB miesięcznie).

    Kompresja + Minifikacja

    Jak widać, minifikacja HTML jest przydatna sama w sobie, zwłaszcza gdy witryna rozrasta się, pliki stają się większe, a ruch rośnie. Zauważ, że Wytyczne Google dotyczące PageSpeed zalecam minimalizowanie kodu HTML, więc jeśli jesteś sceptyczny, pozwól, aby to przekonało Cię, że jest inaczej.

    jak stworzyć teksturę w Photoshopie

    Ale to, co jest wspaniałe w optymalizacji HTML, polega na tym, że nie musisz wybierać ani minifikacji, ani kompresji. Możesz zrobić jedno i drugie! W rzeczywistości ty powinnam Zrób jedno i drugie.

    Średnio można oczekiwać, że kompresja GZIP zmniejszy plik HTML o 70 do 90 procent. Korzystając z powyższego przykładu z zachowawczym oszacowaniem kompresji, zminimalizowane pliki HTML miałyby rozmiar od 45 KB do 13,5 KB każdy, co daje całkowity skurcz o 365 KB. W porównaniu z niezminimalizowanym/nieskompresowanym przepustowość Twojej witryny jest teraz zmniejszona o 365 MB dziennie (11 GB miesięcznie).

    Oprócz oszczędności przepustowości, każda strona ładuje się znacznie szybciej, ponieważ przeglądarka użytkownika końcowego musi pobrać tylko 13,5 KB w porównaniu z 50 KB na stronę.

    Jak skompresować i zminimalizować HTML

    Na szczęście w dzisiejszych czasach nie są one bardzo trudne i nie potrzebujesz dużej wiedzy technicznej, aby je skonfigurować.

    Wtyczki WordPress

    Jeśli prowadzisz witrynę WordPress, wszystko, co musisz zrobić, to zainstalować jedną wtyczkę i możesz czerpać korzyści zarówno z kompresji, jak i minifikacji.

    Większość wtyczek do buforowania robi coś więcej niż tylko buforowanie stron. Na przykład, Najszybsza pamięć podręczna WP oraz W3 Całkowita pamięć podręczna oba mają ustawienia jednym kliknięciem, które pozwalają włączyć minifikację HTML i kompresję GZIP, a także inne funkcje, które dodatkowo przyspieszają ładowanie stron i zmniejszają wykorzystanie przepustowości.

    Jeśli ty tylko chcesz minifikację, polecamy Zminimalizuj HTML podłącz. Jest prosty, obsługuje HTML/CSS/JS i pozwala nieco dostosować metodę minifikacji (np. czy usunąć

    http:

    oraz

    https:

    z adresów URL).

    Statyczne minifikatory HTML

    Jeśli Twoje pliki HTML są statyczne (tj. nie są generowane dynamicznie przez CMS lub framework sieciowy), możesz zachować dwa zestawy plików HTML: zestaw „źródłowy”, który jest niezminifikowany do łatwej edycji i zestaw „zminifikowany”, które tworzysz za każdym razem, gdy wprowadzasz zmiany w pliku źródłowym.

    Aby zminimalizować, użyj jednego z tych narzędzi:

    Jest to skuteczna technika, jeśli nie korzystasz już z systemów CMS, takich jak WordPress, a teraz korzystasz ze statycznych generatorów witryn .

    Włącz kompresję GZIP

    Czynności umożliwiające włączenie kompresji GZIP mogą się różnić w zależności od używanego oprogramowania serwera WWW. Ponieważ Apache jest najpopularniejszą opcją, omówimy, jak go włączyć za pomocą .htaccess.

    Połącz się z serwerem WWW za pomocą FTP, a następnie utwórz plik o nazwie

    .htaccess

    w katalogu głównym. Edytuj plik .htaccess, aby uzyskać następujące ustawienia:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


    SetOutputFilter DEFLATE

    Nie jesteś pewien, czy kompresja działa na Twojej stronie? Przetestuj to za pomocą tego narzędzia .

    Aby uzyskać najwyższą wydajność, powinieneś również dowiedz się, jak sprawdzić, wyczyścić i zoptymalizować CSS .

    Udział Udział Ćwierkać E-mail Czy należy natychmiast uaktualnić do systemu Windows 11?

    Windows 11 już wkrótce, ale czy powinieneś aktualizować jak najszybciej, czy poczekać kilka tygodni? Dowiedzmy Się.

    Czytaj dalej     Powiązane tematy
    • Programowanie
    • HTML
    • Tworzenie stron internetowych
    O autorze Joel Lee(1524 opublikowanych artykułów)

    Joel Lee jest redaktorem naczelnym MakeUseOf od 2018 roku. Posiada licencjat. w informatyce i ponad 9-letnie doświadczenie zawodowe w pisaniu i redagowaniu.

    Więcej od Joela Lee

    Zapisz się do naszego newslettera

    Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

    Kliknij tutaj, aby zasubskrybować