Compressão: Como tornar um site mais rápido

Este artigo foi criado em Outubro de 2009 e encontra-se desactualizado.
Clique aqui para ler uma versão actualizada do mesmo.

A velocidade com que um site carrega é crucial para a satisfação do utilizador. Os acessos à Internet estão cada vez mais rápidos e se temos que esperar mais do que 3 segundos para aceder, o mais provável é voltarmos atrás e escolher outro site para visitar.

Mas, se o nosso público alvo não usa o Netscape 1.0 no Windows 95, podemos usar a compressão para tornar o carregamento de um site mais rápido.

Tunel

Hoje em dia todos os browsers aceitam compressão Gzip, e não é de admirar, com a compressão podemos reduzir o tamanho de um site em 70%! E o melhor de tudo é que podemos obter estes resultados com apenas algumas linhas de código, desde que o servidor HTTP seja o Apache.

Compressão de ficheiros CSS e JS

Os primeiros ficheiros a serem carregados por um browser são os CSS e JS. Estes são provavelmente os ficheiros que menos alteramos e podem ser facilmente comprimidos para Gzip com um programa como o 7-Zip e obter uma redução de tamanho considerável.

Vamos então usar o 7-Zip para comprimir um ficheiro CSS para Gzip, passamos assim a ter dois ficheiros para colocar no servidor, por exemplo um style.css e um style.css.gz.

Para que este ficheiro comprimido seja enviado caso um browser o peça devemos adicionar as seguintes linhas de código a um ficheiro .htaccess.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<FilesMatch .*\.js.gz$>
  ForceType text/javascript
  Header set Content-Encoding: gzip
  Header set Vary: Accept-Encoding
</FilesMatch>
<FilesMatch .*\.css.gz$>
  ForceType text/css
Header set Content-Encoding: gzip
Header set Vary: Accept-Encoding
</FilesMatch>

RewriteOptions Inherit
ReWriteCond %{HTTP:accept-encoding} (gzip.*)
ReWriteCond %{REQUEST_FILENAME} !^.+\.gz$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+) $1.gz [L]

Com este código vamos verificar se existe um ficheiro .css.gz ou .js.gz, e caso o browser peça o conteúdo comprimido o servidor envia esse ficheiro. Uma alteração simples que permite reduzir o tráfego utilizado pelo nosso servidor e pelo utilizador, resultando num site ligeiramente mais rápido. É uma situação onde ambas as partes ganham.

Compressão de ficheiros de texto

Se não tivermos um sistema de caching mas quisermos enviar as páginas dinâmicas do nosso site comprimidas podemos usar o mod_deflate do Apache. O que este módulo faz é comprimir em Gzip as nossas páginas no servidor, em tempo real, antes de as enviar para o utilizador.

Claro que isto vai consumir recursos a nível de processador e aqui já é necessário verificar se o servidor onde estamos tem capacidade para tal, principalmente se estivermos numa conta de alojamento partilhado. Pessoalmente acho que faz todo o sentido sacrificar alguns ciclos de processamento para comprimir o conteúdo e tornar o carregamento do site mais rápido.

Tal como anteriormente, para comprimir todo o conteúdo html no nosso site devemos adicionar as seguintes linhas de código a um ficheiro .htaccess.

1
2
3
<IfModule mod_deflate.c>
  AddOutPutFilterByType DEFLATE text/html text/xml
</IfModule>

Isto irá comprimir todo o conteúdo em HTML e XML no site em tempo real. Não irá no entanto comprimir os ficheiros CSS e Javascript, é aconselhável usar o método anterior para poupar recursos usar o método anterior.

No entanto se quisermos comprimir também os ficheiros CSS e JS em tempo real, no caso de serem criados dinamicamente, devemos adicionar text/css text/javascript a seguir a text/xml.

Para verificar se o conteúdo está a ser enviado comprimido em Gzip podemos usar a ferramenta de Compressão HTTP.

 
Copyright © 1985 - 2017 Eduardo Maio. Alguns direitos reservados.
eduardomaio.net - Às vezes mais valia ser Agricultor do que Programador
Ao navegar no blog eduardomaio.net está a concordar com os termos legais e de privacidade.