A maneira mais fácil de acelerar seu site WordPress é eliminar todos os seus recursos indesejados. A segunda maneira mais fácil de acelerá-lo é comprimir todos os seus recursos desejados. Ativar a compressão GZIP no seu servidor web é uma das maneiras mais simples e eficientes de conseguir isso.

Todos os navegadores modernos incluem suporte para compressão GZIP por padrão. Entretanto, para servir os recursos compactados a seus usuários sem soluços, você deve configurar seu servidor adequadamente.

Neste post, você aprenderá o básico sobre compressão de dados na web, o que é compressão GZIP, seus vários benefícios e como você pode usá-la para acelerar seus sites WordPress em diferentes configurações de servidores.

Entusiasmado? Vamos descomprimir!

Prefere assistir à versão em vídeo?

Os princípios básicos da compressão de dados na Web

A compressão de dados na web é o processo de reduzir o tamanho dos dados transmitidos pelos websites. Dependendo do tipo de dados – texto, imagens, folhas de estilo, scripts, fontes – há várias maneiras de se comprimir dados.

Os principais componentes de uma página web
Os principais componentes de uma página web

Por exemplo, a mineração de HTML, CSS e JavaScript é uma maneira simples de reduzir a quantidade de dados enviados pelos navegadores. Aqui, o minificador comprime o texto removendo caracteres desnecessários, tais como comentários e espaços em branco do código fonte.

No exemplo abaixo de um simples documento HTML, há três tipos de conteúdo: Marcação HTML, estilos CSS, e código JavaScript.

Cada tipo de conteúdo tem uma sintaxe e uma semântica únicas. Em geral, este documento HTML tem 357 caracteres no total.

<html>
<head>
    <style>
    /* kinsta-banner is used on the homepage only */
    .kinsta-banner { font-size: 150% }
    .kinsta-banner { width: 75% }
</style>
</head>
<body>
    <!-- kinsta banner START -->
    <div>...</div>
    <!-- kinsta banner END -->
    <script>
    kinstaScripts(); // random scripts used on the page
    </script>
</body>
</html>

O código acima é fácil de ler e seguir. É ideal para o desenvolvimento. Entretanto, é desnecessário que o navegador leia os comentários e tenha etiquetas perfeitamente recuadas. Um compressor inteligente pode analisar este documento e remover todos os bits desnecessários dele.

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>

Após a minificação, o documento HTML é reduzido para apenas 141 caracteres. Isso representa uma economia de 60,50% no número de caracteres. Não é tão fácil para os olhos, mas isso não importa para o navegador. Ele ainda exibirá a mesma página para o usuário.

Para tirar proveito das duas versões, você pode manter o documento original como uma “versão de desenvolvimento”, mas minify todo o código antes de empurrá-lo ao vivo.

A maioria dos plugins de desempenho WordPress cuidam disso automaticamente para você.

Compressão de tamanho de arquivo de jQuery não comprimido vs minificado
Compressão de tamanho de arquivo de jQuery não comprimido vs minificado

Como exemplo, a versão não comprimida da biblioteca jQuery 3.5.1 é mais de 3 vezes maior do que a versão minificada do mesmo arquivo.

Da mesma forma, as mesmas técnicas de compressão descritas acima podem otimizar outros tipos de conteúdo como imagens, vídeos, fontes e muito mais. Reduções específicas de conteúdo como estas são o primeiro passo para otimizar o tamanho dos ativos baseados em texto do seu site.

Estes benefícios óbvios são a razão pela qual a Kinsta introduziu um recurso de minificação de código no painel MyKinsta. Os clientes podem optar pela minificação automática de código para seus arquivos CSS e JavaScript, acelerando seus sites com zero esforço manual.

Mas a compressão de dados é mais do que uma simples minificação. Usando técnicas matemáticas avançadas, os algoritmos de compressão de dados podem reduzir ainda mais o tamanho dos dados.

Um dos exemplos mais populares de tal método de compressão de dados é o GZIP. Ele permite a transmissão eficiente de dados e tem contribuído significativamente para tornar a Internet um meio de comunicação global viável.

O que é GZIP Compression?

GZIP, abreviação para GNU Zip, é o método mais popular de compressão de dados sem perdas na web. Ele permite reduzir o tamanho das páginas HTML de seu site, folhas de estilo e scripts.

Além de ser um algoritmo de compressão de dados, GZIP é também uma extensão de arquivo (.gz) e um software utilizado para compressão/descompressão de arquivos.

É baseado no algoritmo DEFLATE, que é uma mistura de codificação LZ77 e algoritmos de codificação Huffman.

A compressão GZIP é baseada no algoritmo DEFLATE
A compressão GZIP é baseada no algoritmo DEFLATE

Um compressor GZIP pega um conjunto de dados brutos e o comprime sem perdas. Os dados brutos podem ser de qualquer tipo de arquivo, mas o GZIP funciona melhor com recursos baseados em texto (por exemplo, HTML, CSS, JS).

A próxima seção cobre como a compressão GZIP funciona em profundidade.

Como a GZIP comprime os dados

Uma ilustração aproximada de como funciona a compressão GZIP
Uma ilustração aproximada de como funciona a compressão GZIP

Para começar, o compressor GZIP executa o algoritmo de compressão LZ77 sobre os dados brutos para remover redundâncias. Este algoritmo funciona encontrando padrões repetidos em uma janela deslizante pré-definida (uma pequena seção dos dados brutos).

Ele então substitui todas as cordas repetidas por tufos para comprimir os dados brutos.

Uma ilustração do algoritmo de codificação LZ77
Uma ilustração do algoritmo de codificação LZ77

No exemplo acima, o tamanho da janela deslizante é de apenas 13 caracteres (13 bytes). Entretanto, a compressão GZIP pode usar um tamanho máximo de janela deslizante de 32 KB (32.768 bytes). O tamanho da janela deslizante tem um papel fundamental no desempenho da compressão LZ77.

Depois de comprimir os dados brutos com o algoritmo LZ77, o compressor GZIP então usa o algoritmo de codificação Huffman para comprimi-los ainda mais. Ele faz isso atribuindo caracteres que ocorrem com maior freqüência ao menor número de bits, enquanto atribui caracteres raros ao maior número de bits.

Esta técnica é como a utilizada em código Morse, onde as letras que ocorrem com mais freqüência no idioma inglês obtêm as sequências mais curtas.

Para entender como funciona o algoritmo de codificação Huffman, considere a palavra BOOKKEEPER. Ela tem 10 caracteres, mas tem apenas 6 caracteres únicos. Esta palavra tem uma boa mistura de letras simples, duplas e triplas.

Quase todos os sites utilizam codificação de caracteres UTF-8 para representar letras e símbolos. Cada caractere ASCII em UTF-8, que também inclui o alfabeto inglês, usa 1 byte (8 bits).

A palavra
A palavra “BOOKKEEPER” tem muitas letras que se repetem

Um fio de 10 caracteres como BOOKKEEPER exigirá 10 bytes (80 bits) de memória. Você pode ver que contém 1 instância das letras B, P, R, 2 instâncias das letras O e K, e 3 instâncias da letra E.

O algoritmo de codificação Huffman utiliza este conhecimento para comprimir sem perdas a cadeia. Ele faz isso gerando uma árvore binária com cada letra única como uma folha.

Letters with the lowest frequency (e.g. B, P, R) will find themselves at the bottom of the tree, while those that appear frequently (e.g. E, O, K) will ideally find themselves at the top.

As cartas com a menor freqüência (por exemplo, B, P, R) se encontrarão na base da árvore, enquanto aquelas que aparecem freqüentemente (por exemplo, E, O, K) se encontrarão idealmente na parte superior.

O nó mais alto na árvore é a raiz, e seu valor é igual ao número total de caracteres na corda.

Huffman Tree para a palavra
Huffman Tree para a palavra “BOOKKEEPER”.

Depois de gerar a árvore Huffman, todas as setas de ramificação à esquerda e à direita recebem números 0 e 1 respectivamente. Você pode então gerar o código Huffman para qualquer caractere traçando o caminho raiz-folha e juntando todos os 0s e 1s.

Os códigos Huffman são códigos binários únicos para cada personagem
Os códigos Huffman são códigos binários únicos para cada personagem

Você pode notar que as letras com a maior freqüência têm códigos Huffman com os menores tamanhos de bits.

Nota: O algoritmo de codificação Huffman pode gerar códigos binários alternativos utilizando uma estratégia de ordenação diferente para caracteres com as mesmas freqüências. Entretanto, o tamanho total da seqüência codificada permanecerá o mesmo.

Uma palavra de 80 bits codificada como uma cadeia de 25 bits
Uma palavra de 80 bits codificada como uma cadeia de 25 bits

Isso é uma redução de 68,75% na memória necessária para armazenar a palavra original.

A utilização da árvore Huffman com a convenção 0/1 gera códigos binários que satisfazem a propriedade do prefixo. Ele garante que o código Huffman de qualquer caractere específico não é um prefixo do código de qualquer outro caractere, facilitando a decodificação da cadeia codificada usando a árvore Huffman. Isto desempenha um papel primordial na velocidade de descompressão GZIP.

Assim como na palavra acima, o compressor GZIP usa o algoritmo de codificação Huffman para otimizar ainda mais os tufos gerados pelo algoritmo LZ77. Isto resulta em arquivos altamente comprimidos com extensão.gz.

Se você estiver interessado em saber mais sobre como a GZIP funciona, consulte este vídeo para obter uma rápida visão geral.

Quão boa é a compressão GZIP?

Tipicamente, o GZIP atinge uma taxa de compressão de cerca de 70% para arquivos pequenos, mas pode chegar a 90% para arquivos maiores baseados em texto.

Índices de compressão GZIP para algumas bibliotecas populares de CSS e JS
Índices de compressão GZIP para algumas bibliotecas populares de CSS e JS

Na tabela acima, você pode ver que compactar arquivos minerados com GZIP pode reduzir ainda mais seu tamanho.

Nota: Você pode comprimir qualquer tipo de arquivo com GZIP, mas para bens já comprimidos com outros métodos (por exemplo, imagens, vídeos), isso não representará nenhuma economia. Algumas vezes, pode até aumentar o tamanho do arquivo.

A força de um algoritmo de compressão não depende apenas de sua taxa de compressão, mas também da rapidez e eficiência com que ele pode comprimir e descomprimir dados. É aí que a GZIP se sobressai na maioria dos casos de uso.

Como o GZIP se descomprime rapidamente usando um algoritmo de streaming, é um ótimo ajuste para protocolos web onde a velocidade é essencial. Além disso, a GZIP utiliza recursos mínimos para comprimir e descomprimir dados, tornando-a ideal tanto para servidores quanto para clientes.

Desempenho de compressão de brotli vs bzip2 vs GZIP vs xz
Desempenho de compressão de brotli vs bzip2 vs GZIP vs xz (Fonte: OpenCPU)

Os gráficos acima comparam o desempenho de compressão de brotli, bzip2, gzip e xz algoritmos de compressão. GZIP perde no teste de taxa de compressão por uma pequena margem, mas para velocidades de compressão e descompressão, ele supera a concorrência.

Observando o gráfico de velocidade de compressão, podemos concluir que o GZIP é ideal para compressão em tempo real em servidores HTTP e outros fluxos de dados na web. Considerando todos os seus aspectos positivos no avanço da web, a IETF ratificou GZIP como um dos três formatos padrão para compressão em HTTP/1.1.

Nota: Uma abstração da biblioteca de compressão da GZIP chamada zlib é usada em muitos sistemas operacionais populares (Linux, macOS, iOS) e consoles de jogos modernos (PlayStation 4, Wii U, Xbox One). Também é usada no formato de arquivo PNG sem perdas para compressão de imagens.

6 Vantagens da Compressão GZIP

Vamos analisar mais de perto as vantagens mais importantes da compressão GZIP.

Fornece uma relação de compressão decente

Como discutido anteriormente, a GZIP não tem a melhor taxa de compressão em comparação com sua concorrência. Mas também não está tão distante deles. Normalmente, ela pode ajudar a reduzir o tamanho dos recursos baseados em texto em 70-90%.

Compressão e descompressão super rápida

Para compressão de dados e velocidades de descompressão, a GZIP é claramente a vencedora. É altamente desejável para a compressão on-the-fly em servidores HTTP e outros fluxos de dados.

Requer muito pouca memória

O GZIP deixa uma área de memória mínima, tornando-o adequado para servidores e sistemas com capacidade limitada de memória. Assim, você encontrará o suporte até mesmo dos provedores de hospedagem web mais baratos.

Não se expande muito, mesmo nos piores casos

Algoritmos de compressão de dados sem perda como o GZIP têm um limite rígido além do qual não podem comprimir dados.

Normalmente, isto acontece quando o recurso já está bem comprimido, ou se é minúsculo e a sobrecarga de adicionar o dicionário GZIP é maior do que a economia de compressão. Podemos atribuir este fenômeno a um conceito chamado codificação de entropia. O GZIP é altamente resistente a este efeito.

Livre para uso e código aberto

O GZIP foi criado principalmente como um substituto gratuito e de código aberto para o programa de compressão patenteado utilizado nos primeiros sistemas Unix. Portanto, não está sobrecarregado com nenhuma patente e pode ser usado livremente por qualquer pessoa.

Desfruta do Apoio Universal

De acordo com a W3Techs, a compressão GZIP é usada por 82% de todos os websites que eles rastreiam, tornando-a o algoritmo de compressão mais amplamente utilizado em toda a web.

A GZIP é suportada por quase todos os servidores e clientes. Não importa em qual servidor você hospeda seu site, você pode acelerá-lo, habilitando a GZIP nele.

Avisos GZIP nas ferramentas de teste de velocidade do site

Ao lado da minificação, permitir a GZIP é uma das otimizações de velocidade mais simples e eficazes que você pode implementar em seu website.

É também uma das maneiras mais fáceis de otimizar o WordPress. Apesar disso, muitos sites WordPress ainda não o utilizam.

Quando você visita um website, seu navegador verifica se o servidor web tem GZIP habilitado, verificando a content-encoding: gzip cabeçalho de resposta. Se o cabeçalho existir, ele recupera os arquivos compactados, descomprime-os e depois serve os arquivos menores para você automaticamente.

O cabeçalho de resposta
O cabeçalho de resposta “codificação de conteúdo: gzip” em Chrome DevTools

Se o navegador não detectar o cabeçalho de resposta GZIP, ele baixa os arquivos não compactados. Na maioria dos casos, a diferença na velocidade de carregamento da página pode ser de vários segundos. Portanto, se você não tiver o GZIP ativado, você verá avisos nas ferramentas deteste de velocidade do site.

Aviso GZIP no Google PageSpeed Insights / Lighthouse

O Google Page Speed Insights lança um aviso quando você não tem nenhuma compressão de texto ativada em seu site.

Nota: Google PageSpeed Insights e Google Lighthouse foram duas ferramentas separadas para testar o desempenho do site. Eles trabalharam independentemente um do outro até 2018, quando o Google atualizou Page Speed Insights para usar o Lighthouse como seu motor de análise. Portanto, PageSpeed Insights e Lighthouse são uma e a mesma coisa agora.

Aviso de
Aviso de “Activar compressão de texto” no Google PageSpeed Insights

No site do exemplo acima, comprimir recursos baseados em texto pode reduzir o peso da página em mais de 78% e acelerar o tempo de carregamento da página em 2,1 segundos.

Nota: PageSpeed Insights conta com os cabeçalhos de resposta devolvidos ao seu navegador pelo servidor. Às vezes, ele pode mostrar um falso aviso mesmo quando você tem a compressão GZIP ativada. Pode ser devido à execução do teste de velocidade em uma máquina que usa um servidor proxy intermediário ou um software de segurança. Eles podem interferir no download de arquivos compactados de servidores externos.

Advertência GZIP no GTmetrix

GTmetrix mostra um aviso se seu website não servir recursos baseados em texto comprimido. Assim como o Google PageSpeed Insights, ele também mostrará a economia potencial que você pode conseguir.

Aviso de
Aviso “Ativar a compressão” em GTmetrix

Nota: GTmetrix está atualizando seu algoritmo de teste de velocidade para substituir o antigo PageSpeed Insights e bibliotecas YSlow com as mais recentes métricas do Google Lighthouse. Você pode esperar que seu aviso de compressão GZIP seja semelhante ao mostrado pelo Lighthouse.

Aviso GZIP no Pingdom Tools

A Pingdom Tools lança um aviso direto para comprimir os componentes de seu site com GZIP.

Aviso de
Aviso de “Comprimir componentes com GZIP” nas Pingdom Tools

Na seção de descrição, o Pingdom Tools também fornece algumas estatísticas sobre a importância do GZIP. Feijão fresco!

Advertência GZIP no WebPageTest

O WebPageTest mostra um aviso em sua aba de Análise de Desempenho se detectar que qualquer resposta compressiva não está sendo servida da maneira mais otimizada.

Aviso de
Aviso de “Usar compressão GZIP” no WebPageTest

O WebPageTest também dará uma pontuação classificada para mostrar o quão severo é um aviso. Por exemplo, ele classifica o aviso acima 23 de 100, o que significa que você deve corrigi-lo como uma prioridade.

Como verificar se a compressão GZIP está habilitada?

A Accept-Encoding: gzip, deflate cabeçalho HTTP ésuportado efetivamente por todos os navegadores modernos. Portanto, a maioria dos provedores de hospedagem de sites habilita a compressão GZIP (ou compressão Brotli) por padrão em todos os seus servidores.

Quando os servidores web vêem este cabeçalho enviado por um navegador, eles reconhecem o suporte do navegador para GZIP e respondem com uma resposta HTTP comprimida usando content-encoding: gzip cabeçalho.

Mas se você estiver usando outro provedor de hospedagem, ou se você quiser apenas confirmar se seu website está servindo adequadamente o conteúdo comprimido GZIP, verifique sempre se ele está habilitado.

Abaixo estão algumas maneiras simples de verificar a compressão GZIP.

1. Ferramentas de Teste de Compressão GZIP Online

Usar uma ferramenta on-line é a maneira mais fácil de verificar se a compressão GZIP está habilitada em seu website. Recomendo usar as ferramentas gratuitas Check GZIP Compression ou HTTP Compression Test. Basta digitar a URL de seu website e pressionar o botão Check ou Test.

Estas duas ferramentas on-line mostrarão um breve relatório sobre se a GZIP está ou não ativada, e a quantidade de transferência de dados que você salvou (ou pode salvar) ao servir a URL de teste com a compressão GZIP ativada.

A primeira ferramenta também mostrará outras informações relevantes, como o tipo de servidor de seu site, o tipo de conteúdo e o tempo de compressão.

Teste da página inicial da Kinsta com a ferramenta Check GZIP Compression
Teste da página inicial da Kinsta com a ferramenta Check GZIP Compression

Nota: Desde 5 de novembro de 2021, Kinsta atualizou para a compressão Brotli via Cloudflare para todos os pedidos HTTPS. Você pode testar a compressão Brotli verificando a content-encoding: br nos cabeçalhos de resposta de uma solicitação.

 Teste Kinsta.com com a ferramenta HTTP Compression Test
Teste Kinsta.com com a ferramenta HTTP Compression Test

Você deve observar que a otimização GZIP não se detém apenas em sua página web, mas também inclui seus ativos estáticos baseados em texto como folhas de estilo, scripts e fontes. Se você estiver usando um CDN para servir estes ativos, então você precisa garantir que o CDN também os sirva com a compressão GZIP habilitada.

A maioria dos CDNs modernos como o Cloudflare, Kinsta CDN, KeyCDN e CloudFront suportam a compressão GZIP. Você pode testar os ativos servidos pelo CDN para compressão GZIP ligando-se diretamente aos ativos.

Teste de compressão GZIP para ativos hospedados por um CDN
Teste de compressão GZIP para ativos hospedados por um CDN

No relatório acima, você pode ver que o Kinsta CDN usa o mecanismo KeyCDN, um CDN pull tradicional.

Nota: A Kinsta mudou para Cloudflare como seu parceiro CDN para acelerar e proteger os sites de nossos clientes. Você pode ler mais sobre isso aqui.

Se você está usando Kinsta para hospedar seu site, você não precisa se preocupar com nada sobre a compressão GZIP, pois habilitamos a compressão Brotli – uma alternativa mais rápida para a compressão GZIP – por padrão.

2. O “conteúdo-codificador: gzip” Cabeçalho de resposta HTTP

A segunda maneira de verificar se um website fornece conteúdo comprimido GZIP é verificando a content-encoding: gzip cabeçalho de resposta HTTP.

Você pode abrir o Chrome DevTools ou Firefox Developer Tools e procurar por este cabeçalho de resposta na seção Rede.

Já mostrei anteriormente como fica no Chrome DevTools. Veja como fica em Firefox Developer Tools.

O cabeçalho
O cabeçalho “codificação de conteúdo: gzip” em Firefox Developer Tools

Você também pode ativar a opção “Usar grandes linhas de solicitação” no painel de configurações do Chrome DevTools para ver tanto o tamanho original quanto o comprimido da página. Como você pode ver abaixo, o tamanho da página original foi reduzido de 118 KB para apenas 22,9 KB após a compressão com GZIP.

Veja os tamanhos de página comprimidos vs. não comprimidos em Chrome Devtools
Veja os tamanhos de página comprimidos vs. não comprimidos em Chrome Devtools

3. Ferramentas de teste de velocidade da página Web

A maioria das ferramentas de teste de velocidade do website o advertirá por não usar compressão como GZIP para servir suas páginas web. Muitos leitores que chegam a este artigo provavelmente estão chegando por causa exatamente desses avisos GZIP, muitos dos quais eu já discuti acima em profundidade.

Avisos GZIP em várias ferramentas de teste de velocidade de páginas web
Avisos GZIP em várias ferramentas de teste de velocidade de páginas web

Você pode usar ferramentas como PageSPeed Insights, GTmetrix, Pingdom Tools, e WebPageTest para verificar se você tem a compressão GZIP ativada em seu site WordPress.

Como habilitar a compressão GZIP?

Se você não tiver a compressão GZIP habilitada em seu servidor web, há muitas maneiras de habilitá-la. O método exato depende de qual servidor web você está usando para hospedar seu website.

Importante: Como sempre, faça um backup dos arquivos de configuração de seu site e servidor antes de editá-los.

1. Ativar Compressão GZIP com um Plugin WordPress

A maneira mais fácil de permitir a compressão GZIP no seu site WordPress é usando um plugin de cache ou de otimização de desempenho.

Por exemplo, se você hospedar seu site WordPress no servidor web Apache, o W3 Total Cache inclui uma opção para ativar a compressão GZIP sob seu painel de configurações de Cache do navegador.

Da mesma forma, o WP Rocket permite adicionar automaticamente as regras de compressão GZIP. Estes plugins permitem a compressão GZIP, adicionando o módulo mod_deflate do Apache ao arquivo .htaccess.

Possibilitando a compressão GZIP em W3 Total Cache
Possibilitando a compressão GZIP no W3 Total Cache

Os plugins WordPress requerem permissões para modificar arquivos em seu servidor web. Se eles não tiverem as permissões certas, então eles falharão ou lhe mostrarão um erro.

Nesses casos, você precisa entrar em contato com seu provedor de hospedagem ou modificar manualmente os arquivos de configuração de seu servidor web, usando os trechos de código abaixo.

Nota: A Kinsta otimizou sua plataforma para alto desempenho, confiabilidade e segurança. Isto também inclui permitir a compressão GZIP por padrão para todos os seus planos de hospedagem.

Como os plugins de cache de terceiros podem causar conflito com as otimizações de desempenho interno da Kinsta, a Kinsta não permite a maioria deles em seus servidores. Para mais informações, você pode ver a lista completad os plugins proibidos do Kinsta.

2. Ativar Compresão GZIP no Apache Web Server

De acordocom a Netcraft, o Apache serve mais sites ativos do que qualquer outro servidor web em uso atualmente. É também um dos dois servidores web recomendados pelo WordPress.

Para ativar a compressão GZIP nos servidores Apache, você precisa usar seus módulos mod_filter e mod_deflate e configurá-los adequadamente com as diretrizes corretas. Eles irão direcionar o Apache para comprimir a saída do servidor antes de enviá-lo aos clientes através da rede.

Você tem duas opções para editar as configurações do servidor Apache com base no nível de acesso que você tem:

  1. Se você puder acessar o arquivo principal de configuração do servidor (normalmente chamado httpd.conf), é recomendável usá-lo para configurar o Apache, pois os arquivos . htaccess podem tornar o Apache mais lento.
  2. Se você não puder acessar o arquivo principal de configuração do servidor, que normalmente é o caso da maioria dos provedores de hospedagem compartilhada do WordPress, então você precisa configurar o Apache usando o arquivo . htaccess.

A primeira opção é estritamente para os administradores de sistemas, pois os provedores de hospedagem raramente permitem que você edite o arquivo principal de configuração do servidor. Explicar como fazê-lo desta forma está fora do escopo deste artigo. Você pode consultar o exemplo de Configuraçõ es do Servidor Apache compartilhado pelo projeto HTML5 Boilerplate e a documentação do Apache para começar.

A segunda opção é ideal para a maioria dos proprietários de sites WordPress, já que muitos provedores de hospedagem compartilhada permitem que você edite arquivos .htaccess.

Para começar, usar o SFTP ou o gerenciador de arquivos online de seu host para encontrar o arquivo .htaccess no diretório raiz do seu site WordPress. Em seguida, adicione o trecho de código abaixo a ele.

Importante: Certifique-se de que o módulo mod_filter esteja ativo em seu servidor. A maioria dos hosts web tem ele ativado por padrão, mas se não estiver, a diretiva AddOutputFilterByType não funcionará e pode vomitar um erro HTTP 500. Você pode verificar os logs de erro de seu servidor se tiver algum problema após adicionar o trecho de código abaixo.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml  

  # Remove browser bugs (only needed for ancient browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Adicione o código acima somente após as diretrizes existentes de seu arquivo .htaccess. Salve o arquivo e depois verifique se ele permite a compressão GZIP no seu servidor.

Exemplo de arquivo Apache . htaccess após habilitar a compressão GZIP
Exemplo de arquivo Apache . htaccess após ativado a compressão GZIP

Seu servidor web deve agora servir arquivos compactados para todas as extensões de arquivo listadas acima. Você pode confirmar isto usando qualquer um dos métodos mencionados anteriormente.

Se você quiser garantir que os proxies e o software de segurança no lado do cliente não interfiram com a compressão GZIP, você pode substituir o trecho de código acima pelo abaixo.

<IfModule mod_deflate.c>
  # force compression for clients that mangle 'Accept-Encoding' request headers
  <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
  </IfModule>

  # compress all output with one of the following file extensions
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/atom+xml" \
                                  "application/javascript" \
                                  "application/json" \
                                  "application/ld+json" \
                                  "application/manifest+json" \
                                  "application/rdf+xml" \
                                  "application/rss+xml" \
                                  "application/schema+json" \
                                  "application/geo+json" \
                                  "application/vnd.ms-fontobject" \
                                  "application/wasm" \
                                  "application/x-font-ttf" \
                                  "application/x-javascript" \
                                  "application/x-web-app-manifest+json" \
                                  "application/xhtml+xml" \
                                  "application/xml" \
                                  "font/eot" \
                                  "font/opentype" \
                                  "font/otf" \
                                  "font/ttf" \
                                  "image/bmp" \
                                  "image/svg+xml" \
                                  "image/vnd.microsoft.icon" \
                                  "text/cache-manifest" \
                                  "text/calendar" \
                                  "text/css" \
                                  "text/html" \
                                  "text/javascript" \
                                  "text/plain" \
                                  "text/markdown" \
                                  "text/vcard" \
                                  "text/vnd.rim.location.xloc" \
                                  "text/vtt" \
                                  "text/x-component" \
                                  "text/x-cross-domain-policy" \
                                  "text/xml"
  </IfModule>

  # define and map media types to their appropriate encoding type    
  # Using SVG format (Scalable Vector Graphics) is highly recommended to    
  # load logos, icons, text, and simple images. You can compress .SVG files
  # further using GZIP to create .SVGZ files. However, most browsers don’t
  # know that they need to decompress them first if they’re not served
  # without an appropriate ‘content-encoding’ HTTP response header. Thus,
  # these images wouldn’t show up in the browser. Hence, this module.

  <IfModule mod_mime.c>
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
  </IfModule>

</IfModule>

Você pode saber mais sobre todas as diretrizes utilizadas aqui, indo ao seu repositório de códigos e seguindo todos os recursos ali vinculados.

3. Ativar Compressão GZIP no Nginx Web Server

De acordo com a Netcraft, Nginx é o servidor web mais utilizado pelos computadores voltados para a web. Se a tendência atual continuar, logo ultrapassará o Apache para se tornar o servidor web mais usado por sites ativos. Até mesmo a Kinsta usao Nginx para potencializar suas soluções de hospedagem otimizadas em termos de desempenho.

Você pode ativar a compressão GZIP no seu servidor web Nginx usando as diretrizes definidas no módulo ngx_http_gzip_module.

Para começar, adicione as diretrizes dadas abaixo ao seu arquivo nginx.conf. Normalmente, você pode encontrar este arquivo no diretório /etc/nginx/nginx.conf de seu servidor.

# enables GZIP compression
gzip on; 

# compression level (1-9)
# 6 is a good compromise between CPU usage and file size
gzip_comp_level 6;

# minimum file size limit in bytes to avoid negative compression outcomes
gzip_min_length 256;

# compress data for clients connecting via proxies
gzip_proxied any;

# directs proxies to cache both the regular and GZIP versions of an asset
gzip_vary on;

# disables GZIP compression for ancient browsers that don't support it
gzip_disable "msie6";

# compress outputs labeled with the following file extensions or MIME-types
# text/html MIME-type is enabled by default and need not be included
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

Se seu site serve grandes arquivos JS e CSS, então você pode aumentar o tamanho do buffer usado para compressão adicionando a seguinte diretiva ao seu arquivo nginx.conf:

# sets the 'number' and 'size' of buffers for GZIP compression
# default buffer size is 4K or 8K depending on the platform
gzip_buffers 16 8k;

Não se esqueça de recarregar o Nginx após salvar seu arquivo nginx.conf.

sudo service nginx reload

Finalmente, você deve testar para ver se seu servidor tem a compressão GZIP habilitada. Você pode consultar a documentação Nginx para obter uma lista atualizada de todas as diretrizes ngx_http_gzip_module.

4. Ativar Compressão GZIP no Servidor Web IIS

O Microsoft Internet Information Services (IIS) é o terceiro servidor web mais popular em uso atualmente. O IIS é implantado principalmente em ambientes empresariais rodando em Windows, especialmente para a configuração de servidores intranet e extranet específicos da empresa.

É raramente usado para hospedar sites WordPress devido a vários problemas de compatibilidade.

No entanto, se você se encontrar em uma daquelas raras situações em que você precisa ativar a compressão GZIP no IIS, você pode consultar a documentação da Microsoft para começar. Você também pode achar útil este tópico sobre o Stack Overflow.

Alternativas à Compressão GZIP

O mundo da compressão de dados na web está sempre avançando. Com o peso médio das páginas aumentando constantemente, a tecnologia da web está tentando alcançá-la também para tornar mais eficiente a transferência de dados através da web.

Aumento no peso da página com o tempo (Fonte: HTTPArchive)
Aumento no peso da página com o tempo (Fonte: HTTPArchive)

Um novo algoritmo de compressão ganhou popularidade generalizada ao longo dos últimos anos: Brotli. A compressão de fontes web WOFF2 foi o foco principal de Brotli originalmente, mas desde então tem se expandido para suportar a compressão de qualquer tipo de dados.

Brotli comprime os dados melhor do que GZIP, mas requer consideravelmente mais tempo e recursos para comprimir os dados. Entretanto, seu tempo de descompressão é comparável ao do GZIP, embora ainda seja um pouco mais lento.

Suporte de Brotli através de vários navegadores
Suporte de Brotli através de vários navegadores

A maioria dos navegadores suporta Brotli hoje, mas usá-lo em sites WordPress ainda é um pouco complicado. Você deve hospedar seu site com um provedor de hospedagem que suporte Brotli ou permita que você instale a biblioteca Brotli. A maioria dos hosts WordPress gerenciados ainda não o suportam, mas se você usar um CDN como o Cloudflare ou KeyCDN, você pode habilitá-lo facilmente.

Resumo

Uma web bem otimizada é ótima para todos. Os usuários adoram websites snappier, os donos de websites adoram a redução dos custos de hospedagem, e os anfitriões da web adoram a otimização alcançada em seus servidores. Técnicas de compressão como GZIP são uma das melhores maneiras de acelerar o tempo de carregamento de páginas para seus visitantes.

Os proprietários de sites WordPress podem acelerar seus sites instantaneamente ao permitir a compressão GZIP. Kinsta habilita por padrão em todos os seus servidores, mas para outros, este artigo cobre várias maneiras de  ativar a compressão GZIP em vários servidores web.

A velocidade é fundamental para qualquer website. Basta comprimir!

Salman Ravoof

Salman Ravoof é um desenvolvedor web autodidata, escritor, criador e grande admirador de Software Livre e de Código Aberto (FOSS). Além de tecnologia, ele se entusiasma com ciência, filosofia, fotografia, artes, gatos e comida. Saiba mais sobre ele em seu site e conecte-se com Salman no X.