Zoptymalizuj kodowanie i rozmiar transferu zasobów tekstowych

Ilya Grigorik

Jeremy Wagner

Oprócz wyeliminowania niepotrzebnych pobieranych zasobów najlepszym sposobem na poprawę szybkości wczytywania strony jest zminimalizowanie całkowitego rozmiaru pobierania przez optymalizację i skompresowanie pozostałych zasobów.

Podstawy kompresji danych

Po skonfigurowaniu witryny w taki sposób, aby uniknąć pobierania nieużywanych zasobów, należy skompresować pozostałe odpowiednie zasoby, które przeglądarka musi pobrać. W zależności od typu zasobu (tekst, obrazy, czcionki itp.) możesz wybrać jedną z wielu technik: ogólne narzędzia, które można włączyć na serwerze WWW, optymalizacje wstępne dla określonych typów treści oraz optymalizacje dotyczące konkretnych zasobów, które wymagają podania danych przez programistę.

Aby uzyskać najlepszą skuteczność, musisz połączyć wszystkie te techniki:

• Kompresja to proces kodowania informacji przy użyciu mniejszej liczby bitów.
• Wyeliminowanie zbędnych danych zawsze przynosi najlepsze wyniki.
• Istnieje wiele różnych technik i algorytmów kompresji.
• Aby uzyskać najlepszą kompresję, musisz użyć różnych technik.

Proces zmniejszania rozmiaru danych to kompresja danych. Wiele osób opracowało algorytmy, techniki i optymalizacje, które poprawiają współczynniki kompresji, szybkość kompresji i ilość pamięci wymaganej przez różne algorytmy kompresji.

Pełna dyskusja na temat kompresji danych wykracza poza zakres tego przewodnika. Warto jednak ogólnie poznać sposób działania kompresji i techniki, które można wykorzystać do zmniejszenia rozmiaru różnych komponentów wymaganych przez strony.

Aby zilustrować podstawowe zasady tych technik, rozważ proces optymalizacji prostego formatu wiadomości tekstowej, który został wymyślony tylko na potrzeby tego przykładu:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

1. Wiadomości mogą zawierać dowolne adnotacje (czasami nazywane komentarzami), które są oznaczone preiksem „#”. Adnotacje nie wpływają na znaczenie wiadomości ani jej zachowanie.
2. Wiadomości mogą zawierać nagłówki, czyli pary klucz-wartość (oddzielone w poprzednim przykładzie znakiem ":"), które pojawiają się na początku wiadomości.
3. Wiadomości zawierają ładunki tekstowe.

Co zrobić, aby zmniejszyć rozmiar poprzedniego komunikatu, który ma 200 znaków?

1. Komentarz jest interesujący, ale nie wpływa na znaczenie wiadomości. Wyeliminuj je podczas przesyłania wiadomości.
2. Istnieją skuteczne metody kodowania nagłówków. Jeśli na przykład wiesz, że wszystkie wiadomości mają format „format” i datę „date”, możesz przekonwertować te wartości na krótkie identyfikatory liczb całkowitych i tylko je wysłać. Może to jednak nie być prawdą, dlatego najlepiej na razie pozostawić tę opcję.
3. Ładunek to tylko tekst. Nie wiemy, co tak naprawdę zawiera ten plik (podobno używa on "secret-cipher"), ale już sam tekst wskazuje, że jest w nim dużo zbędnych informacji. Może zamiast wysyłać powtarzające się litery, możesz po prostu policzyć liczbę powtarzających się liter i zakodować je w bardziej efektywny sposób. Na przykład "AAA" staje się "3A", co oznacza sekwencję 3 liter A.

Połączenie tych technik daje następujące korzyści:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Nowa wiadomość ma 56 znaków, co oznacza, że została skompresowana o 72%. To znaczne obniżenie!

To przykładowy przykład tego, jak algorytmy kompresji mogą skutecznie zmniejszać rozmiar przesyłania zasobów tekstowych. W praktyce algorytmy kompresji są znacznie bardziej zaawansowane niż w poprzednim przykładzie, a w internecie można ich używać do znacznego skrócenia czasu pobierania zasobów. Dzięki zastosowaniu kompresji do zasobów tekstowych strona internetowa może wczytywać zasoby szybciej, dzięki czemu użytkownicy mogą zobaczyć efekty działania tych zasobów wcześniej niż bez kompresji.

Kompilacja: wstępna obróbka i optymalizacje zależne od kontekstu

Pierwszą omawianą tu techniką jest minimalizacja. Minifikacja nie jest ściśle algorytmem kompresji, ale jest to sposób na usuwanie zbędnych i zbędnych znaków używanych w źródłowym kodzie, aby ułatwić odczytywanie zasobów przez ludzi. Jednak czytelność nie jest konieczna do zachowania funkcjonalności kodu źródłowego w witrynach produkcyjnych i może opóźniać wczytywanie zasobów w internecie.

Kompilacja to rodzaj optymalizacji treści, która może znacznie zmniejszyć rozmiar dostarczanych zasobów. Optymalizację najlepiej zastosować w ramach procesu kompilacji i wdrażania. Na przykład programy do łączenia to powszechnie używany typ oprogramowania, które może automatycznie kompresować zasoby tuż przed wdrożeniem nowego kodu produkcyjnego do witryny.

Najlepszym sposobem kompresji zbędnych lub niepotrzebnych danych jest ich usunięcie. Nie możesz jednak usuwać dowolnych danych. Jednak w niektórych kontekstach, gdy mamy wiedzę na temat formatu danych i jego właściwości, możemy znacznie zmniejszyć rozmiar ładunku bez wpływu na jego rzeczywiste znaczenie lub możliwości.

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

Weź pod uwagę poprzedni fragment kodu HTML i 3 rodzaje treści, które zawiera:

1. znaczniki HTML,
2. kod CSS do dostosowywania wyglądu strony.
3. JavaScript do obsługi interakcji i innych zaawansowanych funkcji strony.

Każdy z tych typów treści ma inne reguły dotyczące tego, co kwalifikuje się jako prawidłowe treści, inne reguły dotyczące określania komentarzy itp. Pozostaje jednak pytanie: „Jak zmniejszyć rozmiar tej strony?”.

• Komentarze w kodzie są najlepszym przyjacielem programisty, ale przeglądarka ich nie potrzebuje. Usuwanie komentarzy w kodzie CSS (/* ... */), HTML (<!-- ... -->) i JavaScript (// ...) zmniejsza łączny rozmiar przesyłanych danych strony i jej zasobów podrzędnych.
• „Inteligentny” kompresor CSS może zauważyć, że używamy nieefektywnego sposobu definiowania reguł dla .awesome-container, i złożyć 2 deklaracje w jedną bez wpływu na inne style, oszczędzając w ten sposób więcej bajtów. W przypadku dużej liczby reguł CSS usuwanie tego rodzaju nadmiaru może przynieść wymierne korzyści, ale nie zawsze można to robić agresywnie, ponieważ selektory są często powielane w różnych kontekstach, np. w zapytaniach o multimedia.
• Przestrzenie i tabulacje są wygodne dla deweloperów w przypadku HTML, CSS i JavaScript. Dodatkowy kompresor może usunąć wszystkie tabulacje i spacje. W odróżnieniu od innych technik deduplikacji tego typu optymalizacji można stosować dość agresywnie, o ile takie spacje lub tabulacje nie są potrzebne do wyświetlania strony. Na przykład warto zachować spacje w ciągu tekstu w dokumencie HTML, ponieważ zapewniają czytelność treści, które użytkownicy faktycznie zobaczą.

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

Po zastosowaniu poprzednich kroków strona zawiera od 516 do 204 znaków, co oznacza oszczędność około 60%. Nie jest to zbyt czytelne, ale nie musi być, aby można było z niego korzystać. Nowoczesne metody programowania umożliwiają też utrzymywanie dobrze sformatowanych i czytelnych wersji kodu źródłowego oddzielonych od dobrze zoptymalizowanego kodu, który jest wysyłany do środowiska produkcyjnego. W połączeniu z mapami źródła, które zapewniają czytelną reprezentację przekształconego kodu produkcyjnego, ułatwiają rozwiązywanie problemów z błędami w produkcji. Dzięki temu możesz zapewnić wygodę programistom i optymalizować wydajność pod kątem wygody użytkowników.

Poprzedni przykład ilustruje ważną kwestię: ogólny kompresor – np. przeznaczony do kompresji dowolnego tekstu – może całkiem dobrze skompresować stronę z poprzedniego przykładu, ale nie będzie wiedzieć, jak usunąć komentarze, zwinąć reguły CSS ani wykonać dziesiątek innych optymalizacji związanych z treścią. Dlatego tak ważne są wstępne przetwarzanie, minifikacja i inne optymalizacje zależne od kontekstu.

Opisane wyżej techniki można stosować nie tylko w przypadku zasobów tekstowych. Obrazy, filmy i inne typy treści zawierają własne metadane i różne ładunki. Na przykład gdy robisz zdjęcie aparatem, plik zwykle zawiera wiele dodatkowych informacji, takich jak ustawienia aparatu czy lokalizacja. W zależności od aplikacji te dane mogą być kluczowe (np. w przypadku witryny do udostępniania zdjęć) lub całkowicie bezużyteczne. Zastanów się, czy warto ją usunąć. W praktyce metadane mogą zajmować nawet kilkadziesiąt kilobajtów na każdy obraz.

Krótko mówiąc, pierwszym krokiem w optymalizowaniu skuteczności komponentów jest utworzenie zasobów reklamowych z różnymi typami treści i zastanowienie się, jakiego rodzaju optymalizacje można zastosować w przypadku poszczególnych typów treści, aby zmniejszyć ich rozmiar. Następnie, gdy już je poznasz, zautomatyzuj te optymalizacje, dodając je do kroków kompilacji i publikowania, aby mieć pewność, że będą one stosowane konsekwentnie w przypadku każdej nowej wersji w wersji produkcyjnej.

Kompresja tekstu za pomocą algorytmów kompresji

Kolejnym krokiem w zmniejszaniu rozmiaru komponentów tekstowych jest zastosowanie algorytmu kompresji. Ta funkcja idzie o krok dalej, ponieważ przed wysłaniem danych do użytkownika w postaci tekstu intensywnie wyszukuje powtarzalne wzorce, a po dotarciu do przeglądarki użytkownika dekompresuje je. W efekcie następuje dalsze znaczne ograniczenie tych zasobów i krótszy czas pobierania.

• gzip i Brotli to powszechnie stosowane algorytmy kompresji, które najlepiej sprawdzają się w przypadku komponentów tekstowych: CSS, JavaScript, HTML.
• Wszystkie nowoczesne przeglądarki obsługują kompresję gzip i Brotli oraz będą reklamować obsługę obu w nagłówku żądania HTTP Accept-Encoding.
• Serwer musi być skonfigurowany tak, aby umożliwiać kompresję. Oprogramowanie serwera WWW często domyślnie włącza kompresję zasobów tekstowych.
• Zarówno gzip, jak i Brotli mogą być dopracowywane w celu zwiększenia współczynników kompresji przez dostosowanie poziomu kompresji. W przypadku gzip ustawienia kompresji mieszczą się w zakresie od 1 do 9, przy czym 9 oznacza najlepszą kompresję. W przypadku Brotli ten zakres wynosi od 0 do 11, przy czym 11 to najlepsza wartość. Jednak wyższe ustawienia kompresji wymagają więcej czasu. W przypadku zasobów, które są dynamicznie kompresowane (czyli w momencie żądania) ustawienia w środku zakresu zwykle zapewniają najlepszy kompromis między współczynnikiem kompresji a szybkością. Możliwa jest jednak kompresja statyczna, która polega na wcześniejszym skompresowaniu odpowiedzi, dzięki czemu można użyć najbardziej agresywnych ustawień kompresji dostępnych dla każdego algorytmu kompresji.
• Sieci dostarczania treści (CDN) często oferują automatyczną kompresję kwalifikujących się zasobów. Sieci CDN mogą też zarządzać kompresją dynamiczną i statyczną, dzięki czemu nie musisz się martwić o ten aspekt kompresji.

gzip i Brotli to popularne kompresory, które można zastosować do dowolnego strumienia bajtów. W podstawie pamiętają część wcześniej zbadanego pliku, a następnie próbują znaleźć i wymienić zduplikowane fragmenty danych w skuteczny sposób.

W praktyce zarówno gzip, jak i Brotli najlepiej sprawdzają się w przypadku treści tekstowych, często osiągając współczynniki kompresji sięgające 70–90% w przypadku większych plików. Jednak stosowanie tych algorytmów do zasobów, które są już skompresowane za pomocą alternatywnych algorytmów (np. większość formatów obrazów, które używają technik kompresji bezstratnej lub stratnej), nie przynosi prawie żadnych korzyści.

Wszystkie nowoczesne przeglądarki reklamują obsługę gzip i Brotli w nagłówku żądania HTTP Accept-Encoding. Jednak to dostawca usług hostingowych odpowiada za prawidłowe skonfigurowanie serwera WWW, aby mógł on dostarczać skompresowane zasoby na żądanie klienta.

Poprzednia tabela pokazuje oszczędności, jakie można uzyskać dzięki kompresji Brotli i gzip w przypadku kilku znanych bibliotek JavaScript. Oszczędności mieszczą się w zakresie od 65% do 86% w zależności od pliku i algorytmu. Dla porównania do każdego pliku zastosowano maksymalny poziom kompresji zarówno w przypadku Brotli, jak i gzip. Zawsze wybieraj format Brotli zamiast gzip.

Włączenie kompresji to jedno z najprostszych i najskuteczniejszych działań optymalizacyjnych. Jeśli Twoja witryna nie korzysta z tych możliwości, tracisz szansę na poprawę wydajności dla użytkowników. Na szczęście wiele serwerów WWW udostępnia konfiguracje domyślne, które umożliwiają tę ważną optymalizację, a zwłaszcza sieci CDN bardzo skutecznie implementują ją w sposób zapewniający równowagę między szybkością i stopniem kompresji.

Aby szybko sprawdzić działanie kompresji, otwórz Narzędzia deweloperskie w Chrome, otwórz panel Sieć, wczytaj wybraną stronę i obserwuj dół panelu sieci.

Podobnie jak na poprzednim obrazku, powinna pojawić się lista:

• Liczba żądań, czyli liczba zasobów załadowanych na stronie.
• Rozmiar przesyłania wszystkich żądań. Odzwierciedla skuteczność kompresji zastosowanej do dowolnego zasobu strony.
• Rozmiar zasobu wszystkich żądań. Odzwierciedla to rozmiar zasobów strony po ich rozpakowaniu.

Wpływ na podstawowe wskaźniki internetowe

Nie można mierzyć poprawy skuteczności, chyba że istnieją dane odzwierciedlające te ulepszenia. Inicjatywa dotycząca podstawowych wskaźników internetowych ma na celu tworzenie i podnoszenie świadomości na temat danych, które odzwierciedlają rzeczywiste wrażenia użytkowników. W przeciwieństwie do wskaźników takich jak czas wczytywania strony, które nie mają bezpośredniego wpływu na jakość wrażeń użytkownika.

Gdy zastosujesz optymalizacje opisane w tym przewodniku do zasobów w swojej witrynie, ich wpływ na podstawowe wskaźniki internetowe może się różnić w zależności od zoptymalizowanych zasobów i używanych danych. Oto kilka przykładów, w których zastosowanie tych optymalizacji może poprawić podstawowe wskaźniki internetowe Twojej witryny:

• Zmniejszone i skompresowane zasoby HTML mogą przyspieszyć wczytywanie tego kodu HTML, zwiększyć wykrywalność jego podzasobów, a tym samym przyspieszyć ich wczytywanie. Może to być korzystne dla największego wyrenderowania treści (LCP) strony. Wskazówki dotyczące zasobów, takie jak rel="preload", mogą wpływać na możliwość znalezienia zasobów, ale używanie zbyt wielu z nich może powodować problemy z dostępem do przepustowości. Dzięki temu, że odpowiedź HTML na żądanie nawigacyjne jest skompresowana, skaner wstępnego ładowania może jak najszybciej wykryć zawarte w niej zasoby.
• Niektóre kandydaci LCP mogą być wczytywane szybciej dzięki kompresji. Na przykład obrazy SVG, które są kandydatami do LCP, mogą mieć skrócony czas wczytywania zasobu dzięki kompresji tekstowej. Jest to inne podejście niż optymalizacja innych typów obrazów, które są kompresowane za pomocą innych metod, takich jak kompresja stratna w przypadku obrazów JPEG.
• Dodatkowo węzły tekstowe mogą być kandydatami do LCP. Sposób stosowania technik opisanych w tym przewodniku zależy od tego, czy do tekstu na stronach internetowych używasz czcionek internetowych. Jeśli używasz czcionki internetowej, obowiązują sprawdzone metody optymalizacji czcionek internetowych. Jeśli jednak nie używasz czcionek internetowych, a zamiast tego wyświetlasz czcionki systemowe, które nie wymagają czasu na załadowanie zasobów, zminimalizowanie i skompresowanie kodu CSS spowoduje skrócenie tego czasu, co oznacza, że renderowanie potencjalnych węzłów tekstowych LCP może nastąpić wcześniej.

Podsumowanie

Optymalizacja kodowania i przesyłania komponentów tekstowych to podstawowa koncepcja dotycząca skuteczności, ale ma ona ogromny wpływ. Dokładaj wszelkich starań, aby zasoby kwalifikujące się do upakowania i skompresowania były optymalizowane.

Co ważniejsze, musisz mieć pewność, że te procesy są zautomatyzowane. Aby zminimalizować rozmiar, użyj narzędzia do tworzenia pakietów, aby zminimalizować odpowiednie zasoby. Upewnij się, że konfiguracja serwera WWW obsługuje kompresję, ale przede wszystkim używaj najbardziej skutecznej dostępnej kompresji. Aby to ułatwić, użyj sieci CDN, aby zautomatyzować kompresję. Sieci CDN nie tylko mogą kompresować zasoby, ale też mogą to robić bardzo szybko.

Dzięki zastosowaniu tych podstawowych koncepcji dotyczących wydajności w architekturze witryny możesz mieć pewność, że Twoje działania związane z optymalizacją wydajności są dobrze zaplanowane, a kolejne optymalizacje będą się opierać na solidnych podstawach w postaci dobrych podstawowych metod.