Comprimir (gzip) Javascript e CSS

07 Outubro 2008 Escrito por Gonçalo Martins

Com a evolução da Internet para a Web 2.0 os websites começaram a apresentar efeitos mais, ou menos complexos, uns aplicados com enormes quantidades de CSS, outros aplicados com Flash ou ainda muitos deles obtidos através de javascript.

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.

Estes tempos de load excessivos estão muitas vezes associados ao load de enormes ficheiros CSS e Javascript. Ultimamente tenho falado muito de Frameworks Javascript, a titulo de exemplo a framework Mootools 1.2 possui cerca de 90KB (descomprimida) e o Prototype 120KB. Agora será que tempo que estas framework levam a descarregar compensam os efeitos por elas produzidos? Talvez sim... mas não seria melhor se houvesse uma forma de comprimir ainda mais estes ficheiros?

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:

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

por

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

No entanto é aqui que os problemas começam. A maioria dos browsers realiza a descompressão do ficheiro .js.gz naturalmente, no entanto o safari nao o faz.

Na minha optica de ver a coisa existem duas formas de contrariar este problema:

#3.1 - Detectar os browsers com PHP e fazer o load dos ficheiros descomprimidos para o Safari, e o load dos ficheiros comprimidos para todos os restantes browsers.

#3.2 - Utilizar .htaccess

Manter a chamada normal aos scripts:

colocar o ficheiro mootools.js.gz na mesma pasta do mootools.js e adicionar as seguintes linhas ao .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>

Para todos os browsers diferentes de Safari ele realiza o load do ficheiro .js.gz.
Adiciona ainda os headers correctos ao browser.

ps:
Se já possuir o "RewriteEngine On" no seu .htaccess remova-o do código acima.
Se a versão gzip do ficheiro não existir na mesma pasta ele serve simplesmente a versão descomprimida.

Comprimir o CSS:

#1 - Utilize uma das seguintes ferramentas para reduzir o tamanho do seu ficheiro CSS: CSSDRIVE | CLEANCSS | CSS Compressor

#2 - Faça o load normal do seu ficheiro .css. E copie o ficheiro css.gz (comprimido com o 7zip) para a mesma directoria.

#3 - .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]

Artigos Relacionados

Trackback(0)

TrackBack URI for this entry



Rodrigo Alexandre Coelho Outubro 07, 2008	Boa dica, especialmente para desenvolvedores. A questão do tempo excessivo de carregamento de alguns site é realmente um problema sério e que certamente afasta os internaltas mais impacientes.


Gustavo D. Outubro 08, 2008	Excelente se funcionar, faltou dizer qual a relação do tamanho que conseguimos iminuir e se ja foi estado...


Gonçalo M Outubro 08, 2008	@ Gustavo Funciona ;) Não disse a taxa de compressão que se consegue atingir uma vez que esta irá variar de ficheiro pra ficheiro. No entanto quase que lhe posso garantir taxas acima dos 60% para ficheiros Javascript maiores.


Chris Benseler Dezembro 30, 2008	Opá, belo artigo! Compressão pelo webserver é a melhor saída, mesmo. Só faço uma ressalva no seu texto: você diz "sites baseados em Apache"; o termo está errado, pois um site não sei baseia no webserver (você pode servir o mesmo site em diversos, como o Apache, IIS, etc...). Abraço!


Isaac Nathan Abril 14, 2009	"tempo de carregamento das páginas aumenta-se", seria 'aumentasse'. Bacana o artigo


Rina Noronha Abril 30, 2010	Olá Gonçalo, gostaria de conversar com você sobre publicação de artigos. Pode me mandar um email? Este endereço de e-mail está protegido de spam bots, pelo que necessita do Javascript activado para o visualizar


Achar Janeiro 20, 2011	Ola muito bom seu artigo vendo aqui em meu site o google speed disse que posso reduzir em até 511 kb, 23 solicitações usando o gzip.

Escreva o seu Comentario

Comprimir (gzip) Javascript e CSS

Comprimir Ficheiros Javascript:

Comprimir o CSS:

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

Artigos Relacionados

Nuvem de Tags