Compressão Brotli: Uma Alternativa Rápida à Compressão GZIP

A velocidade é importante para qualquer site. Na busca da web por tempos de carregamento rápidos, temos várias tecnologias diferentes para nos ajudar. Uma abordagem é minimizar o código subjacente que seu site usará sem afetar o funcionamento dele. A compactação GZIP é uma maneira de fazer isso, mas a compactação Brotli é um método alternativo incipiente que chama a atenção.

É uma solução desenvolvida pelo Google que procura fornecer vários benefícios em relação à compactação GZIP (bem como uma alternativa à). Os detalhes neste artigo irão explicar exatamente o que a tecnologia oferece, mas a compressão Brotli é rápida e eficiente – o que preenche todas as caixas que você precisa para investigá-la.

Para este tutorial, examinaremos a compactação Brotli e mostraremos como verificar se seu site a usa e como habilitá-la, se necessário. Primeiro, vamos colocar Brotli dentro do espaço do algoritmo de compressão e falar sobre por que você gostaria de usá-lo sobre outras soluções.

Compressão de dados para a Web

Em sua forma mais básica, a compactação de dados pega o código de um site ou aplicativo e minimiza o tamanho do arquivo. Isso oferece arquivos mais leves para se mover na Web e reduz o tempo necessário para carregar e renderizar um site. Você descobrirá que há muitas maneiras de compactar os dados, dependendo do tipo de arquivo com o qual está trabalhando.

Uma abordagem comum é a “minificação”. É aqui que um algoritmo retira do código do seu site alguns de seus elementos supérfluos. A ideia é que aspectos como recuos, comentários, espaços em branco e outros aumentem o tamanho dos arquivos e, portanto, os tempos de carregamento.

A remoção desses elementos não afeta a experiência do usuário (UX) na maioria das situações. No entanto , torna as coisas mais simples para os computadores que precisam compilar e renderizar o código. Por exemplo, pegue este conjunto de códigos:

 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' );

O código acima usa elementos como espaços e retornos de carro para torná-lo legível, mas um computador não precisa deles para entender o código principal. Além disso, esses lotes de espaços em branco e quebras de linha ocuparão um espaço precioso que, removido, pode aumentar o desempenho.

Se você minimizar esse código, ele ficará completamente diferente:

 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' );

No entanto, os fundamentos do que esse código faz ainda são os mesmos.

Você descobrirá que outros tipos de arquivo têm maneiras de compactar dados. Por exemplo, as imagens geralmente precisam de muita compactação para reduzir o tamanho sem muita degradação da própria imagem:

A compactação GZIP é uma maneira padrão de minimizar o tamanho dos pacotes de arquivos — pense em pacotes como pacotes ZIP ou Linux .tar . Mas até agora não havia alternativas reais. Falaremos mais sobre por que uma alternativa deve existir mais tarde, mas primeiro vamos apresentá-lo ao “concorrente” do GZIP.

Compressão Brotli

Em poucas palavras, Broti é um algoritmo de compressão de dados. No entanto, se isso é tudo o que temos a dizer, não haveria razão para investigá-lo.

Ele fornece compactação “sem perdas” e é desenvolvido pelo Google sob uma licença do MIT. A empresa geralmente está na vanguarda da tecnologia de avanço da Web, portanto, não é surpresa que a Brotli procure aproveitar o que o GZIP faz, melhorá-lo e oferecer uma experiência aprimorada aos usuários e sites.

A compactação Brotli usa as mesmas tecnologias básicas básicas que a compactação GZIP, a saber:

• O algoritmo LZ77
• Codificação e decodificação de Huffman

Na verdade, se você combinar essas duas tecnologias, obterá o formato DEFLATE que serve como base para as compactações GZIP e Brotli. É algo que abordamos com extrema profundidade em nosso post sobre compressão GZIP.

Em resumo, os arquivos descompactados são executados pelos algoritmos LZ77 e Huffman como parte do processo DEFLATE para comprimi-los em um formato Brotli. A partir daí, um processo INFLATE irá descompactar os arquivos novamente quando necessário.

Embora o Brotli seja atualmente o principal concorrente do GZIP, existem outras tecnologias semelhantes por aí que também usam o DEFLATE . Na próxima seção, falaremos sobre o que faz o Brotli se destacar.

Compressão Brotli vs Compressão GZIP

Conforme mencionado, tanto o Brotli quanto o GZIP usam o método DEFLATE para compactar (e descompactar) dados. Isso pode confundir muitas pessoas, porque isso por si só não garante uma transição.

No entanto, o Google está se baseando no DEFLATE para oferecer técnicas aprimoradas e compactar dados para um padrão maior e mais rápido.

Como o Brotli usa dicionários para melhorar a compactação de dados

Um aspecto técnico dos formatos de compactação de dados é a maneira como a compactação Brotli usa o idioma e o texto conhecidos existentes nos dicionários de dados para empregar seu algoritmo.

Os desenvolvedores usarão um dicionário de pares chave-valor para armazenar dados, pois é eficiente, flexível e escalável. Veja como seria um dicionário PHP (chamado de “array”):

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

Enquanto o GZIP não usa dicionários, o Brotli usa dois arquivos .

Dicionário Estático de Brotli

O primeiro é um dicionário estático (ou seja, pré-definido) de termos de código comuns que atuam como uma referência para o texto HTML, CSS e JavaScript.

Existem mais de 13.000 palavras em seis idiomas diferentes, e Brotli as usará como referência a pontos no código. Não é uma analogia exata, mas é semelhante à maneira como um gancho do WordPress faz referência a um conjunto maior de código.

Como tal, o codificador não precisa filtrar o código byte por byte. Em vez disso, ele pode agir nas referências, extrair a definição do dicionário e passar para a próxima.

Você também descobrirá que existem frases do mundo real dentro do dicionário, bem como código que muitas vezes não veria compressão. Isso ajuda algumas tags como <HTML> e parâmetros como type="text/javascript" a obter alguma compactação e fornecer alguns ganhos maiores.

Existem também algumas “transformações” dentro do dicionário: frases parciais, incompletas e outros tipos de frases que com um novo prefixo, sufixo ou caso tornam-se uma palavra totalmente nova – por exemplo, “Work” transformando-se em “Working” ou “html ” para “HTML”.

Dicionário dinâmico de Brotli

O dicionário dinâmico analisa o conteúdo e o código na fonte, o que é bom para dispositivos menores, mas não tão bom para arquivos maiores. Também é chamada de “janela deslizante” e pode ter até 16 MB de tamanho. É aqui que o algoritmo de compactação 'armazena em cache' alguns dos dados mais recentes para referenciá-los. É ultra-dinâmico, pois muda constantemente.

Se você comparar isso com a janela deslizante de GZIPs de cerca de 32 KB, verá que o escopo para análise e compactação em tempo real é enorme. Na verdade, as práticas mais comuns usam uma janela deslizante Brotli de cerca de 4 MB, que ainda é gigantesca em comparação com algoritmos concorrentes.

Compressão Brotli vs Compressão GZIP: Desempenho e Suporte

Quando se trata de números de usuários puros, a compactação GZIP ainda é a número um. No entanto, a compactação Brotli vê mais uso a cada dia. Isso se deve em parte a medidas de adoção mais amplas pelos principais navegadores; a ascensão dos navegadores baseados no Chromium também ajuda.

O site Can I Use… registra quais tecnologias os navegadores adotam e fornece uma espécie de histórico. Este site observa que mais de 95% dos navegadores usam a compactação Brotli na redação atual, incluindo todas as versões principais.

Em nosso artigo de compactação GZIP, observamos um teste de benchmark em que o Brotli teve uma melhor taxa de compactação em comparação com algoritmos concorrentes, mas ficou para trás no tempo de compactação e descompactação:

No entanto, os testes do Squash Benchmark mostram uma história diferente – uma que é mais sutil. A verdadeira vantagem é que, no geral, o Brotli é mais flexível que o GZIP, com uma taxa de compactação geralmente mais alta.

Aqui está o resumo das descobertas do Squash Benchmarks:

• Brotli tem a melhor taxa de compactação (ou seja, produz arquivos compactados menores) em todos os níveis de compactação.
• Embora o GZIP supere o Brotli em velocidade na maioria das vezes, o nível que você compacta em fatores nos resultados que você verá.

O detalhamento de Paul Calvano fornece mais detalhes, mas o ponto crucial é que Brotli precisa de mais poder de CPU para fornecer um fator maior de compactação de arquivos. Isso é exibido nos níveis de compactação mais altos e mais baixos. O benchmarking da Cloudflare confirma isso: arquivos muito menores, com números de velocidade de compactação comparativos mais próximos.

Além disso, considere que algumas ferramentas de teste como o Pingdom e algumas redes de entrega de conteúdo (CDNs) ainda não suportam o Brotli. Isso pode distorcer os dados que outros coletam sobre como o Brotli opera. Você pode ver “falsos negativos” se executar testes: números de velocidade de página mais altos que ignoram a compactação de arquivo que você emprega.

Benefícios da compressão Brotli

Há muitas informações a serem levadas em consideração sobre a compactação Brotli até agora. No entanto, podemos resumir o que você precisa saber sobre por que você deve escolher o Brotli em vez do GZIP:

1. Ele usa a mesma tecnologia que o GZIP usa e o aprimora com métodos modernos.
2. A análise baseada em dicionário do Brotli significa que ele pode compactar mais de seus arquivos em um nível mais profundo.
3. Enquanto o Brotli precisa de mais poder computacional comparado ao GZIP, os resultados significam arquivos menores.
4. Nos níveis de compactação que a maioria dos hosts da Web usa - algo intermediário, como o nível quatro ou cinco - o Brotli tem um desempenho melhor do que o GZIP sem suar a camisa.
5. Você descobrirá que o Brotli tem suporte quase universal em todos os navegadores, se não em algumas das ferramentas de benchmark com as quais você está acostumado.
6. Brotli é gratuito e de código aberto. Isso é uma vantagem se você usar uma CDN compatível com Broti, como Cloudflare.

Vale a pena notar que a Cloudflare usa a compactação Brotli em todos os seus servidores. Na verdade, ele usa uma versão modificada e otimizada do Brotli para oferecer mais ganhos em relação à velocidade e entrega de arquivos.

Como Kinsta oferece integração Cloudflare em todos os planos, cada site hospedado usa Brotli por padrão. Esta é apenas uma das razões pelas quais Kinsta é um dos melhores e líderes de mercado em provedores de hospedagem.

Como verificar se seu site usa compactação Brotli

Como a compactação Brotli ainda não é padrão (embora esteja quase lá), você provavelmente desejará saber se seu site a usa. Existem algumas maneiras de descobrir isso.

1. Use uma ferramenta online

A maneira mais simples de verificar se seu site usa compactação Brotli é por meio de uma ferramenta online. Embora existam alguns para escolher, você desejará algo rápido e simples de usar que também forneça várias informações sobre sua configuração.

Gift of Speed ​​é nossa escolha para verificar a compactação de Brotli.

Ele determinará se seu site usa GZIP, Brotli ou nenhuma compactação e fornecerá algumas outras métricas para ajudá-lo a decidir o que fazer em seguida. Essas métricas oferecem informações importantes, porque você não quer apenas considerar se o servidor do seu site usa o “sabor” correto de compactação.

Existem muitos elementos que compõem um site e até bibliotecas e dependências de terceiros. Você pode optar por servi-los usando um CDN e, em caso afirmativo, isso também precisa empregar a compactação Brotli para obter o melhor desempenho possível.

Se você usar o Gift Of Speed ​​para testar ativos individuais, poderá dar uma olhada no valor do servidor para ver como ele é servido.

Todos os sites da Kinsta usam a Kinsta CDN da Cloudflare. Como tal, todos os sites também usarão a compactação Brotli em toda a cadeia e na arquitetura do servidor.

2. Verifique usando as ferramentas de desenvolvedor do seu navegador

A maioria dos desenvolvedores saberá que um navegador oferece algumas ferramentas fantásticas para ajudá-lo com todos os tipos de investigação e solução de problemas relacionados à web. Uma verificação rápida que você pode fazer é se o seu site (ou um ativo específico) usa a compactação Brotli.

Para todos os principais navegadores, como Brave, Edge, Firefox ou Chrome, você pode acessar a tela Rede > Toda a tela.

A princípio, você não verá nada relacionado aos cabeçalhos de conteúdo — você precisará selecionar um ativo ou solicitação do lado esquerdo. Se você continuar procurando e rolando para baixo na lista, verá um painel aberto que tem como padrão as informações de cabeçalhos .

Aqui, role a saída até ver a content-encoding: br :

Resumindo: Se você vir content-encoding: br , isso indica que o Brotli está ativo para esse site.

Como habilitar a compactação Brotli para seu site

Nestas seções finais, mostraremos várias maneiras diferentes de habilitar a compactação Brotli para seu site. A primeira será a abordagem que recomendamos para a maioria dos sites WordPress que não usam Kinsta - e a última é o que recomendamos para todos os sites que lêem a primeira abordagem!

1. Use um plug-in do WordPress

Quase todos os sites do WordPress usarão pelo menos um plug-in – geralmente mais, dependendo da funcionalidade que o site precisa. O cache é um caso de uso para plugins, e há muitos por aí. No entanto, nem todos permitirão que você ative a compactação Brotli, portanto, você precisará escolher com sabedoria e estar preparado para alternar sua solução preferida.

Antes de realizar qualquer alteração em um site, lembre-se de fazer um backup completo caso precise restaurar posteriormente. Para este método, usaremos o W3 Total Cache porque é fácil encontrar a configuração correta.

Você precisará ir para a página Desempenho > Cache do navegador no WordPress:

Esta tela mostra duas configurações. O que você vai querer escolher é Enable HTTP (brotli) Compression :

No entanto, isso não será adequado para todos os sites e situações. Por exemplo, Kinsta otimiza seu servidor para hospedagem rápida, de alto desempenho e confiável. Como tal, existem vários plugins que você não precisará, e alguns outros são até proibidos de serem usados ​​em sites Kinsta.

Nesses casos, convém adotar outra abordagem.

2. Habilite o Brotli no Servidor

Quando se trata de escolher um tipo de servidor, Nginx vs Apache é uma batalha de longa data que (por enquanto) o primeiro está vencendo. Independentemente disso, ambos os tipos de servidor podem habilitar a compactação Brotli e há abordagens diferentes para cada um.

Antes de analisar a abordagem manual, existem alguns pré-requisitos que você deve saber:

• Você vai querer entender como acessar seus arquivos de configuração para seu servidor específico.
• O conhecimento da linha de comando será benéfico, especialmente quando se trata de servidores Apache. Para executar qualquer comando, você precisará ser um usuário root com privilégios sudo .
• Você pode precisar de um editor de texto, mas para alterações rápidas como essa, você deve estar bem.
• Em alguns casos, você precisará de suas credenciais de login como usuário de shell seguro (SSH) no próprio servidor. Você pode encontrá-los em seu painel de controle de hospedagem ou entrar em contato com o suporte para perguntar.

Se você tiver alguma dúvida sobre a abordagem manual, recomendamos que você procure outra opção ou entre em contato com seu host para obter ajuda. Independentemente disso, daremos uma breve visão geral do processo para cada servidor, começando pelo Nginx.

Nginx

Para habilitar a compactação Brotli em servidores Nginx, primeiro você precisa encontrar o arquivo nginx.conf . Será um dos poucos locais:

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

Quando você tiver o arquivo aberto, adicione o seguinte na parte inferior:

 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;

Este conjunto ativará o Brotli e o usará para servir arquivos estáticos. A configuração brotli_comp_level pode ser alterada dependendo do seu caso de uso e necessidades. Números mais altos oferecem melhor compactação balanceada com um site com menos desempenho.

Apache

Como o Apache é flexível quando se trata de configurações, você pode habilitar a compactação Brotli sem muito barulho.

Para fazer isso, siga estas etapas:

1. Faça login no seu servidor usando um prompt de comando ou aplicativo Terminal, como um usuário root sudo .
2. Execute o comando a2enmod brotli para ativar a compactação.
3. No Apache VirtualHost ou na configuração do seu servidor, adicione a AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript line para definir os tipos de arquivo corretos que você deseja compactar.

Embora o Apache não suporte compactação estática, você pode alterar o nível de compactação Brotli que oferece usando a BrotliCompressionQuality LEVEL-NUMBER . No entanto, você precisará substituir o espaço reservado “LEVEL-NUMBER” por um número entre 1 e 11.

3. Use um host de suporte da Web

A maneira mais direta de habilitar a compactação Brotli para seu site é garantir que seu host faça isso por padrão. Kinsta oferece compressão Brotli como padrão graças à sua integração com o CDN da Cloudflare.

A Kinsta CDN é alimentada pela infraestrutura da Cloudflare em todos os planos — portanto, cada site usa a compactação Brotli sem que você precise habilitá-la.

Você desejará verificar se o host escolhido oferece compactação Brotli e em que nível você precisa configurá-lo. Para executar o site com melhor desempenho, estável e seguro, uma boa hospedagem é essencial.

Resumo

A compactação de dados é um componente necessário para desenvolver e usar a web moderna. Os tamanhos de arquivo podem disparar devido aos tipos de arquivo ricos e complexos que você usará para montar um site. Todos eles precisam de alguma forma de compressão.

A abordagem típica tem sido GZIP até agora, mas há um novo garoto no bloco.

A compactação Brotli baseia sua tecnologia na mesma base do GZIP, mas inclui alguns benefícios de aprimoramento de desempenho. Conforme discutimos, ele usa mapeamento de contexto para processar uma solicitação de compactação mais rapidamente e um dicionário que usa população dinâmica. Isso é muito maior do que o GZIP pode oferecer e também permite que os usuários móveis também se beneficiem da compactação.

A boa notícia é que todos os sites Kinsta podem se beneficiar da compactação Brotli devido à nossa integração exclusiva com Cloudflare. Isso significa que seu site hospedado na Kinsta é mais rápido que a concorrência usando GZIP e carrega rapidamente para dispositivos menores.

Você tem alguma dúvida sobre a compressão Brotli? Sinta-se à vontade para perguntar na seção de comentários abaixo!