Zoptymalizuj kodowanie i rozmiar transferu zasobów tekstowych

Ilya Grigorik

Jeremy Wagner

Oprócz wyeliminowania niepotrzebnych zasobów do pobrania najlepszym, co możesz zrobić, przyspieszenie wczytywania strony to minimalizacja rozmiaru pobieranych plików przez optymalizację, i skompresowanie pozostałych zasobów.

Poradnik kompresowania danych

Gdy skonfigurujesz witrynę tak, aby nie pobierała nieużywanych zasobów, komponent Następnym krokiem jest skompresowanie pozostałych kwalifikujących się zasobów, które są w przeglądarce aby pobrać aplikację. W zależności od typu zasobu – tekst, obrazy, czcionki itd. jest wiele różnych technik do wyboru: ogólne narzędzia, włączone na serwerze WWW, optymalizacja wstępnego przetwarzania określonych treści i optymalizacje dostosowane do konkretnych zasobów, które wymagają danych wejściowych Google Play.

Zapewnienie najwyższej skuteczności wymaga połączenia wszystkich następujących elementów: techniki:

• Kompresja to proces kodowania informacji za pomocą mniejszej liczby bitów.
• Eliminowanie niepotrzebnych danych zawsze zapewnia najlepsze wyniki.
• Istnieje wiele różnych technik i algorytmów kompresji.
• Aby uzyskać najlepszą kompresję, musisz zastosować różne techniki.

Proces zmniejszania rozmiaru danych to kompresja danych. Wiele osób przesłane algorytmy, techniki i optymalizacje w celu poprawy kompresji współczynnik proporcji, szybkość kompresji i pamięć wymaganej przez różne za pomocą algorytmów.

Pełny opis kompresji danych wykracza poza zakres tego przewodnika. Trzeba jednak ogólnie zrozumieć, jak działa kompresja, a także techniki, za pomocą których można zmniejszyć rozmiar różnych zasobów używanych na stronach nie są wymagane.

Aby zilustrować podstawowe zasady tych technik, przyjrzyjmy się procesowi optymalizacji prostego formatu wiadomości tekstowych, który został wymyślony tylko dla 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 komentarze – oznaczone znakiem „#”; . Adnotacje nie mają wpływu przeznaczenia wiadomości lub sposobu jej działania.
2. Wiadomości mogą zawierać nagłówki będące parami klucz-wartość (rozdzielone znakiem ":" w poprzednim przykładzie), które pojawiają się na początku wiadomości.
3. Wiadomości zawierają ładunki tekstowe.

Co można zrobić, aby zmniejszyć rozmiar wcześniejszej wiadomości, rozpoczynającej się od 200 znaków?

1. Komentarz jest interesujący, ale nie ma wpływu na znaczenie wiadomości. Wyeliminuj go podczas przesyłania wiadomości.
2. Istnieją dobre techniki kodowania nagłówków w wydajny sposób. Dla: Na przykład, jeśli wiesz, że wszystkie wiadomości mają „format” i „data”, możesz skonwertować je na krótkie identyfikatory całkowite i wysłać je. Może to jednak ale nie jest to prawda, więc lepiej na razie zostawić tę kwestię w spokoju.
3. Może zawierać tylko tekst. Chociaż nie wiemy, jaka jest jego treść, najwyraźniej korzysta z pola "secret-cipher", tylko patrząc na tekst pokazuje, że jest w nim dużo nadmiarowości. Może zamiast wysyłać i powtórzone litery, wystarczy policzyć liczbę powtórzonych liter ich kodowanie. Na przykład "AAA" zmienia nazwę na "3A", która reprezentuje sekwencję trzech 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 plik został skompresowany pierwotna wiadomość o 72%. To znaczny spadek.

To zabawkowy przykład tego, jak algorytmy kompresji mogą być skuteczne zmniejszając rozmiar transferu zasobów tekstowych. W praktyce kompresja algorytmy są znacznie bardziej zaawansowane niż w poprzednim przykładzie, można użyć algorytmów kompresji, aby znacznie zmniejszyć czas wykorzystania zasobów. Dzięki zastosowaniu kompresji do zasobów tekstowych strona internetowa mogą poświęcać mniej czasu na ładowanie zasobów, dzięki czemu użytkownicy będą mogli zobaczyć, szybciej niż przy użyciu kompresji.

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

Pierwszą omówioną tu techniką jest minifikacja. Mimo że minifikacja wyłącznie za pomocą algorytmu kompresji, to sposób na usunięcie zbędnych zbędne znaki używane w kodzie źródłowym, aby zasoby były bardziej czytelne ludzi. Jednak czytelność nie jest wymagana do utrzymania funkcjonalności. tego kodu źródłowego w witrynach produkcyjnych i może opóźniać wczytywanie w internecie.

Minifikacja to typ optymalizacji treści, który może znacznie zmniejszanie rozmiaru dostarczanych zasobów? Czy najlepiej stosować optymalizacje, w ramach procesu kompilacji i wdrażania. Na przykład moduły grupowania to często używanym oprogramowaniem, które automatycznie zmniejsza zasoby przed wdrożeniem nowego kodu produkcyjnego w witrynie.

Najlepszym sposobem na skompresowanie nadmiarowych lub niepotrzebnych danych jest ich wyeliminowanie. Nie możesz jednak usuwać po prostu dowolnych danych. Jednak w niektórych kontekstach mają wiedzę o formacie danych i jego właściwościach, możliwe jest znaczne zmniejszenie ładunku bez wpływu na jego 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>

Przyjrzyjmy się poprzedniemu fragmentowi kodu HTML i trzem różnym typom treści, zawiera:

1. Znaczniki HTML.
2. CSS do dostosowania prezentacji strony.
3. JavaScript wspomagający interakcje i inne zaawansowane funkcje stron.

Każdy z tych rodzajów treści podlega innym regułom m.in. treści, różne zasady określania komentarzy itd. Pytanie Pozostaje jednak pytanie, jak zmniejszyć rozmiar tej strony.

• Komentarze do kodu są bardzo przydatne dla programisty, ale przeglądarka nie potrzebuje ich! Usuwanie arkuszy CSS (/* ... */), HTML (<!-- ... -->) i JavaScript Komentarze (// ...) zmniejszają całkowity rozmiar przesyłanej strony oraz jej zasobów podrzędnych.
• „Inteligentny” Kompresor CSS może zauważyć, że używamy nieefektywnego sposobu definiują reguły dla interfejsu .awesome-container, a następnie zwiń obie deklaracje. w jeden bez wpływu na inne style, co pozwala zaoszczędzić więcej bajtów. Nad dużą reguły CSS, usunięcie tego typu nadmiarowości może dodać, ale nie zawsze którą można elastycznie stosować, ponieważ selektory są często powielane w różnych kontekstach, na przykład 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, taki sposób optymalizacji można zastosować równomiernie o ile spacje lub tabulatory nie będą konieczne, prezentacji – na przykład chcesz zachować pokoje w uruchomieniach tekstu w dokumencie HTML, ponieważ zapewniają one czytelność treści ale nie zobaczymy.

<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 ma 516–204 znaki, co co daje około 60% oszczędności. Przyznaję, że jest mało czytelne, ale nie musi być przydatne. Również nowoczesne metody programowania pozwalają zachować prawidłowo sformatowane i czytelne wersje kodu źródłowego od dobrze zoptymalizowanego kodu wysyłanego do środowiska produkcyjnego. Połączenie z map źródłowych – które w czytelny sposób przedstawiają przekształcone ułatwia rozwiązywanie problemów związanych z procesem produkcyjnym, mają dobre doświadczenia dla programistów, jednocześnie optymalizując wydajność z perspektywy użytkownika.

Poprzedni przykład ilustruje ważny punkt: produkty ogólne przeznaczenia kompresor – np. taki, który kompresuje dowolny tekst – potrafi całkiem nieźle skompresowała stronę, ale nigdy nie wiedziałaby, czy też usunąć komentarze, zwijać reguły CSS czy dziesiątki innych i optymalizacji. Dlatego wstępne przetwarzanie, minifikacja i inne mechanizmy optymalizacje są ważne.

Również omówione powyżej techniki można rozszerzyć poza tylko tekstowe. zasobów. Obrazy, filmy i inne typy treści zawierają własne formy metadanych i różnych ładunków. Na przykład za każdym razem, gdy zrobisz zdjęcie jego plik zazwyczaj zawiera wiele dodatkowych informacji: ustawienia lokalizacja itd. W zależności od aplikacji te dane mogą mieć kluczowe (np. w witrynie do udostępniania zdjęć). Mogą też one być całkowicie bezużyteczne. Ty powinien rozważyć, czy warto je usunąć. W praktyce metadane te mogą dodawać każdy obraz może mieć rozmiar do dziesiątek kilobajtów.

Pierwszym krokiem w optymalizacji efektywności komponentów jest tworzenie Warto przyjrzeć się różnym typom treści i zastanowić się, optymalizacje uwzględniające kontekst, które możesz zastosować, aby zmniejszyć ich rozmiar. Następnie – po wiesz już, czym są, zautomatyzuj te optymalizacje, dodając je w procesie kompilacji i publikacji, aby zapewnić zastosowanie optymalizacji. dla każdej nowej wersji produkcyjnej.

Kompresja tekstu za pomocą algorytmów kompresji

Następnym krokiem do zmniejszenia rozmiaru zasobów tekstowych jest zastosowanie algorytm kompresji. To idzie o krok dalej, intensywnie wyszukanie powtarzalnych wzorców w ładunkach tekstowych przed ich wysłaniem do użytkownika i dekompresowanie po tym, gdy trafią do przeglądarki użytkownika. prowadzi do dalszego i znacznego zmniejszenia tych zasobów, szybszego pobierania.

• gzip i Brotli to powszechnie używane algorytmy kompresji, które najlepiej sprawdzają się na zasoby tekstowe: CSS, JavaScript, HTML.
• Wszystkie nowoczesne przeglądarki obsługują kompresję gzip oraz Brotli i wyświetlają reklamy obsługę obu tych typów danych w nagłówku żądania HTTP Accept-Encoding.
• Konfiguracja serwera musi umożliwiać kompresję. Oprogramowanie serwerów WWW często umożliwia modułom skompresowanie zasobów tekstowych, domyślnie.
• Zarówno gzip, jak i Brotli można dostroić, aby poprawić współczynniki kompresji wyregulowanie poziomu kompresji. W przypadku programu gzip ustawienia kompresji: od 1–9, gdzie 9 to ocena najlepsza. W przypadku Brotli ten zakres wynosi od 0 do 11, przy czym 11 że jest najlepsza. Wyższe ustawienia kompresji wymagają jednak więcej czasu. Dla: zasobów skompresowanych dynamicznie – czyli w momencie żądania – ustawienia pośrodku zakresu dają zwykle najlepszy kompromis między współczynnikiem kompresji a prędkością. Kompresja statyczna jest jednak czyli gdy odpowiedź jest skompresowana z wyprzedzeniem i może być wykorzystywana dlatego używaj najbardziej agresywnych ustawień kompresji dostępnych dla każdego do algorytmu kompresji.
• Sieci dostarczania treści (CDN) zwykle oferują automatyczną kompresję odpowiednich zasobów. Sieci CDN mogą również zarządzać kompresją dynamiczną i statyczną na potrzeby co daje Ci jeden aspekt kompresji mniej zmartwień.

gzip i Brotli to popularne kompresory, które można zastosować do dowolnego strumienia B. W tajemnicy pamiętają niektóre z badanych wcześniej treści pliku, a następnie spróbować znaleźć i zastąpić zduplikowane fragmenty danych w efektywny sposób.

W praktyce zarówno gzip, jak i Brotli radzą sobie najlepiej w przypadku treści tekstowych, często osiągając nawet 70–90% przy większych plikach. Jednak uruchomienie tych zasobów algorytmów, które zostały już skompresowane przy użyciu alternatywnych algorytmów, co większość formatów graficznych wykorzystujących technikę bezstratnej lub stratnej kompresji znikoma lub zerowa poprawa.

Wszystkie nowoczesne przeglądarki reklamują obsługę plików gzip i Brotli Nagłówek żądania HTTP Accept-Encoding. Jednakże adres URL dostawcy usług hostingowych odpowiedzialnym za prawidłowe skonfigurowanie serwera WWW, aby skompresowany zasób, gdy klient o niego poprosi.

W powyższej tabeli przedstawiono oszczędności, jakie można uzyskać zarówno w przypadku kompresji Brotli, jak i gzip. kilka dobrze znanych bibliotek JavaScript. Oszczędności mogą wynosić od 65% do 65% 86%, w zależności od pliku i algorytmu. Dla porównania maksymalna do każdego pliku zastosowano poziom kompresji zarówno w przypadku formatu Brotli, jak i gzip. Wszędzie lepiej Brotli zamiast gzip.

Włączenie kompresji to jedna z najprostszych i najskuteczniejszych optymalizacji do wdrożenia. Jeśli witryna ich nie wykorzystuje, traci się możliwość to doskonała okazja, aby zwiększyć wygodę użytkowników. Na szczęście serwery zapewniają domyślne konfiguracje, które umożliwiają tę ważną optymalizację, a zwłaszcza sieci CDN, które bardzo skutecznie je implementują. równoważy szybkość i współczynnik kompresji.

Aby szybko sprawdzić kompresję, otwórz Narzędzia deweloperskie w Chrome, otwórz Sieć, wczytaj wybraną stronę i obserwuj samą dolną część w panelu sieci.

Podobnie jak w przypadku poprzedniego obrazu, zobaczysz następujący podział:

• Liczba żądań będąca liczbą wczytanych zasobów na potrzeby stronę.
• Rozmiar przeniesienia wszystkich żądań. Pokazuje to skuteczność kompresja zastosowana do dowolnego zasobu strony.
• Rozmiar zasobu wszystkich żądań. Odzwierciedla to wielkość zasobów są widoczne po zdekompresowaniu.

Wpływ na podstawowe wskaźniki internetowe

Poprawę skuteczności nie można zmierzyć, jeśli nie są dostępne dane, które odzwierciedlają: tych ulepszeń. Inicjatywa dotycząca podstawowych wskaźników internetowych ma na celu tworzenie i zwiększanie świadomości w zakresie danych, które odzwierciedlają rzeczywiste wrażenia użytkowników. Jest to sprzeczne z danymi – takimi jak na przykład prosty czas wczytywania strony – nie przekładają się w jednoznaczny sposób na jakość obsługi.

Jeśli zastosujesz optymalizacje opisane w tym przewodniku do zasobów na swoim wpływ na podstawowe wskaźniki internetowe może być różny, i odpowiednie dane. Jest jednak kilka sytuacji, w których zastosowanie tych optymalizacji może poprawić podstawowe wskaźniki internetowe witryny:

• Zminifikowane i skompresowane zasoby HTML mogą usprawnić że HTML, wykrywalność jego zasobów podrzędnych, a tym samym ich wczytywanie. Może to być korzystne w przypadku największego wyrenderowania treści strony (LCP). Chociaż wskazówki dotyczące zasobów, takie jak rel="preload", mogą mieć wpływ na a także wykrywalność zasobów, używanie zbyt wielu z nich może powodować problemy rywalizację o przepustowość łącza. Zapewniając odpowiedź HTML na żądanie nawigacji są skompresowane, zawarte w nich zasoby można wykryć tak szybko, jak to możliwe skaner wstępnego załadowania.
• Niektóre kandydaci LCP można również ładować wcześniej za pomocą kompresji. Dla: Na przykład obrazy SVG będące kandydatami LCP mogą mieć obciążenie zasobów czas trwania skrócony przez kompresję tekstową. To coś innego niż które można zoptymalizować w przypadku innych typów obrazów. jest nieskompresowana za pomocą innych metod kompresji, takich jak JPEG. korzysta z kompresji stratnej.
• Dodatkowo węzły tekstowe mogą być także kandydatami LCP. Jakie metody opisane w tym przewodniku zależy od tego, czy czcionki internetowej używasz w do Twoich stron internetowych. Jeśli korzystasz z czcionki internetowej, najlepiej ją zoptymalizować, . Jeśli jednak nie używasz czcionek internetowych, czcionki, które wyświetlają się bez wydłużania czasu wczytywania zasobów – zmniejszanie kompresja CSS skraca ten czas, co oznacza, że renderowanie potencjalne węzły tekstowe LCP mogą wystąpić wcześniej.

Podsumowanie

Sposób optymalizacji kodowania i przenoszenia zasobów tekstowych to punkt odniesienia ale to właśnie on ma ogromny wpływ na jego funkcjonowanie. Upewnij się, że robimy wszystko, co w naszej mocy, aby zasoby kwalifikujące się do minifikacji te optymalizacje przynoszą korzyści.

Co ważniejsze, zadbaj o to, aby te procesy były zautomatyzowane. Dla: minifikację, użyj kreatora pakietów, aby zastosować minifikację do kwalifikujących się zasobów. Sprawdź, czy że konfiguracja Twojego serwera WWW obsługuje kompresję, ale oprócz tego użyj która zapewnia najskuteczniejszą kompresję. Aby było to jak najprostsze, wykorzystują sieć CDN do automatyzacji kompresji, ponieważ nie tylko kompresują one zasobów, ale mogą to zrobić również bardzo szybko.

Aby uwzględnić te podstawowe koncepcje wydajności w witrynie, możesz zadbać o to, aby działania związane z optymalizacją skuteczności opiera się na solidnych podstawach i kolejnych optymalizacji. dobrych praktyk bazowych.