Comprimir (gzip) Javascript e CSS

Esta evolução fez com que o tempo de carregamento das páginas aumenta-se consideravelmente. Felizmente com esta evolução ocorreu também um aumento da velocidade dos serviços contratados para fornecimento de Internet. No entanto apesar do aumento da velocidade contratada muitas vezes as páginas demoram mais de 10 segundos a abrir o que para o internauta é um bilhete para fechar o Browser.

Já anteriormente havia abordado o assunto do GZIP no artigo Acelere o seu website ou blog, no entanto neste artigo vou optar por uma solução diferente e talvez mais eficiente. Uma vez que vai funcionar em todos os webservers baseados em Apache (independentemente da configuração fornecida pela empresa de alojamento), reduz o consumo de CPU do servidor além de aumentar drasticamente o tempo de load de alguns sites.

Comprimir Ficheiros Javascript:

#1 - Siga as intruçõesdo ponto 3 do artigo que lhe referi nesta página anteriormente. Ou seja utilize o Dojo e o Dean Packeer, para comprimir o código do seu ficheiro .js. No caso da Framework Mootools 1.2 o tamanho após esta compressão deverá rondar os 56KB (cerca de 35KB a menos).

#2 - Faça download do programa 7zip e comprima o ficheiro resultante do ponto anterior. Deverá obter um ficheiro de extensão .js.gz, cujo tamanho no caso do Mootools 1.2 deverá rondar os 25KB (65KB menos que o original). Faça o upload para o seu servidor.

#3 - Realizar o load da versão gzip do ficheiro ao invés da versão descomprimida:

Em teoria seria só necessário substituir o código normal de chamada ao script:

javascript
<script type="text/javascript" src="mootools.js"></script>

javascript
<script type="text/javascript" src="mootools.js.gz"></script>

javascript
<script type="text/javascript" src="mootools.js"></script>

htaccess
<FilesMatch "\\.js.gz$">
  ForceType text/javascript
  Header set Content-Encoding: gzip
</FilesMatch>
<FilesMatch "\\.js$">
  RewriteEngine On
  RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
  RewriteCond %{HTTP:Accept-Encoding} gzip
  RewriteCond %{REQUEST_FILENAME}.gz -f
  RewriteRule (.*)\.js$ $1\.js.gz [L]
  ForceType text/javascript
</FilesMatch>

Comprimir o CSS:

htaccess
<FilesMatch "\style\.css\.gz$">
	Header set X-Compression "gzip"
	Header set Content-Encoding "gzip"
	AddType text/css .gz
</FilesMatch>
<FilesMatch "\\.css$">
AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]
</FilesMatch>

Para ambos (JS e CSS), algo do género deverá funcionar:

htaccess
<FilesMatch "\\.js.gz$">
  ForceType text/javascript
  Header set Content-Encoding: gzip
</FilesMatch>
<FilesMatch "\style\.css\.gz$">
	Header set X-Compression "gzip"
	Header set Content-Encoding "gzip"
	AddType text/css .gz
</FilesMatch>
RewriteEngine On 
AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]