Fala pessoal, beleza?

Hoje estou aqui para falar de um assunto que pode não ser muito conhecido por alguns, que é a compactação gzip/deflate.

Essa técnica, nada mais é do que a compactação dos arquivos solicitados pelo navegador (browser) antes deles serem enviados pelo servidor.

Fluxo de Requisição e Resposta HTTP

Primeiro vou começar explicando como funciona quando fazemos uma requisição sem utilizar essa compactação, veja a imagem abaixo.

Vamos supor que temos um arquivo CSS em nosso site, através do HTML abaixo:

<link rel="stylesheet" href="estilo.css" type="text/css"/>

1. navegador solicita o arquivo estilo.css ao servidor
2. servidor encontra o arquivo e lê
3. servidor retorna o arquivo com código 200 (OK)
4. navegador exibe o resultado da página aplicada com o estilo CSS

Otimizando

Acima temos o fluxo de uma requisição HTTP, funciona muito bem, mas podemos otimizar usando compactação, veja.

1. navegador solicita o arquivo estilo.css dizendo que aceita compactação gzip
2. servidor encontra o arquivo e compacta (aqui está a "mágica")
3. servidor responde com o arquivo compactado
4. navegador descompacta, e exibe a página com estilo aplicado

Bem simples né? Agora invés de fazermos download de um arquivo de 70KB, baixamos apenas 5KB pois usamos a compressão. É uma economia incrível..

Ativando compressão no Apache

Como já sabemos o que é a compactação e seu benefício, vamos colocar em prática ativando ela no servidor web Apache.

O Apache tem duas formas de compressão, mod_deflate e mod_gzip (ambos são módulos), irei usar mod_deflate por ser mais simples e mais utilizado, mas fica a seu critério. Para isso precisamos ativar o módulo, caso você esteja no Ubuntu, execute o comando sudo a2enmod deflate e pronto, se você usa Windows com WAMP, basta iniciar o gerenciador do WAMP -> Apache -> Módulos -> mod_deflate, pronto! Não esqueça de reiniciar o Apache após a ativação..

Vou usar meu site (http://glaucocustodio.com) como exemplo prático para ativar a compactação. Abaixo temos uma imagem que mostra uma requisição ao arquivo jquery.js sendo feita sem compactação gzip/deflate, temos que fazer download de 91.7KB.

Como já sei que no servidor de meu site o mod_deflate já está ativo, adiciono o código abaixo no arquivo .htaccess na raiz do meu site para ativar a compactação.

<IfModule mod_deflate.c>
# Insert filter
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
AddOutputFilterByType DEFLATE text/html

SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

Esse código verifica se o módulo deflate está ativo (IfModule), define compactação deflate por tipos através das linhas AddOutputFilterByType.., garante que navegadores antigos (como Netscape 1.0) não terão compactação (pois não suportam a descompressão) e evita que imagens sejam comprimidas, pois a maioria delas já são e não tem necessidade (assim como vídeos e arquivos de áudios).

Após subir o arquivo no servidor e analisar as requisições, veja o que temos.

Observe a linha Content-Encoding e veja que a compactação deflate/gzip está ativa agora e o mais impressionante é o tamanho do arquivo baixado, apenas 32.4KB, ou seja, reduzimos 2/3 do peso do arquivo apenas com essa técnica..

Espero que tenha ajudado e sido claro nesse tutorial.. O que vocês acharam?

Até mais!