Kompresja Brotli: szybka alternatywa dla kompresji GZIP

Szybkość jest ważna dla każdej strony internetowej. W dążeniu do szybkiego czasu ładowania w sieci mamy do dyspozycji szereg różnych technologii, które mogą nam pomóc. Jednym z podejść jest zminimalizowanie kodu, którego będzie używać Twoja witryna, bez wpływu na jej funkcjonowanie. Kompresja GZIP jest jednym ze sposobów, aby to zrobić, ale kompresja Brotli jest alternatywną, raczkującą metodą, która przyciąga uwagę.

Jest to rozwiązanie opracowane przez Google, które ma zapewnić szereg korzyści w stosunku do kompresji GZIP (a także jako alternatywę). Szczegóły zawarte w tym artykule opiszą dokładnie to, co oferuje ta technologia, ale kompresja Brotli jest szybka i wydajna – co spełnia wszystkie wymagania potrzebne do jej zbadania.

W tym samouczku przyjrzymy się kompresji Brotli i pokażemy, jak sprawdzić, czy Twoja witryna z niej korzysta i jak ją włączyć, jeśli zajdzie taka potrzeba. Najpierw umieścimy Brotliego w przestrzeni algorytmu kompresji i porozmawiamy o tym, dlaczego chcesz go użyć zamiast innych rozwiązań.

Kompresja danych w Internecie

W swojej najbardziej podstawowej formie kompresja danych zajmuje kod strony internetowej lub aplikacji i minimalizuje rozmiar pliku. Daje to lżejsze pliki do poruszania się po sieci i skraca czas ładowania i renderowania witryny. Przekonasz się, że istnieje wiele sposobów kompresji danych w zależności od typu pliku, z którym pracujesz.

Powszechnym podejściem jest „minifikacja”. W tym miejscu algorytm pozbawia kod Twojej witryny niektórych zbędnych elementów. Chodzi o to, że aspekty takie jak wcięcia, komentarze, białe znaki i inne zwiększą rozmiary plików, a tym samym czas ładowania.

Usunięcie tych elementów nie wpływa na wrażenia użytkownika (UX) w większości sytuacji. Jednak ułatwia to komputerom, które muszą kompilować i renderować kod. Weźmy na przykład ten zestaw kodu:

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. */ require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

Powyższy kod wykorzystuje elementy takie jak spacje i powrót karetki, aby był czytelny dla człowieka, ale komputer nie potrzebuje ich do zrozumienia podstawowego kodu. Co więcej, te partie białych znaków i łamania wierszy zajmą cenne miejsce, które po usunięciu może zwiększyć wydajność.

Jeśli zminimalizujesz ten kod, wygląda to zupełnie inaczej:

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. * / require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

Jednak podstawy tego, co robi ten kod, są nadal takie same.

Przekonasz się, że inne typy plików mają sposoby na kompresję danych. Na przykład obrazy często wymagają dużej kompresji, aby zmniejszyć rozmiar bez znacznej degradacji samego obrazu:

Kompresja GZIP to standardowy sposób na zminimalizowanie rozmiaru pakietów plików — pomyśl o pakietach, takich jak pakiety ZIP lub Linux .tar . Ale do tej pory nie było realnej alternatywy. Porozmawiamy więcej o tym, dlaczego alternatywa powinna istnieć później, ale najpierw zapoznajmy się z „konkurencją” GZIP.

Kompresja Brotli

Krótko mówiąc, Broti to algorytm kompresji danych. Jeśli jednak to wszystko, co mielibyśmy do powiedzenia, nie byłoby powodu, aby to badać.

Zapewnia kompresję „bezstratną” i jest rozwijany przez Google na licencji MIT. Firma często znajduje się w czołówce technologii internetowych, więc nie jest niespodzianką, że Brotli stara się wykorzystać to, co robi GZIP, ulepszyć i zaoferować użytkownikom i witrynom lepsze wrażenia.

Kompresja Brotli wykorzystuje te same podstawowe technologie, co kompresja GZIP, a mianowicie:

• Algorytm LZ77
• Kodowanie i dekodowanie Huffmana

W rzeczywistości, jeśli połączysz te dwie technologie, otrzymasz format DEFLATE , który służy jako podstawa kompresji GZIP i Brotli. To jest coś, w co wchodzimy z niezwykłą głębią w naszym poście na temat kompresji GZIP.

Krótko mówiąc, nieskompresowane pliki przechodzą przez algorytmy LZ77 i Huffmana w ramach procesu DEFLATE , aby skompresować je do formatu Brotli. Stamtąd proces INFLATE ponownie rozpakuje pliki, gdy będzie to konieczne.

Chociaż Brotli jest obecnie głównym pretendentem do GZIP, istnieją inne podobne technologie, które również wykorzystują DEFLATE . W następnej sekcji porozmawiamy o tym, co wyróżnia Brotli.

Kompresja Brotli a kompresja GZIP

Jak wspomniano, zarówno Brotli, jak i GZIP używają metody DEFLATE do kompresji (i dekompresji) danych. To może zdezorientować wiele osób, ponieważ samo to nie gwarantuje zmiany.

Jednak Google opiera się na DEFLATE , aby oferować ulepszone techniki i kompresować dane do większego i szybszego standardu.

Jak Brotli używa słowników do poprawy kompresji danych

Jednym z aspektów technicznych formatów kompresji danych jest sposób, w jaki kompresja Brotli wykorzystuje istniejący znany język i tekst w słownikach danych do zastosowania swojego algorytmu.

Deweloperzy będą używać słownika par klucz-wartość do przechowywania danych, ponieważ jest on wydajny, elastyczny i skalowalny. Oto jak wyglądałby słownik PHP (nazywany „tablicą”):

 $cats = get_categories( array( 'taxonomy' => 'link_category', 'hierarchical' => 0, 'include' => $link_cat, ) );

Chociaż GZIP nie używa słowników, Brotli używa dwóch .

Słownik statyczny Brotli

Pierwszy to statyczny (tj. predefiniowany) słownik wspólnych terminów kodowych, który działa jako odniesienie dla tekstu HTML, CSS i JavaScript.

Istnieje ponad 13 000 słów w sześciu różnych językach, a Brotli użyje ich jako odniesień do punktów w kodzie. Nie jest to dokładna analogia, ale przypomina sposób, w jaki hak WordPress odwołuje się do większego zestawu kodu.

W związku z tym koder nie musi przeszukiwać kodu bajt po bajcie. Zamiast tego może działać na odnośnikach, wyciągnąć definicję ze słownika i przejść do następnego.

Znajdziesz również w słowniku wyrażenia z prawdziwego świata, a także kod, który nie jest często poddawany kompresji. Pomaga to niektórym tagom, takim jak <HTML> i parametrom, takim jak type="text/javascript" , uzyskać pewną kompresję i zapewnić większe korzyści.

W słowniku są również pewne „transformacje”: częściowe, niekompletne i inne rodzaje fraz, które z nowym prefiksem, sufiksem lub wielkością liter stają się zupełnie nowym słowem — na przykład „Praca” przekształca się w „Praca” lub „html ” na „HTML”.

Słownik dynamiczny Brotli

Słownik dynamiczny analizuje zawartość i kod w źródle, co jest dobre w przypadku mniejszych urządzeń, ale nie tak dobre w przypadku większych plików. Nazywa się to również „oknem przesuwnym” i może mieć rozmiar do 16 MB. W tym miejscu algorytm kompresji „buforuje” niektóre z najnowszych danych w celu odniesienia się do nich. Jest ultradynamiczny, ponieważ ciągle się zmienia.

Jeśli porównasz to z przesuwanym oknem GZIP o wielkości około 32 KB, zobaczysz, że zakres parsowania i kompresji w czasie rzeczywistym jest ogromny. W rzeczywistości większość typowych praktyk wykorzystuje przesuwane okno Brotli o wielkości około 4 MB, co nadal jest gigantyczne w porównaniu z konkurencyjnymi algorytmami.

Kompresja Brotli a kompresja GZIP: wydajność i wsparcie

Jeśli chodzi o czyste liczby użytkowników, kompresja GZIP nadal jest numerem jeden. Jednak kompresja Brotli ma coraz większe zastosowanie każdego dnia. Jest to częściowo spowodowane szerszymi działaniami adaptacyjnymi głównych przeglądarek; pomaga również pojawienie się przeglądarek opartych na Chromium.

Witryna Can I Use… rejestruje, jakie technologie są stosowane przez przeglądarki, i udostępnia pewną historię. Ta strona odnotowuje, że ponad 95% przeglądarek używa kompresji Brotli przy obecnym pisaniu, w tym we wszystkich głównych wersjach.

W naszym artykule na temat kompresji GZIP zauważyliśmy test porównawczy, w którym Brotli miał lepszy współczynnik kompresji w porównaniu z konkurencyjnymi algorytmami, ale miał opóźnienia w czasie kompresji i dekompresji:

Jednak testy Squash Benchmark pokazują inną historię — bardziej zniuansowaną. Prawdziwym wnioskiem jest to, że ogólnie Brotli jest bardziej elastyczny niż GZIP, z ogólnie wyższym współczynnikiem kompresji.

Oto podsumowanie ustaleń Squash Benchmarks:

• Brotli ma lepszy współczynnik kompresji (tzn. tworzy mniejsze skompresowane pliki) na każdym poziomie kompresji.
• Podczas gdy GZIP przez większość czasu pokonuje Brotli pod względem szybkości, poziom, który kompresujesz, wpływa na wyniki, które zobaczysz.

Podział Paula Calvano dostarcza dalszych szczegółów, ale sedno polega na tym, że Brotli potrzebuje więcej mocy procesora, aby zapewnić większy współczynnik kompresji plików. Widać to zarówno na najwyższym, jak i najniższym poziomie kompresji. Testy porównawcze Cloudflare potwierdzają to: znacznie mniejsze pliki, z bliższymi porównywalnymi liczbami prędkości kompresji.

Należy również wziąć pod uwagę, że niektóre narzędzia testowe, takie jak Pingdom i niektóre sieci dostarczania treści (CDN), nie obsługują jeszcze Brotli. Może to wypaczyć dane gromadzone przez innych na temat działania Brotli. Możesz zobaczyć „fałszywe negatywy”, jeśli uruchomisz testy: wyższe dane dotyczące szybkości strony, które ignorują zastosowaną kompresję plików.

Korzyści z kompresji Brotli

Jak dotąd jest wiele informacji na temat kompresji Brotli. Możemy jednak podsumować, co musisz wiedzieć o tym, dlaczego powinieneś wybrać Brotli zamiast GZIP:

1. Wykorzystuje tę samą technologię, której używa GZIP i wzbogaca ją nowoczesnymi metodami.
2. Oparte na słowniku parsowanie Brotli oznacza, że ​​może on skompresować więcej plików na głębszy poziom.
3. Chociaż Brotli potrzebuje większej mocy obliczeniowej w porównaniu z GZIP, wyniki oznaczają mniejsze pliki.
4. Na poziomach kompresji, z których korzysta większość hostów internetowych — coś średniego, takiego jak poziom czwarty lub piąty — Brotli działa lepiej niż GZIP bez przerywania potu.
5. Przekonasz się, że Brotli ma prawie uniwersalne wsparcie w różnych przeglądarkach, jeśli nie niektóre z narzędzi testowych, do których jesteś przyzwyczajony.
6. Brotli jest darmowy i open source. Jest to zaleta, jeśli używasz CDN zgodnego z Broti, takiego jak Cloudflare.

Warto zauważyć, że Cloudflare używa kompresji Brotli na wszystkich swoich serwerach. W rzeczywistości wykorzystuje zmodyfikowaną i zoptymalizowaną wersję Brotli, aby zapewnić dalsze korzyści w zakresie szybkości i dostarczania plików.

Zapisz się do newslettera

Chcesz wiedzieć, jak zwiększyliśmy ruch o ponad 1000%?

Dołącz do ponad 20 000 innych osób, które otrzymują nasz cotygodniowy biuletyn z poufnymi wskazówkami dotyczącymi WordPressa!

Zapisz się teraz

Ponieważ Kinsta oferuje integrację Cloudflare we wszystkich planach, każda hostowana witryna domyślnie używa Brotli. To tylko jeden z powodów, dla których Kinsta jest jednym z wiodących na rynku i najlepszych dostawców usług hostingowych.

Jak sprawdzić, czy Twoja witryna korzysta z kompresji Brotli?

Ponieważ kompresja Brotli nie jest jeszcze standardowa (chociaż już prawie istnieje), prawdopodobnie będziesz chciał wiedzieć, czy Twoja witryna jej używa. Jest kilka sposobów, aby to rozgryźć.

1. Użyj narzędzia online

Najprostszym sposobem sprawdzenia, czy Twoja witryna korzysta z kompresji Brotli, jest skorzystanie z narzędzia online. Chociaż jest kilka do wyboru, będziesz potrzebować czegoś szybkiego i prostego w użyciu, które zapewni również wiele informacji o konfiguracji.

Gift of Speed ​​to nasz wybór, aby sprawdzić kompresję Brotli.

Określi, czy Twoja witryna korzysta z GZIP, Brotli, czy w ogóle nie używa kompresji, i dostarczy kilka innych wskaźników, które pomogą Ci zdecydować, co dalej. Te metryki zapewniają ważny wgląd, ponieważ nie chcesz tylko brać pod uwagę, czy serwer Twojej witryny używa odpowiedniego „smaku” kompresji.

Istnieje wiele elementów składających się na witrynę internetową, a nawet biblioteki i zależności innych firm. Możesz wybrać obsługę ich za pomocą CDN, a jeśli tak, to musi również zastosować kompresję Brotli, aby uzyskać najlepszą możliwą wydajność.

Jeśli używasz Gift Of Speed ​​do testowania poszczególnych zasobów, możesz spojrzeć na wartość serwera, aby zobaczyć, w jaki sposób jest obsługiwana.

Wszystkie witryny Kinsta korzystają z usługi Kinsta CDN opartej na Cloudflare. W związku z tym każda witryna będzie również korzystać z kompresji Brotli w całym łańcuchu i architekturze serwera.

2. Sprawdź za pomocą narzędzi programistycznych przeglądarki

Większość programistów wie, że przeglądarka oferuje fantastyczne narzędzia, które pomogą Ci we wszelkiego rodzaju dochodzeniach i rozwiązywaniu problemów związanych z siecią. Jednym szybkim sprawdzeniem, które możesz wykonać, jest to, czy Twoja witryna (lub określony zasób) korzysta z kompresji Brotli.

W przypadku wszystkich głównych przeglądarek, takich jak Brave, Edge, Firefox lub Chrome, możesz przejść do ekranu Sieć > Wszystkie .

Na początku nie zobaczysz niczego związanego z nagłówkami treści — musisz wybrać zasób lub żądanie z lewej strony. Jeśli będziesz dalej przeglądać i przewijać listę, zobaczysz panel, który domyślnie zawiera informacje nagłówków .

Tutaj przewiń dane wyjściowe, aż zobaczysz content-encoding: br :

W skrócie: jeśli widzisz content-encoding: br , oznacza to, że Brotli jest aktywny dla tej witryny.

Jak włączyć kompresję Brotli dla swojej witryny?

W ostatnich kilku sekcjach pokażemy Ci kilka różnych sposobów włączenia kompresji Brotli dla Twojej witryny. Pierwszym będzie podejście, które zalecamy w przypadku większości witryn WordPress, które nie używają Kinsta — a ostatnie jest zalecane dla każdej witryny czytającej pierwsze podejście!

1. Użyj wtyczki WordPress

Prawie każda witryna WordPress będzie korzystała z co najmniej jednej wtyczki — często więcej w zależności od funkcjonalności, której potrzebuje witryna. Buforowanie to jeden przypadek użycia wtyczek i jest ich wiele. Jednak nie wszystkie pozwolą Ci włączyć kompresję Brotli, więc musisz wybrać mądrze i być przygotowanym na zmianę preferowanego rozwiązania.

Przed wprowadzeniem jakichkolwiek zmian w witrynie pamiętaj, aby wykonać pełną kopię zapasową na wypadek konieczności przywrócenia jej później. W przypadku tej metody użyjemy W3 Total Cache, ponieważ znalezienie odpowiedniego ustawienia jest proste.

Musisz przejść do strony Wydajność > Pamięć podręczna przeglądarki w WordPress:

Ten ekran pokazuje dwa ustawienia. Wybierz opcję Włącz kompresję HTTP (brotli) :

Jednak nie będzie to odpowiednie dla każdej witryny i sytuacji. Na przykład Kinsta optymalizuje swój serwer pod kątem szybkiego, wydajnego i niezawodnego hostingu. W związku z tym istnieje wiele wtyczek, których nie będziesz potrzebować, a niektóre inne są nawet zakazane w witrynach Kinsta.

W takich przypadkach będziesz chciał zastosować inne podejście.

2. Włącz Brotli na serwerze

Jeśli chodzi o wybór typu serwera, Nginx vs Apache to długa bitwa, którą (na razie) wygrywa ten pierwszy. Niezależnie od tego oba typy serwerów mogą włączyć kompresję Brotli i istnieją różne podejścia do każdego z nich.

Zanim przyjrzysz się podejściu ręcznemu, musisz znać kilka warunków wstępnych:

• Będziesz chciał zrozumieć, jak uzyskać dostęp do plików konfiguracyjnych dla konkretnego serwera.
• Znajomość linii poleceń będzie bardzo korzystna, zwłaszcza jeśli chodzi o serwery Apache. Aby uruchomić dowolne polecenia, musisz być użytkownikiem root z uprawnieniami sudo .
• Możesz potrzebować edytora tekstu, ale w przypadku szybkich zmian, takich jak ten, powinieneś być w porządku.
• W niektórych przypadkach będziesz potrzebować poświadczeń logowania jako użytkownik bezpiecznej powłoki (SSH) na samym serwerze. Możesz je znaleźć w panelu sterowania hostingu lub skontaktować się z pomocą techniczną, aby zapytać.

Jeśli masz jakiekolwiek wątpliwości dotyczące ręcznego podejścia, zalecamy zapoznanie się z inną opcją lub skontaktowanie się z gospodarzem w celu uzyskania pomocy. Niezależnie od tego, przedstawimy krótki przegląd procesu dla każdego serwera po kolei, zaczynając od Nginx.

Nginx

Aby włączyć kompresję Brotli na serwerach Nginx, musisz najpierw znaleźć plik nginx.conf . Będzie to jedna z kilku lokalizacji:

• /usr/local/nginx/conf
• /etc/nginx
• /usr/local/etc/nginx

Po otwarciu pliku dodaj na dole następujące elementy:

 brotli on; brotli_static on; brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance. brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

Ten pakiet włączy Brotli i użyje go do obsługi plików statycznych. Ustawienie brotli_comp_level to ustawienie, które możesz zmienić w zależności od przypadku użycia i potrzeb. Wyższe liczby zapewniają lepszą równowagę kompresji przy mniej wydajnej witrynie.

Apache

Ponieważ Apache jest elastyczny, jeśli chodzi o konfiguracje, możesz włączyć kompresję Brotli bez zbytniego zamieszania.

Aby to zrobić, wykonaj następujące kroki:

1. Zaloguj się do serwera za pomocą aplikacji wiersza polecenia lub terminala jako użytkownik root sudo .
2. Uruchom polecenie a2enmod brotli aby włączyć kompresję.
3. W ramach konfiguracji Apache VirtualHost lub serwera dodaj AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript , aby ustawić odpowiednie typy plików, które chcesz skompresować.

Chociaż Apache nie obsługuje kompresji statycznej, możesz zmienić poziom kompresji Brotli, który oferujesz, korzystając z BrotliCompressionQuality LEVEL-NUMBER . Musisz jednak zastąpić symbol zastępczy „LEVEL-NUMBER” liczbą z zakresu 1–11.

3. Użyj wspierającego hosta internetowego

Najprostszym sposobem włączenia kompresji Brotli w witrynie jest upewnienie się, że host robi to domyślnie. Kinsta oferuje kompresję Brotli w standardzie dzięki integracji z CDN Cloudflare.

Kinsta CDN jest zasilany przez infrastrukturę Cloudflare we wszystkich planach — więc każda witryna korzysta z kompresji Brotli bez konieczności jej włączania.

Będziesz chciał sprawdzić, czy wybrany host oferuje kompresję Brotli i na jakim poziomie musisz ją skonfigurować. Aby uruchomić najbardziej wydajną, stabilną i bezpieczną witrynę, niezbędny jest dobry hosting.

Streszczenie

Kompresja danych jest niezbędnym elementem tworzenia i korzystania z nowoczesnej sieci. Rozmiary plików mogą gwałtownie wzrosnąć ze względu na bogate i złożone typy plików, których będziesz używać do poskładania strony internetowej. Wszystkie wymagają jakiejś formy kompresji.

Typowym podejściem do tej pory był GZIP, ale jest nowy dzieciak na bloku.

Kompresja Brotli opiera swoją technologię na tych samych podstawach, co GZIP, ale zawiera pewne korzyści zwiększające wydajność. Jak wspomnieliśmy, używa mapowania kontekstu, aby szybciej przetworzyć żądanie kompresji, oraz słownika, który wykorzystuje populację dynamiczną. Jest to znacznie większe niż to, co może zaoferować GZIP, a także pozwala użytkownikom mobilnym również korzystać z kompresji.

Dobrą wiadomością jest to, że każda witryna Kinsta może skorzystać z kompresji Brotli dzięki naszej wyjątkowej integracji Cloudflare. Oznacza to, że Twoja witryna hostowana przez Kinsta jest szybsza niż konkurencja korzystająca z GZIP i szybko się ładuje na mniejszych urządzeniach.

Masz pytania dotyczące kompresji Brotli? Zapraszam do zadawania pytań w sekcji komentarzy poniżej!