Como comprimir JavaScript e CSS com GZIP?

Até agora conhecemos as vantagens de comprimir os arquivos e um primeiro método para comprimir o código de páginas PHP enviadas ao navegador. A ideia da compressão deve ser extendida também a outros tipos de arquivos, e não somente ao código HTML das páginas web, mas aos demais arquivos que são responsáveis por estilizar as páginas e outras funções.

Por | @jonathanlamimkt Hardware

Até agora conhecemos as vantagens de comprimir os arquivos e um primeiro método para comprimir o código de páginas PHP enviadas ao navegador. A ideia da compressão deve ser extendida também a outros tipos de arquivos, e não somente ao código HTML das páginas web, mas aos demais arquivos que são responsáveis por estilizar as páginas e outras funções.

O código da página, como sabemos, é composto por vários elementos, como o próprio HTML do documento, imagens, folhas de estilo, arquivos JavaScript, etc. As imagens na realidade já estão comprimidas, pois os formatos utilizados nas páginas web, como GIF, JPG ou PNG já têm a compressão do próprio fomrato gráfico. Arquivos como as folhas de estilo (css) ou os códigos JavaScript (js) são criados como arquivo de texto plano, que não possui nenhuma compressão. Por esse motivo são ideais para serem enviados comprimidos ao navegador.

Para que fique bem claro, pensemos no código CSS de um site qualquer. O arquivo .css por exemplo tem um tamanho de 40Kb sem compressão, enviando esse arquivo comprimido por GZIP ao navegador, ele passará a ter cerca de 7.5Kb. O certo é que o CSS se transfere uma vez, na primeira visita do usuário, logo as páginas seguintes usam o arquivo que está armazenado no cache ao invés de requisitá-lo novamente ao servidor web. Então, com o arquivo em um tamanho menor, o carregamento da página vai ser muito mais rápido.

Os arquivos JavaScript também podem ser comprimidos para obter vantagens semelhantes, igual às do CSS, conseguindo com a compressão um tamanho entre 60 a 90% menor que os arquivos não comprimidos. Pensando que os sites mais modernos utilizam uma quantidade maior de códigos JavaScript, a compressão GZIP será fundamental para uma carga rápida do site.


Configurar um htaccess para comprimir arquivos CSS/JS ou similares


Agora que já sabemos as vantagens de enviar os arquivos de código comprimidos ao navegador, vejamos como fazer a configuração do Apache para poder executar o processo de compressão. A maneira mais cômoda e ao alcance de mais pessoas, para comprimir os arquivos JS e CSS é definir um arquivo htaccess com as diretrizes de configurção do servidor.

No arquivo htaccess, que contém o texto de configuração do Apache, vamos colocar várias linhas de código para solicitar ao Apache que envie os arquivos comprimidos, conforme as extensões especificadas.

Por exemplo, com o seguinte código estamos informando que os arquivos que tenham a extensão css devem ser enviados comprimidos ao navegador.

SetOutputFilter DEFLATE
</Files>


Observe o *.css para indicar os tipos de arquivos a enviar comprimidos. Observe também que está sendo solicitado o uso do método DEFLATE para a compressão dos arquivos.

De uma maneira similar podemos definir a compressão dos arquivos JavaScript.

SetOutputFilter DEFLATE
</Files>


Dessse modo, podemos definir qualquer extensão de arquivo e o Apache se encarregará de enviá-lo comprimido ao navegador.

Vejam que o arquivo está comprimido sem que tenha sido necessário fazer rotinas de programação específicas durante o desenvolvimento a não ser configurar o arquivo htaccess.

Até a próxima!!

Também visto em: http://jlamim.com.br

Mais sobre: apache gzip css
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo