A velocidade é importante para qualquer site. Na busca por tempos de carregamento rápidos, temos uma série de tecnologias diferentes para nos ajudar. Uma abordagem é minimizar o código subjacente que seu site usará sem afetar como ele funciona. A compressão GZIP é uma maneira de fazer isso, mas a compressão Brotli é um método alternativo que chama a atenção.
É uma solução desenvolvida pelo Google que parece fornecer uma série de benefícios sobre (assim como uma alternativa) compressão GZIP. Os detalhes neste artigo vão entrar exatamente no que a tecnologia oferece, mas a compressão Brotli é rápida e eficiente – marcando todos os requisitos que você precisa para investigá-la.
Confira nosso guia em vídeo sobre a compressão Brotli
Para este tutorial, vamos analisar a compressão Brotli e mostrar a você como verificar se o seu site a utiliza, e como habilitá-la se você precisar. Primeiro, vamos colocar Brotli no espaço do algoritmo de compressão, e falar sobre porque você quer usá-lo em vez de outras soluções.
Compressão de dados para a Web
Em sua forma mais básica, a compressão de dados leva o código para um site ou aplicativo e minimiza o tamanho do arquivo. Isto lhe dá arquivos mais leves para se mover pela web e reduz o tempo levado para carregar e renderizar um site. Você encontrará muitas maneiras de comprimir os dados dependendo do tipo de arquivo com o qual você está trabalhando.
Uma abordagem comum é “minificação” Aqui é onde um algoritmo retira o código do seu site de alguns de seus elementos supérfluos. A ideia é que aspectos como travessões, comentários, espaço em branco aumentarão o tamanho dos arquivos e portanto, o tempo de carregamento.
A remoção destes elementos não afeta a experiência do usuário (UX) na maioria das situações. No entanto, ela torna as coisas mais simples para os computadores que têm que compilar e renderizar o código. Por exemplo, pegue este conjunto de código:
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 carruagem para torná-lo legível para humanos, mas um computador não precisa deles para entender o código principal. Além disso, estes lotes de espaços em branco e quebras de linha ocuparão um espaço precioso que, removido, pode lhe dar um aumento de desempenho.
Se você minimizar este código, ele parece 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' );Entretanto, os fundamentos do que este código faz ainda são os mesmos.
Você vai descobrir que outros tipos de arquivos têm formas de comprimir dados. Por exemplo, as imagens geralmente levam muita compressão para reduzir em tamanho sem muita degradação da própria imagem:
A compressão GZIP é uma maneira padrão de minimizar o tamanho de pacotes de arquivos – pense em pacotes como ZIP ou pacotes Linux .tar. Mas até agora não existiam alternativas reais. Falaremos mais sobre porque uma alternativa deve existir mais tarde, mas primeiro vamos apresentar a você o “concorrente” do GZIP
Compressão Brotli
Em poucas palavras, Brotli é um algoritmo de compressão de dados. Entretanto, se isto é tudo o que temos a dizer, não haveria razão para investigá-lo.
Ele fornece compressão “sem perdas” desenvolvido pelo Google sob uma licença do MIT. A empresa está frequentemente na vanguarda da tecnologia que avança na web, então não é surpresa que o Brotli procure pegar o que o GZIP faz, melhorá-la e oferecer uma experiência aprimorada aos usuários e sites.
A compressão Brotli usa as mesmas tecnologias básicas da compressão GZIP, ou seja, a compressão GZIP:
Na verdade, se você combinar essas duas tecnologias, você obtém o formato DEFLATE que serve como base para as compressões GZIP e Brotli. É algo em que entramos com extrema profundidade em nosso artigo sobre compressão GZIP.
Em resumo, arquivos não comprimidos correm através dos algoritmos LZ77 e Huffman como parte do processo DEFLATE para compactá-los em um formato Brotli. A partir daí, um processo INFLATE irá descomprimir os arquivos novamente quando necessário.
Embora Brotli seja atualmente o principal concorrente da GZIP, existem outras tecnologias similares por aí que também utilizam DEFLATE. Na próxima seção, falaremos sobre o que faz Brotli se destacar.
Compressão Brotli vs Compressão GZIP
Como mencionado, tanto Brotli como GZIP usam o método DEFLATE para comprimir (e descomprimir) os dados. Isto pode confundir muitas pessoas, porque isto por si só não justifica uma mudança.
No entanto, o Google está construindo baseado no DEFLATE para oferecer técnicas aprimoradas e comprimir os dados para um padrão maior e muito mais rápido.
Como Brotli utiliza dicionários para melhorar a compressão de dados
Um aspecto técnico dos formatos de compressão de dados é a forma como a compressão Brotli usa a linguagem e o texto existentes nos dicionários de dados para empregar seu algoritmo.
Os desenvolvedores usarão um dicionário de pares de valores-chave para armazenar dados, pois é eficiente, flexível e escalável. Aqui está 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, Brotli usa dois.
Dicionário estático do Brotli
O primeiro é um dicionário estático (ou seja, predefinido) de termos de código comuns que atuam como 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ências a pontos no código. Não é uma analogia exata, mas é similar à maneira como um hook WordPress faz referência a um conjunto maior de códigos.
Como tal, o codificador não precisa peneirar através do byte de código por byte. Ao invés disso, ele pode agir sobre as referências, puxar a definição do dicionário e passar para o próximo.
Você também verá que há frases do mundo real no dicionário, assim como códigos que não veriam muitas vezes compressão. Isso ajuda algumas tags como <HTML> e parâmetros como type="text/javascript" a obter alguma compressão e lhe dar alguns ganhos maiores.
Há também algumas “transformações” no dicionário: parciais, incompletas e outros tipos de frases que com um novo prefixo, sufixo ou caso se tornam uma palavra totalmente nova – por exemplo, “Trabalho” transformando-se em “Trabalhando” ou “html” em “HTML”
Dicionário dinâmico do Brotli
O dicionário dinâmico analisa o conteúdo e o código no código-fonte, sendo bom para dispositivos menores, mas não tão bom para arquivos maiores. Também é chamado de “janela deslizante” e pode ter até 16 MB de tamanho. Aqui é onde o algoritmo de compressão “armazena” alguns dos dados mais recentes para referenciá-los. É ultradinâmico no sentido de que muda constantemente.
Se você comparar isso com a janela deslizante GZIPs de cerca de 32 KB, você verá que o escopo de análise e compressão em tempo real é enorme. Na verdade, a maioria das práticas típicas usa uma janela deslizante Brotli de cerca de 4 MB, que ainda é mamute em comparação com os algoritmos concorrentes.
Compressão Brotli vs Compressão GZIP: Desempenho e suporte
Quando se trata de números de usuários puros, a compressão GZIP ainda é a número um. No entanto, a compressão Brotli vê mais uso a cada dia. Isto é em parte devido a medidas mais amplas de adoção pelos principais navegadores; o aumento dos navegadores baseados em Chrome também ajuda.
Confira nosso duia em vídeo sobre Compressão Brotli vs Compressão GZIP
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 compressão Brotli na escrita atual, incluindo todas as versões principais.
Em nosso artigo sobre compressão GZIP, notamos um teste de benchmark onde Brotli teve uma melhor taxa de compressão em comparação com os algoritmos concorrentes, mas ficou para trás em tempo de compressão e descompressão:
No entanto, os testes Squash Benchmark mostram uma história diferente – uma que é mais matizada. O verdadeiro ponto de partida é que, no geral, Brotli é mais flexível do que GZIP, com uma taxa de compressão geralmente maior.
Aqui está o resumo das descobertas do Squash Benchmarks:
- Brotli tem a melhor taxa de compressão (ou seja, produz arquivos compactados menores) em todos os níveis de compressão.
- Enquanto o GZIP bate Brotli na velocidade na maioria das vezes, o nível que você comprime em fatores nos resultados que você vai ver.
O Breakdown de Paul Calvano dá mais detalhes, mas o ponto crucial é que Brotli precisa de mais energia de CPU para fornecer um fator maior de compressão de arquivos. Isto mostra tanto o nível de compressão mais alto quanto o mais baixo. O benchmarking do Cloudflare confirma isso: arquivos muito menores, com números comparativos de velocidade de compressão 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 Brotli. Isto pode distorcer os dados que outros coletam sobre como a Brotli opera. Você pode ver “falsos negativos” se você executar testes: valores mais altos de velocidade de página que ignoram a compressão de arquivos que você emprega.
Benefícios da compressão Brotli
Há muita informação a ser considerada sobre a compressão Brotli até agora. Entretanto, podemos resumir o que você precisa saber sobre o porquê de escolher Brotli em vez do GZIP:
- É necessária a mesma tecnologia que o GZIP usa e a aperfeiçoa com métodos modernos.
- A análise baseada no dicionário do Brotli significa que ela pode comprimir mais de seus arquivos para um nível mais profundo.
- Enquanto Brotli precisa de mais poder computacional comparado ao GZIP, os resultados significam arquivos menores.
- Nos níveis de compressão que a maioria dos web hosts usam – algo de médio alcance como o nível quatro ou cinco – Brotli tem um desempenho melhor do que GZIP sem quebrar um suor.
- Você vai descobrir que Brotli tem suporte quase universal através de navegadores, se não algumas das ferramentas de referência às quais você está acostumado.
- Brotli é gratuito para usar e de código aberto. Esta é uma vantagem se você usar um CDN compatível com Brotli, como o Cloudflare.
Vale notar que o Cloudflare utiliza a compressão Brotli em todos os seus servidores. Na verdade, ele usa uma versão modificada e otimizada do Brotli para lhe dar mais ganhos com relação à velocidade e entrega de arquivos.
Como Kinsta oferece integração Cloudflare em todos os planos, todos os sites hospedados usam Brotli por padrão. Esta é apenas uma das razões por que Kinsta é um dos líderes de mercado e um dos melhores provedores de hospedagem do mercado.
Como verificar se o seu site utiliza compressão Brotli
Como a compressão Brotli ainda não é padrão (embora esteja quase lá), você provavelmente vai querer saber se o seu site a utiliza. Há algumas maneiras de descobrir isso.
1. Use uma ferramenta on-line
A maneira mais simples de verificar se o seu site usa compressão Brotli é através de uma ferramenta on-line. Embora haja alguns para escolher, você vai querer algo rápido e simples de usar que também lhe dará um monte de informações sobre sua configuração.
Gift of Speed é à nossa escolha para verificar a compressão Brotli.
Ele irá determinar se o seu site usa GZIP, Brotli ou nenhuma compressão, e fornecer algumas outras métricas para ajudá-lo a decidir o que fazer a seguir. Essas métricas oferecem uma visão importante, porque você não quer apenas considerar se o servidor do seu site usa o “sabor” certo de compressão.
Há muitos elementos que compõem um site, e até mesmo bibliotecas e dependências de terceiros. Você pode escolher servi-los usando um CDN, e se for o caso, isto precisa empregar a compressão Brotli também para o melhor desempenho possível.
Se você usa Gift Of Speed para testar ativos individuais, você pode dar uma olhada no valor do Servidor para ver como ele é servido.
Todos os sites da Kinsta utilizam o CDN da Kinsta, alimentado pelo Cloudflare. Como tal, cada site também utilizará a compressão Brotli em toda a cadeia e arquitetura do servidor.
2. Verifique usando as ferramentas de desenvolvimento 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 a web. Uma verificação rápida que você pode fazer é se o seu site (ou um ativo específico) usa compressão Brotli.
Para todos os principais navegadores como Brave, Edge, Firefox ou Chrome, você pode ir para a tela Network > All screen.
No início, 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 olhando e rolando pela lista abaixo, você verá um painel aberto que padrão para as informações dos Headers.
Aqui, role pela saída até que você veja a linha content-encoding: br:
Em resumo: Se você ver content-encoding: br, isto lhe diz que Brotli está ativo para aquele site.
Como habilitar a compressão Brotli para o seu site
Nestas poucas seções finais, mostraremos a você uma série de diferentes maneiras de habilitar a compressão Brotli para o 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 cada site que lê a primeira abordagem!
1. Use um plugin WordPress
Quase todos os sites WordPress usarão pelo menos um plugin – muitas vezes mais dependendo da funcionalidade que o site precisa. Cache é um caso de uso para plugins, e há muitos por aí. Entretanto, nem todos permitem a compressão Brotli, então você precisará escolher sabiamente e estar preparado para mudar sua solução preferida.
Antes de fazer qualquer alteração em um site, lembre-se de fazer um backup completo caso você precise restaurar mais tarde. Para este método, usaremos o W3 Total Cache porque é simples encontrar a configuração correta.
Você precisará ir para a página Performance > Browser Cache no WordPress:
Esta tela mostra duas configurações. A que você vai querer escolher é Enable HTTP (brotli) Compression:
No entanto, isto não será adequado para todos os sites e situações. Por exemplo, Kinsta otimiza seu servidor para uma hospedagem rápida, de alto desempenho e confiável. Como tal, há uma série de plugins que você não vai precisar, e alguns outros são até mesmo proibidos de uso em sites Kinsta.
Nesses casos, você vai querer adotar outra abordagem.
2. Habilite o Brotli no servidor
Quando se trata de escolher um tipo de servidor, Nginx vs Apache é uma longa batalha que (por enquanto) o primeiro está vencendo. Independentemente disso, ambos os tipos de servidor podem habilitar a compressão Brotli, e há diferentes abordagens para cada um deles.
Antes de você analisar a abordagem manual, há 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 servidor 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 esta, você deve estar bem.
- Em alguns casos, você precisará de suas credenciais de login como um usuário de shell seguro (SSH) no próprio servidor. Você pode encontrá-las dentro do 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 procure seu provedor de hospedagem web para obter ajuda. Independentemente disso, daremos uma breve visão geral do processo para cada servidor, começando com o Nginx.
Nginx
Para habilitar a compressão Brotli em servidores Nginx, você precisará primeiro encontrar o arquivo nginx.conf. Ele será um dos poucos locais:
/usr/local/nginx/conf/etc/nginx/usr/local/etc/nginx
Quando você tiver o arquivo aberto, adicione o seguinte ao rodapé:
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;Esta suíte vai ligar o Brotli e usá-lo para servir arquivos estáticos. A configuração brotli_comp_level é uma configuração que você pode mudar dependendo do seu caso de uso e das suas necessidades. Números mais altos oferecem melhor compressão balanceada com um site menos performante.
Apache
Como o Apache é flexível quando se trata de configurações, você pode habilitar a compressão Brotli sem muito alarde.
Para fazer isso, siga estes passos:
- Entre no seu servidor usando um prompt de comando ou um aplicativo terminal, como usuário root
sudo. - Execute o comando
a2enmod brotlipara ativar a compressão. - No Apache VirtualHost ou da configuração do seu servidor, adicione a linha
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascriptpara definir os tipos de arquivo que você gostaria de comprimir.
Enquanto o Apache não suporta compressão estática, você pode mudar o nível de compressão Brotli que você oferece usando a linha BrotliCompressionQuality LEVEL-NUMBER . No entanto, você precisará substituir o suporte de posição “LEVEL-NUMBER” por um número entre 1-11.
3. Use o suporte do seu provedor de hospedagem web
A maneira mais direta de permitir a compressão Brotli para o seu site é assegurar que o seu provedor de hospedagem faça isso por padrão. A Kinsta oferece a compressão Brotli como padrão graças à sua integração com o CDN do Cloudflare.
O CDN da Kinsta é alimentado pela infraestrutura do Cloudflare em todos os planos – então todo site usa a compressão Brotli sem que você precise ativá-la.
Você vai querer verificar se o seu provedor de hospedagem escolhido oferece compressão Brotli, e a que nível você precisa para configurá-lo. Para rodar o site mais eficiente, estável e seguro, uma boa hospedagem é essencial.
Resumo
A compressão de dados é um componente necessário para desenvolver e usar a web moderna. Os tamanhos dos arquivos podem disparar devido aos ricos e complexos tipos de arquivos 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 bairro.
A compressão Brotli baseia sua tecnologia na mesma base da GZIP, mas inclui alguns benefícios que melhoram o desempenho. Como discutimos, ela usa o mapeamento de contexto para processar uma solicitação de compressão mais rapidamente, e um dicionário que usa população dinâmica. Isto é muito maior do que o GZIP pode oferecer, e também permite que usuários móveis se beneficiem da compressão também.
A boa notícia é que cada site Kinsta pode se beneficiar da compressão Brotli por causa de nossa integração única com o Cloudflare. Isto significa que seu site hospedado na Kinsta é mais rápido do que os concorrentes usando GZIP e que carrega rapidamente mesmo nos menores dispositivos.
Você tem alguma pergunta sobre a compressão Brotli? Sinta-se à vontade para fazer suas perguntas na seção de comentários abaixo!
Deixe um comentário