Reklama

Jeśli prowadzisz witrynę, powinieneś już wiedzieć, jak to zrobić użyj odpowiednich formatów obrazu i zoptymalizuj swoje zdjęcia do Internetu 10 darmowych narzędzi do przetwarzania obrazów online w celu zmiany rozmiaru, konwersji i optymalizacjiPotrzebujesz narzędzi do edycji wsadowej, gdy masz dużo zdjęć do przetworzenia i bardzo mało czasu. Przedstawiamy najlepsze resizery serii, optymalizatory lub konwertery dostępne online. Czytaj więcej . Mimo że kompresja obrazu jest dobrze znaną praktyką, kompresja HTML ma tendencję do przeoczania, co jest wstydem, ponieważ korzyści są tego warte.

W tym artykule omówimy dwie główne metody zmniejszania plików HTML, dlaczego pliki HTML powinny się zmniejszać i jak sobie z tym poradzić.

Kompresja vs. Minifikacja

Jeśli chodzi o optymalizację plików HTML, istnieją dwie główne metody: kompresja i minifikacja. Na powierzchni brzmią podobnie, ale w rzeczywistości są dwiema różnymi technikami, więc nie pomyl ich.

Minifikacja

Minifikację można traktować jako usunięcie niepotrzebnych znaków i wierszy w kodzie źródłowym. Pomyśl o wcięciach, komentarzach, pustych wierszach itp. Żadne z nich nie są wymagane w HTML - istnieją, aby ułatwić odczytanie pliku. Przycinanie tych szczegółów może zmniejszyć rozmiar pliku bez wpływu na cokolwiek.

Przykładowa strona HTML:

To jest nagłówek
Wyślij mi pocztę na adres [email protected].
To jest nowy akapit!
To jest nowy akapit pogrubiony i kursywą.

Przykładowa strona HTML, zminimalizowana:

To jest nagłówek
Wyślij mi pocztę na adres [email protected].
To jest nowy akapit!
To jest nowy akapit pogrubiony i kursywą.

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

Wielu programistów i właścicieli witryn rezerwuje minifikacje 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 do minifikacji były rzadkie. Trzeba ręcznie zmniejszyć pliki za każdym razem, gdy coś się zmienia. Ponieważ pliki HTML zmieniają się częściej niż pliki JS i CSS, po prostu zbyt nużące było ich za każdym razem zmniejszanie. 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 do twojego serwera żądanie dotyczące określonej strony, twój serwer wyszukuje stronę, a następnie przesyła zawartość tej strony z powrotem do przeglądarki użytkownika.

Ponieważ jednak protokół HTTP obsługuje kompresję, serwer sieciowy może skompresować stronę przed wysłaniem jej do gościa (zakładając kompresja jest włączona w ustawieniach serwera), a następnie przeglądarka użytkownika może zdekompresować stronę z powrotem do pierwotnego stanu.

Najpopularniejszym schematem kompresji jest GZIP, który jest formatem pliku używającym algorytm kompresji bezstratnej Jak działa kompresja plików?Jak działa kompresja plików? Poznaj podstawy kompresji plików i różnicę między kompresją stratną a bezstratną. Czytaj więcej o nazwie DEFLATE.

Algorytm wyszukuje powtarzające się wystąpienia tekstu w pliku HTML, a następnie zastępuje te powtarzające się odwołania odniesieniami do poprzedniego wystąpienia. Każde odwołanie to po prostu dwie liczby: jak daleko wstecz jest odwołanie i ile znaków odwołujemy się.

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

Bla bla bla bla bla.

Algorytm rozpoznaje następujące powtórzenie:

Bla bla bla bla bla.

Pierwsze wystąpienie jest naszą referencją, więc zostaw to:

Bla bla bla bla bla.

Drugie wystąpienie odnosi się do pierwszego wystąpienia, które ma pięć znaków z tyłu i pięć znaków długości:

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

Ale w tym przypadku algorytm rozpoznaje, że następnym wystąpieniem jest ta sama sekwencja znaków, więc zwiększa długość odniesienia o kolejne pięć:

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

I znowu:

Bla b [5,15] lah.

Algorytm jest wystarczająco inteligentny, aby zdać sobie sprawę, że następne trzy znaki są pierwszymi trzema znakami w odwołaniu, więc rozszerza się o trzy:

Bla b [5,18].

Pomyśl teraz o typowym pliku HTML i ile powtórzeń istnieje. Prawie każdy tag, taki jak, ma odpowiedni znacznik zamykający, np. Co więcej, wiele tagów jest powtarzanych, np, , , itp. Atrybuty są również często powtarzane, w tym klasa, href, i 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 stanowi obecnie problemu, prawie zawsze lepiej jest włączyć GZIP niż bez niego, nawet jeśli masz hosting podstawowy Najlepsze usługi hostingowe: współdzielone, VPS i dedykowaneSzukasz najlepszej usługi hostingowej dla swoich potrzeb? Oto nasze najlepsze rekomendacje dla Twojego bloga lub strony internetowej. Czytaj więcej .

Dlaczego powinieneś kompresować i zmniejszać

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

Szybsze ładowanie strony

Średnio minimalizator 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 potencjalnie zmniejsza go nawet o 10 procent. To bezpośrednio przekłada się na szybsze czasy ładowania strony.

Wykorzystana mniejsza przepustowość

Załóżmy, że masz 10 plików, każdy zmniejszony z 50 KB do 45 KB, co daje całkowity skurcz 50 KB. Załóżmy, że Twoja witryna obsługuje średnio 1000 odwiedzających każdego dnia, przy czym każda wizyta ma średnio dziesięć stron. Sama minimalizacja HTML zmniejsza wykorzystanie przepustowości o 50 MB dziennie (1,5 GB miesięcznie).

Kompresja + minimalizacja

Jak widać, minimalizacja HTML jest przydatna sama w sobie, zwłaszcza gdy twoja strona powiększa się, pliki stają się większe, a ruch rośnie. Zauważ, że Wytyczne Google PageSpeed zalecamy minimalizowanie HTML, więc jeśli jesteś sceptyczny, niech cię to przekona.

Jednak optymalizacja HTML jest świetna, ponieważ nie musisz wybierać ani minimalizacji, ani kompresji. Możesz zrobić oba! W rzeczywistości ty powinien 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, zmniejszone 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 do niezminimalizowanych / nieskompresowanych 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 do 50 KB na stronę.

Jak kompresować i minimalizować HTML

Na szczęście obecnie żadne z nich nie jest 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 minimalizacji.

Większość wtyczek buforujących robi więcej niż tylko buforowanie stron. Na przykład, Najszybsza pamięć podręczna WP i W3 Total Cache oba mają ustawienia jednym kliknięciem, które pozwalają włączyć minimalizację 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 minimalizacji, zalecamy Zmniejsz HTML podłącz. Jest prosty, obsługuje HTML / CSS / JS i pozwala nieco ulepszyć metodę minimalizacji (np. Czy usunąć http: i https: z adresów URL).

Statyczne Minizatory HTML

Jeśli twoje pliki HTML są statyczne (tj. Nie są generowane dynamicznie przez CMS lub platformę internetową), możesz zachować dwa zestawy plików HTML: zestaw „źródłowy”, który jest nieuprawniony do łatwej edycji, oraz zestaw „zminimalizowany”, który tworzysz za każdym razem, gdy wprowadzasz zmiany w pliku źródłowym.

Aby zminimalizować, użyj jednego z następujących narzędzi:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (inny niż powyższy)

Jest to realna technika, jeśli odszedłeś od CMSów takich jak WordPress, a teraz używasz generatory witryn statycznych 7 powodów, dla których porzuć swój CMS i rozważ statyczny generator stronPrzez wiele lat opublikowanie strony internetowej było trudne dla wielu użytkowników. CMS takie jak WordPress to zmieniły, ale wciąż mogą być mylące. Inną alternatywą jest statyczny generator stron. Czytaj więcej .

Włącz kompresję GZIP

Kroki włączania kompresji GZIP mogą się różnić w zależności od używanego oprogramowania serwera WWW. Ponieważ Apache jest najpopularniejszą opcją, omówimy, jak włączyć ją 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 mieć następujące ustawienia:

 mod_gzip_on Tak mod_gzip_dechunk Tak plik mod_gzip_item_include. (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 ^ Kodowanie treści:. * Gzip. *
 SetOutputFilter DEFLATE. 

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

Aby uzyskać najwyższą wydajność, powinieneś również dowiedz się, jak sprawdzać, czyścić i optymalizować CSS 11 Przydatne narzędzia do sprawdzania, czyszczenia i optymalizacji plików CSSChcesz poprawić swój kod CSS? Te kontrolery i optymalizatory CSS pomogą poprawić kod CSS, składnię i zminimalizować strony internetowe. Czytaj więcej .