O que é Gzip e porque ele acelera (muito) o seu site

Graças ao Gzip, seu site pode carregar muito mais rápido através do seu algoritmo de compressão (saiba como ativá-lo).

gzip

Possuir um site que carrega rápido é fundamental. Afinal de contas, cada segundo a menos no carregamento das suas páginas é uma oportunidade maior de alcançar pessoas com seu conteúdo. O Gzip te ajuda diretamente nisso.

No entanto, como ele é pouco conhecido pelos proprietários de sites e por quem contrata servidores de hospedagem, optamos por escrever esse material completo elucidando o que é o Gzip, qual a função dele e como ativá-lo no seu servidor.

Adiantamos que muitos servidores ou plugins de cache já ativam o Gzip automaticamente. Entretanto, caso queira verificar a ativação dele, os passos descritos nesse artigo te ajudarão.

Por último, lembre-se que a utilização do Gzip não é garantia de uma velocidade imensa do seu website. Claro, ele é capaz de otimizar o carregamento de uma forma surpreendente, mas outros fatores também influenciam o peso de suas páginas, principalmente imagens e a otimização de demais recursos do servidor, algo a ser explicado também nas próximas linhas.

O que é Gzip?

Gzip é um formato de arquivo, e também aplicação, usado em sistemas Unix para comprimir o HTTP (Hyper Text Transfer Protocol), que em português significa Protocolo de Transferência de Hipertexto, antes dele ser mostrado ao usuário.

Em termos muito mais simples, sabe o Winrar? Aquele programa para Windows que comprime seus arquivos para ficarem mais leves através dos formatos .rar ou .zip? O Gzip é uma espécie de “Winrar para servidores”.

Para quê serve o Gzip?

Ele funciona exclusivamente para diminuir o peso das páginas do seu site, comprimindo as informações textuais delas, e oferecendo de forma rápida e otimizada para os usuários.

Esse processo de compressão pode melhorar o tamanho dos arquivos do site em até 90%, garantindo uma evolução significativa no tempo de carregamento do site, diminuição de banda consumida para download dos arquivos quando acessados e redução de requisições em SSL.

Embora os termos técnicos acima possam assustar um pouco, eles podem ser resumidos em: “muito mais velocidade para seu site”.

No quadro abaixo, podemos ver o fator de compressão em scripts famosos na comunidade de desenvolvimento web.

Biblioteca JS/CCSTamanhoTamanho depois da compressão% de compressão
jquery-3.5.1.js281 KB83 KB70%
jquery-3.5.1..min.js88 KB31 KB65%
angular-1.8.0.js1343 KB330 KB75%
angular-1.8.0.min.js173 KB61 KB65%
bootstrap-4.5.2.css194 KB26 KB86%
bootstrap-4.5.2.min.css157 KB24 KB85%
foundation-6.6.3.css165 KB20 KB88%
foundation-6.6.3.min.css130 KB17 KB87%

A diferença de tamanho é surpreendente, não é mesmo? Por isso, é essencial ativar a compressão o quanto antes.

Quais os arquivos associados ao Gzip?

Mais conhecidos nos sistemas Linux que no Windows, os arquivos associados ao compressor de conexão são:

  • .gz: arquivo comprimido pelo algoritmo do Gzip.
  • .tar: usado para armazenar vários arquivos, mas não comprimi-los.
  • .tgz, .tar.gz, .gz: indica um arquivo .tar que foi comprimido.

Como funciona a compressão de dados em sites

Gzip

Existem diversas formas de comprimir um arquivo interno de determinado site. A forma mais utilizada, por exemplo, é a de diminuir os caracteres em branco e apagar linhas vazias.

Outra forma comum é através do Gzip. O algoritmo dele é um pouco diferente, mas a ideia simplificada pode ser facilmente entendida.

  1. Quando um servidor recebe uma requisição de uma página da web, ele verifica o cabeçalho da requisição e determina se o navegador suporta a compressão (os mais recentes não têm problemas com isso).
  2. Se suportar, o servidor gera uma marcação para a página antes de se pôr na tarefa de comprimir os arquivos.
  3. O Gzip converte a marcação em um arquivo de dados comprimido que será entregue ao usuário final.
  4. Quando o usuário recebe os dados, o próprio navegador descomprime e disponibiliza os arquivos.

Claro que todo esse processo é bem mais trabalhoso do que parece, mas esses são os passos de forma resumida. Além do mais, como essa compressão depende do CPU do servidor, compressões maiores exigem mais da hospedagem.

Algo “invisível” aos nossos olhos, já que essas tarefas não estão a nível de usuário, principalmente quando se trata de hospedagens tradicionais.

5 vantagens de ativar a compressão na sua página

1. Permite uma compressão significativa

Embora haja concorrência para o Gzip, a sua taxa de compressão está praticamente de igual para igual com as maiores ferramentas de compressão do mercado. Como dito anteriormente, sua taxa de diminuição de arquivos varia de 60% a 90%.

2. Compressão e descompressão muito veloz

Tanto para comprimir os dados e otimizar a transferência deles para o usuário final, quanto para descomprimir as informações, o Gzip possui uma velocidade assustadora. Tanto é que ele “se paga”, uma vez que o tempo decorrido para execução do algoritmo consegue acelerar de forma efetiva as páginas.

3. Resistente a Codificação de Entropia

Existe um efeito chamado “Codificação de Entropia” que é quando se tenta comprimir um recurso já muito pequeno e a sobrecarga de usar o Gzip é maior que a economia da compressão (quase o inverso do tópico anterior). Felizmente, o Gzip é resistente a esse efeito.

4. É de código aberto

O Gzip foi criado como um substituto do programa de compressão patenteado pelos primeiros sistemas Unix, com o diferencial de ser gratuito e de código aberto. Sendo assim, outros programadores podem enviar suas alterações de código ao ponto de aumentarem drasticamente o poder de execução do compressor.

5. Possui apoio Universal

A compressão Gzip está em cerca de 82% de todos os sites rastreados pela W3Techs. Como a tecnologia é suportada por praticamente todos os clientes e servidores do mercado, há sempre a possibilidade de ativá-lo.

Como habilitar a compressão do Gzip

Servidores Apache

É possível habilitar o Gzip no seu site usando dois métodos: o mod_gzip ou o mod_deflate. A diferença entre eles é que o mod_deflate possui um melhor algoritmo de conversão, tendo módulos compatíveis com versões superiores do Apache, o que não torna o Gzip ineficiente, claro.

Antes mesmo de fazer os passos seguintes, salve uma cópia do seu arquivo .htaccess (ele fica na raiz da instalação do WordPress), uma vez que qualquer edição errada de código pode tirar o seu site do ar.

Feito o backup, a ativação via mod_deflate pode ser ativada implementando o seguinte código:

<IfModule mod_deflate.c>
         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
</IfModule>

O código acima vai comprimir todos os arquivos HTML, CSS, Javascript, XML e arquivos de fontes. Caso seu servidor não suporte o mod_deflate, use a alternativa mod_gzip com o código abaixo.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

NGINX Web Server

O software de servidor NGINX só comprime os arquivos HTML automaticamente. Para todos os outros, é necessário indicar essa vontade através de um comando no arquivo nginx.conf.

Primeiro, é necessário encontrar essa linha de código específica. Ela diz que o Gzip deve estar usando a compressão.

gzip on;

Logo após essa linha, copie e cole o código abaixo, tornando ele um complemento do que já estava ativado.

gzip_vary on;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
gzip_min_length 1000;
gzip_proxied no-cache no-store private expired auth;

Basta reiniciar a configuração no NGINX antes de testar se a compressão está de fato funcionando.

A segunda linha, a que diz “gzip_types” é a responsável por especificar os formatos de arquivos que serão comprimidos. É possível adicionar ou até mesmo remover itens, se achar que faz algum sentido.

A recomendação é deixar dessa maneira mesmo, mas para usuários mais avançados, saber disso talvez te ajude na sua estratégia.

Já na terceira linha, a que diz “gzip_min_lenght”, indica quantos bytes um arquivo precisa ter para que a compressão seja ativada nele. Como estamos lidando com bytes, o 1000 do código indica 1KB. Caso seja do seu interesse, altere o valor para abranger apenas arquivos relativamente maiores.

Hospedagem de site baseada em Windows

Caso utilize um servidor VPS para Windows, a ativação da compactação e compressão de arquivos pode ser feita através das linhas de código abaixo (basta digitá-las na linha de comando do servidor).

appcmd set config /section:urlCompression /doDynamicCompression:True

A linha acima permite a compressão em arquivos dinâmicos.

appcmd set config /section:urlCompression /doStaticCompression:True

E essa linha permite a compressão em arquivos estáticos. Se precisar de mais informações, verifique o guia oficial da Microsoft.

WordPress

Naturalmente, o WordPress não é uma configuração do servidor de hospedagem e sim um software instalado à parte. Logo, na teoria, não deveria ser possível utilizar o Gzip por ele. Felizmente, os plugins de performance conseguem modificar essas configurações do servidor.

Os principais plugins de otimização já fazem isso naturalmente. Como exemplo temos os WP Rocket, WP Super Cache ou o Enable Gzip Compression, que como o nome já indica, possui a função exata de habilitar o Gzip em servidores Apache.

Apenas fica o lembrete de não usar o WP Rocket e WP Super Cache ao mesmo tempo. Como os dois são soluções completas de cache, pode ser que a alteração de um impacte negativamente a otimização feita pelo outro, causando mais lentidão do que velocidade.

É possível, em alguns tipos de hospedagem, que uma mensagem de erro apareça dizendo que o proprietário do site (ou o próprio WordPress) não possui permissões o suficiente para alterar arquivos internos do servidor.

Caso isso aconteça, entre em contato com o suporte da sua hospedagem e peça diretamente para que o Gzip seja ativado de forma a otimizar o carregamento das suas páginas. Dificilmente o suporte te negaria essa alteração, visto que é algo relativamente simples para eles.

Como verificar se o Gzip está realmente funcionando no seu site?

1. Inspecionar elemento do Chrome

O recurso Inspecionar Elemento do navegador Google Chrome possui uma série de recursos impressionantes e pouco explorados por boa parte dos usuários. Com ele, por exemplo, é possível saber se o Gzip está ativado na sua hospedagem.

O processo para verificar isso é bem simples, basta ter acesso ao navegador → clicar com o botão direito em qualquer local da página do seu site → Ir em Inspecionar elemento.

A tela abaixo é a padrão, ela abre inicialmente na aba Elements, que te possibilita selecionar os elementos em HTML e alterar as propriedades deles, bem como adicionar novas através da aba Styles no canto direito.

Inspecionar Elemento

Ao lado da Elements, existem outras abas com funcionalidades diversas. Clique na Network. Ela mostra configurações de rede, bem como os arquivos baixados por todos os usuários ao acessarem suas páginas.

Normalmente, a aba Network está vazia. Para serem mostrados os arquivos, tecle F5. Dessa forma, o Chrome vai verificar, no momento de carregamento da página, qual o comportamento dos arquivos que a compõem.

Network do Inspecionar Elemento

Ao acessar um elemento, veja na aba headers se existe a informação “content-encoding: Gzip”. Se existir, a compressão está ativada. Caso contrário, não está.

Gzip no Inspecionar Elemento

Entretanto, se utiliza uma CDN, em alguns casos, pode ser que a codificação do arquivo não seja mostrada como a da figura acima, mas ainda assim ela pode estar sendo feita.

Caso não se recorde, uma CDN é uma uma Content Delivery Network, uma rede de distribuição de conteúdo, que espalha os arquivos do seu site em diversos servidores, de forma a sempre disponibilizar para o usuário o servidor mais próximo, algo que acelera o carregamento das páginas.

2. Google Pagespeed Insights

É possível verificar se a compressão está ativa através do Pagespeed Insights. Para isso, digite a URL do seu site no campo correspondente e procure a seguinte linha de informação no relatório gerado.

Ela aparece com a bolinha verde por termos ativado. Entretanto, se a compressão não estiver funcionando no seu site. Possivelmente, estará destacada a cor vermelha.

3. GiftOfSpeed

Outro site interessante para testar se o Gzip (ou outro tipo de compressão, como o Brotli) está ativado, é o GiftOfSpeed.

Para utilizá-lo, digite a URL do seu site no campo destacado e depois clique no botão “Test URL >>”.

Dessa forma, será mostrada a mensagem abaixo em verde, caso o Gzip esteja ativado no seu servidor de hospedagem.

GiftOfSpeed - Gzip e Brotli

Cuidados que deve ter ao ativar o Gzip no seu site

Embora o seu site fique muito mais rápido, ativar esse recurso tem um ponto negativo: se consome mais CPU da sua hospedagem.

Se é um site isolado, isso não é nenhum problema, principalmente em empresas de hospedagem de muita qualidade, como a Hostinger ou HostGator.

No entanto, se utiliza vários sites no mesmo servidor e ainda ativa o Gzip em todos eles, verifique se a CPU não está sendo sobrecarregada, uma vez que o conjunto de sites pode pesar para a execução das páginas.

Alternativas ao Gzip (o que usamos na nossa hospedagem)

Como o peso das páginas está aumentando gradativamente com o passar dos anos e com a evolução da tecnologia, é necessário que novos compressores surjam e uns se saiam melhores que outros.

Baseado nisso, é notável que o Gzip não ficaria sozinho por muito tempo e um novo concorrente surgiria para brigar pelo pódio. Esse concorrente é um novo algoritmo de compressão chamado Brotli.

Sendo desenvolvido pela Google, o Brotli começou com a compressão de fontes WOFF2, mas ele tem se expandido de forma considerável para comprimir qualquer tipo de dado.

Ele tende a comprimir as informações de forma superior que o Gzip, porém consome mais tempo e recursos. Logo, se trata de qual prefere dentre os dois.

Boa parte dos softwares navegadores suporte o Brotli, porém usá-lo em sites que usam WordPress pode ser algo complicado. O site deve ser hospedado em um provedor que rode o Brotli ou que, minimamente, permita a instalação da biblioteca. Felizmente, se utiliza o Cloudflare, ele é bem mais fácil de ser habilitado.

Conclusão: o que é o Gzip e como ativar

Ativar o Gzip pode acelerar o seu site de maneira assustadora. Para isso é necessário entender como funciona essa tecnologia e como ativá-la de forma efetiva.

Caso tenha alguma dúvida ou sugestão sobre o tema, os comentários estão liberados aqui abaixo. Felizmente, a utilização do Gzip é extremamente simples. Além dos inúmeros plugins, a ativação via .htaccess é apenas copiar e colar o código necessário.

Esperamos que tenha dado certo no seu site e que a velocidade dele já esteja sendo muito superior a antes. Um forte abraço!

Deixe um comentário