Cache de navegador com htaccess

Todo Webmaster sabe que é essencial realizar cache de navegador para os arquivos de um site por diversos motivos, entre eles economizar banda, acelerar o carregamento e principalmente, melhorar a experiência do usuário. Entretanto, as informações sobre este tema, ou até mesmo os guias oficiais são confusos, na maior parte em inglês, o que dificulta muito para os iniciantes. Pretendo neste guia abordar todas as maneiras de se realizar cache de navegador utilizando o arquivo de controle .htaccess do Apache.

Com a evolução da Internet, a tendência é que os sites passem a ser mais dinâmicos e ricos em conteúdo. A experiência do usuário nos últimos anos foi elevada a patamares inimagináveis, mas tudo tem o seu preço. Para se criar um site, é necessário o uso de diversos tipos de arquivos, como textos, imagens, mídias e etc. A partir do momento que o usuário acessa um site, é baixado para o navegador dele todos estes arquivos, e a cada novo acesso, tudo é novamente carregado, causando desperdício de banda e lentidão.

O que é Cache?

Antes de tecer comentários sobre o Apache, o arquivo de controle .htaccess e servidores, vamos entender o que é o Cache de navegador. A partir do momento que o usuário acessa o seu site, todo o conteúdo disponível, como imagens, estilos e etc é baixado para o seu computador, permanecendo em uma área temporária do disco rígido. A partir do primeiro acesso, podemos instruir o navegador a guardar estes arquivos anteriormente baixados em um local especial chamado Cache, assim como definir o tempo que ele ficará armazenado. Assim, quando o usuário acessar o seu site novamente ou navegar por outras páginas, ao invés de precisar baixar toda a página novamente, o seu navegador buscará os conteúdos diretamente do Cache, caso ele não tenha algo no Cache ou esteja expirado o tempo de permanência, ele solicita ao servidor do site.

É muito mais rápido buscar algo do Cache do que em um servidor web, que muitas vezes está em outro país.

Como funciona o acesso a um site?

Quando um site é acessado, ocorrem diversos pedidos pelo navegador, e respostas pelo servidor do site. Nestes pedidos, são enviados informações referente ao tipo de conteúdo, linguagem esperada, e etc. Isto é conhecido como Request Header ou Cabeçalho de Requisição. Após este pedido o servidor retorna a resposta, com as imagens, textos, estilos e etc. Este é o Response Header ou Cabeçalho de Resposta. Para um site comum, são enviados em média 80 Requests Headers, e recebidos consequentemente 80 Responses Headers. Para cada pedido uma resposta. Veja na imagem abaixo o acesso ao site do Google, no exemplo 1 pedido e 1 resposta:

Pedido ao site do Google (Request Header)

GET / HTTP/1.1

Host: www.google.com.br

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:9.0.1) Gecko/20100101 Firefox/9.0.1

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: pt-br,pt;q=0.8,en-us;q=0.5,en;q=0.3

Accept-Encoding: gzip, deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Connection: keep-alive

Resposta do servidor (Response Header)

HTTP/1.1 200 OK

Date: Sat, 21 Jan 2012 08:49:54 GMT

Expires: -1

Cache-Control: private, max-age=0

Content-Type: text/html; charset=UTF-8

Content-Encoding: gzip

Server: gws

Content-Length: 18390

X-XSS-Protection: 1; mode=block

X-Frame-Options: SAMEORIGIN

Notem que, o servidor do Google enviou a resposta OK para o pedido. Existem diversos tipos de respostas, isso você pode estudar aqui.
Quanto mais solicitações HTTP como essas ocorrerem em um acesso a um site, mais tempo vai levar para a página ser completamente carregada para o usuário. Por isso a necessidade do Cache, com ele, como já foi falado, é possível buscar o conteúdo na própria máquina do usuário, desde que este conteúdo já esteja armazenado em Cache. Diminuindo as requisições HTTP, aumentamos a velocidade de um site.

Cache de navegador com .htaccess
Módulos que precisam estar ativos no Apache: mod_expires e mod_headers

Após esta pequena introdução de como funciona o acesso a um site, vamos aprender como realizar um Cache eficiente no servidor Apache, utilizando o arquivo de controle .htaccess. A partir daqui, pressupôe-se que você tenha conhecimentos mínimos de desenvolvimento web, e que saiba criar e/ou manipular o arquivo .htaccess.

Existem duas formas de se realizar Cache com .htaccess:

1. Cabeçalho Expires: Com o cabeçalho expires, é possível determinar a expiração de um arquivo, colocando-o assim em Cache. Ele deve ser utilizado para navegadores que utilizam o protocolo HTTP 1.0 para a comunicação com o servidor.
2. Cabeçalho Cache-Control: Com o cabeçalho Cache-Control, é possível determinar a expiração de um arquivo, colocando-o assim em Cache. Além disso, é possível determinar vários parâmetros adicionais, como tornar o Cache público ou privado. Ele deve ser utilizado para navegadores que utilizam o protocolo HTTP 1.1 para a comunicação com o servidor.

A dúvida de muitos é sobre qual usar? O correto é usar os dois, definidos com os mesmos tempos de expiração, pois o navegador que trabalhar com o protocolo HTTP 1.0, utilizará o Expires, já os navegadores modernos que trabalharem com o HTTP 1.1, utilizará o Cache-Control.

Utilizando o Cache com Expires

Em seu arquivo .htaccess, vamos enviar ao navegador o cabeçalho expires. Atenção, se os módulos apache mod_expires e mod_headers estiverem desativados em seu hospedagem, irá ocorrer um erro 500 em seu servidor.

ExpiresActive On

Com isso, será ativo o Expires. Agora precisamos definir o tempo de cache para cada tipo de arquivo, ou para todos ao mesmo tempo:

ExpiresByType

Com o ExpiresByType, definimos o tipo de arquivo que receberá determinado tempo de expiração. O tempo de expiração pode ser informado em segundos, minutos, horas, dias, semanas, meses e anos, sempre respeitando as regras de sintaxe corretas.

No exemplo abaixo, vamos definir um tempo de Expires padrão (default) para todos os tipos de arquivos de 1 dia:

ExpiresActive On

ExpiresDefault "access plus 1 day"

No exemplo abaixo, vamos utilizar o ExpiresByType para definir um cache de 7 dias para imagens JPEG. Assim, quando o usuário acessar o site pela primeira vez, ele receberá a imagem em seu navegador com a instrução de cache. Nos próximos 7 dias, caso ele acesse novamente o site, ele receberá a imagem em cache do seu próprio navegador.

ExpiresActive On

ExpiresByType image/jpeg "access plus 7 days"

Outros exemplos de utilização:

ExpiresActive On

ExpiresByType text/html "access plus 0 seconds"

ExpiresByType text/xml "access plus 0 seconds"

ExpiresByType application/xml "access plus 0 seconds"

ExpiresByType application/json "access plus 0 seconds"

 

# Feed RSS - 1 hora

ExpiresByType application/rss+xml "access plus 1 hour"

 

# Favicon - 1 semana

ExpiresByType image/vnd.microsoft.icon "access plus 1 week"

 

# Imagens, vídeo, audio - 1 semana

ExpiresByType image/gif "access plus 1 week"

ExpiresByType image/png "access plus 1 week"

ExpiresByType image/jpg "access plus 1 week"

ExpiresByType image/jpeg "access plus 1 week"

 

ExpiresByType video/ogg "access plus 1 week"

ExpiresByType audio/ogg "access plus 1 week"

ExpiresByType video/mp4 "access plus 1 week"

ExpiresByType video/webm "access plus 1 week"

 

# Webfonts - 1 ano

ExpiresByType font/truetype "access plus 1 year"

ExpiresByType font/opentype "access plus 1 year"

ExpiresByType font/woff "access plus 1 year"

ExpiresByType image/svg+xml "access plus 1 year"

 

# CSS / jScript - 5 dias e 2 horas

ExpiresByType text/css "access plus 5 days 2 hours"

ExpiresByType application/javascript "access plus 5 days 2 hours"

ExpiresByType text/javascript "access plus 5 days 2 hours"

Você pode também aplicar / desativar o Expires em arquivos específicos, com a função FilesMatch (Expressão Regular):

# Expires somente no arquivo estilo.css, formato GMT

"estilo\.css$">

Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"

 

# Desativar Expires somente no arquivo index.html

"estilo\.css$">

Header unset Expires

O único problema de se utilizar Expires para arquivos específicos é que seria necessário estar sempre alterando o tempo de Expiração no código, visto que não é feito um “plus” automático como no Exemplo anterior.

Utilizando o Cache com Cache-Control

A função do Cache-Control é exatamente a mesma do Expires, determinar o tempo de expiração (somente sem segundos) para qualquer tipo de arquivo, e ainda, determinar o tipo do cache, se ele será público e etc. Apenas navegadores modernos reconhecem o cabeçalho Cache-Control.

O Cache-Control pode receber 7 informações (separadas por vírgula):

• Max-Age: A informação mais importante. Com ela, definimos em segundos o tempo de expiração;
• Tipo de Cache:
• Public: O conteúdo do cache estará disponível para todos os usuários que utilizarem um mesmo navegador (em alguns navegadores é possível utilizar vários usuários). Sempre use o Tipo de Cache Public quando for utilizar em sites com SSL (HTTPS), pois existem alguns conflitos ao utilizar outros tipos, relacionados à cache e servidores proxys ;
• Private (default): O conteúdo do cache estará disponível apenas para o usuário específico;
• No-Cache: Não é armazenado em Cache;
• No-Store: O Cache é feito de forma temporária, não é armazenado;
• Must-Revalidate: Seguir rigorosamente as minhas regras de cache;
• Proxy-Revalidate: O mesmo do anterior, só que válido para proxys;

No exemplo abaixo, vamos definir um Cache-Control para imagens com tempo de 4 horas

# Cache-Control de 4 horas (14400 segundos) de tipo público

"\.(jpg|jpeg|png|gif|ico)$">

Header set Cache-Control "max-age=14400, public"

Podemos fazer usando somente as extensões dos arquivos como no exemplo acima, ou declarando o nome do arquivo individual (ou os nomes dos arquivos, se for mais de um):

# Cache-Control de 4 horas (14400 segundos) de tipo público

"(estilo\.css|imagem\.jpg)$">

Header set Cache-Control "max-age=14400, public"

Caso queira desativar o cache para certos tipos de arquivos, ou certas extensões:

# Desativar cache para o arquivo index.php

# O cabeçalho "pragma" é para compatibilidade com o IE

"index\.php$">

ExpiresActive Off

Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

Header set Pragma "no-cache"


Validadores de Cache

A fim de melhorar a performance do Cache, foram implementados os validadores de Cache. A idéia é, atualizar o cache quando o arquivo no servidor for atualizado. A princípio a idéia é ótima e todos deveriam usar os validadores, mas ao usá-los, sempre que alguém atualizar a página (F5), são enviados vários pedidos adicionais ao servidor para ver se o arquivo mudou, e isso pode ocasionar mais lentidão no acesso.

Como funciona?
Ao usar os validadores de cache, sempre que o tempo de expiração acabar ou o usuário atualizar a página (F5), o navegador irá perguntar ao servidor se o arquivo mudou (enviando o cabeçalho If-Modified-since se você usar o Last-Modified ou If-None-Match se você usar o E-Tag). O servidor então, verifica se o arquivo do servidor foi modificado ou atualizado, se sim, ele envia o arquivo com a resposta “200 OK”, caso contrário, ele retorna a resposta “304 Not Modified”.

Vantagem de usar os validadores de cache
O cache será atualizado sempre que o arquivo no servidor mudar, e o usuário atualizar a página.

Desvantagem de usar os validadores de cache
O navegador fará mais pedidos HTTP GET ao servidor, e consequentemente receberá as respostas 200 ou 304 caso não mudou. Isso causará um maior consumo de trafégo do servidor, e um pouco mais de lentidão no acesso. Ao desabilitar os validadores, o navegador confiará cegamente no tempo de expiração definido em Expires e Cache-Control.
Um outro problema com as E-Tags é que elas são construídas usando atributos que as tornam únicas para um servidor específico. A E-Tag não vai corresponder quando um navegador recebe o componente original de um servidor e depois tenta validar esse componente em um servidor diferente, uma situação que é muito comum em sites da Web que usam clusters ou nodes de servidores para lidar com solicitações.

Eu Lucas Peperaio particularmente não gosto de usar estes validadores, que apesar de serem úteis no ponto de manter o cache atualizado quando a página é recarregada, causa mais lentidão de acesso e um maior consumo de banda. Em meus projetos, eu prefiro removê-los, fazendo o navegador confiar cegamente no Expires / Cache-Control:

Header unset Etag

FileETag None

Header unset Last-Modified

Caso você não esteja usando os validadores e queira usar, faça assim:

FileEtag Mtime size

#O last-modified irá aparecer por padrão


Dicas de uso

• Só use os validadores de cache (Last-Modified ou E-Tag) se você NÃO estiver usando o Expires e o Cache-Control.
• Nos testes que você for fazendo no .htaccess, eu recomendo que você desligue o gerenciamento de cache do seu navegador no menu de opções (consulte o manual do navegador) ou, sempre que for necessário, limpe o cache para testar as alterações.
• Se for usar o validador de cache, não use os dois. Desabilite o E-tag ou o Last-Modified, para evitar redundância.
• Se você utilizar o Firefox ou o Chrome, instale a extensão Firebug para monitorar se os arquivos estão ficando em cache corretamente. No painel “rede” do firebug, todos os arquivos em cache ficam da cor cinza claro.
Bem, acredito que este é o maior guia de cache brasileiro, eu pelo menos não encontrei nenhum tão completo e em português como este, por isto decidi escrever. Espero que vocês desenvolvedores WEB, após este texto, tenham aprendido as melhores formas de implementar cache de navegador. Num próximo artigo em mostro como implementar cache com diversos servidores.
Fontes:
http://gtmetrix.com/leverage-proxy-caching.html
http://gtmetrix.com/leverage-browser-caching.html
http://www.askapache.com/htaccess/apache-speed-expires.html
http://httpd.apache.org/docs/2.0/mod/mod_expires.html
http://www.mnot.net/cache_docs/
http://homepages.dcc.ufmg.br/~joaoreis/Site%20de%20tutoriais/cdtc/cod-http.html
http://imasters.com.br/artigo/20286/redes-e-servidores/htaccess-direto-ao-ponto
http://developer.yahoo.com/performance/rules.html