Zoptymalizuj kodowanie i rozmiar transferu zasobów tekstowych

Ilya Grigorik

Jeremy Wagner

Oprócz wyeliminowania zbędnych plików do pobrania najlepsze, co możesz zrobić, aby przyspieszyć wczytywanie strony, to zminimalizowanie ogólnego rozmiaru pobieranych danych 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 internetowym, optymalizacje wstępne dla określonych typów treści oraz optymalizacje dotyczące konkretnych zasobów, które wymagają danych od dewelopera.

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

• Kompresja to proces kodowania informacji za pomocą 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łny opis 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 techniki kodowania nagłówków. Jeśli na przykład wiesz, że wszystkie wiadomości mają „format” i „datę”, możesz przekonwertować je na krótkie identyfikatory całkowite i wysłać je. Może to jednak być nieprawda, dlatego lepiej zostawić tę kwestię w pokoju.
3. Ładunek to tylko tekst. Nie wiemy, jaka jest jego treść (zapewne używasz w niej elementu "secret-cipher"), ale samo sprawdzenie tekstu wykazuje, że jest w nim dużo nadmiarowości. 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.

Efektem połączenia tych technik jest:

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ż pokazano w poprzednim przykładzie, a w internecie można ich użyć 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.

Minifikacja: wstępne przetwarzanie i optymalizacje zależnie od kontekstu

Pierwszą omawianą tu techniką jest minimalizacja. Minimalizacja nie jest ściśle algorytmem kompresji, ale stanowi sposób usunięcia zbędnych i nadmiarowych znaków używanych w kodzie źródłowym, aby zasoby były bardziej czytelne dla 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 rodzajów treści ma inne zasady definiujące prawidłową treść, określanie komentarzy itd. Pozostaje jednak pytanie: „Jak zmniejszyć rozmiar tej strony?”.

• Komentarze do kodu są bardzo przydatne dla 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ć bez zastrzeżeń, ponieważ selektory są często powielane w różnych kontekstach, np. w zapytaniach o multimedia.
• Spacje i karty to usprawnienia dla programistów w językach HTML, CSS i JavaScript. Dodatkowy kompresor może usunąć wszystkie znaki tabulacji i spacji. W przeciwieństwie do innych technik deduplikacji ten rodzaj optymalizacji można stosować dość agresywnie, o ile takie spacje ani tabulatory nie są niezbędne do prezentacji strony. Możesz na przykład zachować spacje w przebiegach tekstu w dokumencie HTML, ponieważ zapewni to czytelność treści, które zobaczą użytkownicy.

<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 rozmiar strony zmienia się z 516 do 204 znaków, co daje około 60% oszczędności. 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 dobrze skompresować stronę w poprzednim przykładzie, ale nie będzie wiedzieć, jak usunąć komentarze, zredukować reguł CSS ani wykonać kilkudziesięciu innych optymalizacji związanych z treścią. Dlatego tak ważne jest wstępne przetwarzanie, minifikacja i inne optymalizacje uwzględniające kontekst.

Opisane wyżej techniki można stosować nie tylko w przypadku zasobów tekstowych. Obrazy, filmy i inne rodzaje treści mają własne formy metadanych i różne ładunki. Na przykład za każdym razem, gdy robisz zdjęcie aparatem, w pliku zwykle umieszcza się wiele dodatkowych informacji: ustawienia aparatu, lokalizację itd. 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 usunąć dane. W praktyce każdy obraz może mieć nawet dziesiątki kilobajtów.

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 można dostosować, dostosowując poziom kompresji, aby poprawić współczynnik kompresji. W przypadku programu gzip ustawienia kompresji mieszczą się w zakresie od 1 do 9, przy czym 9 to najlepsze. 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 skompresowanych dynamicznie – czyli w momencie żądania – ustawienia znajdujące się pośrodku zakresu dają zwykle 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) zwykle 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 rzędu 70–90% w przypadku większych plików. Użycie tych algorytmów, które są już skompresowane za pomocą alternatywnych algorytmów, jak w przypadku większości formatów obrazów korzystających z technik kompresji bezstratnej lub stratnej, nie przynosi spodziewanych korzyści lub żadnych ulepszeń.

Wszystkie nowoczesne przeglądarki reklamują obsługę gzip i Brotli w nagłówku żądania HTTP Accept-Encoding. Dostawca usług hostingowych odpowiada jednak za prawidłowe skonfigurowanie serwera WWW, aby wyświetlał skompresowany zasób, gdy o to poprosi klient.

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 domyślne konfiguracje, które umożliwiają tę ważną optymalizację, a zwłaszcza sieci CDN są bardzo skuteczne w implementowaniu tej funkcji w sposób zapewniający równowagę między szybkością i współczynnikiem 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 obrazie, 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 zwiększanie świadomości 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 zasobów i danych, które je dotyczą. Jest jednak kilka sytuacji, w których zastosowanie tych optymalizacji może poprawić podstawowe wskaźniki internetowe witryny:

• Zmniejszone i skompresowane zasoby HTML mogą usprawnić ładowanie kodu HTML i ułatwić wykrywanie jego zasobów podrzędnych, a tym samym usprawnić ich ładowanie. 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 wykrywalność zasobów, ale używanie ich zbyt wielu może powodować problemy z rywalizacją przepustowości. Jeśli odpowiedź HTML na żądanie nawigacji jest skompresowana, zawarte w niej zasoby mogą zostać szybko wykryte przez skaner wstępnego wczytywania.
• Niektóre kandydaci LCP można również ładować wcześniej za pomocą kompresji. Na przykład w przypadku obrazów SVG, które są kandydatami LCP, czas wczytywania zasobu może zostać skrócony przez kompresję tekstową. 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 kandydatami do LCP mogą być węzły tekstowe. 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 ich optymalizacji. 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 skuteczności, ale ma ona ogromny wpływ. Dokładaj wszelkich starań, aby zasoby kwalifikujące się do upakowania i skompresowania mogły korzystać z tych optymalizacji.

Co ważniejsze, upewnij się, że te procesy są zautomatyzowane. Aby zminimalizować rozmiar, użyj narzędzia do tworzenia pakietów, aby zminimalizować odpowiednie zasoby. Upewnij się, że konfiguracja Twojego serwera WWW obsługuje kompresję. Oprócz tego użyj najskuteczniejszej 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.