Fazer com que os navegadores armazenem em cache arquivos estáticos no nginx

Este tutorial explica como você pode configurar o nginx para definir o cabeçalho HTTP Expires e a diretiva max-age do cabeçalho HTTP Cache-Control de arquivos estáticos (como imagens, arquivos CSS e Javascript) para uma data no futuro, de modo que esses arquivos sejam armazenados em cache pelos navegadores de seus visitantes. Isso economiza largura de banda e faz com que seu site pareça mais rápido (se um usuário visitar seu site pela segunda vez, os arquivos estáticos serão buscados do cache do navegador).

Não dou nenhuma garantia de que isso funcionará para você!

1 Nota Preliminar

Estou assumindo que você tem uma configuração nginx funcionando, por exemplo, como mostrado neste tutorial: Instalando Nginx Com PHP5 (E PHP-FPM) E Suporte a MySQL (LEMP) No Ubuntu 12.04 LTS

2 Configurando o nginx

O cabeçalho HTTP Expires pode ser definido com a ajuda da diretiva expires, que pode ser colocada dentro de http {}, server {}, location {}, ou uma declaração if dentro de um bloco location {}. Normalmente, você a usará em um bloco location para seus arquivos estáticos, por exemplo, da seguinte forma:

| location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; } |

No exemplo acima, todos os arquivos .jpg, .jpeg, .png, .gif, .ico, .css e .js recebem um cabeçalho Expires com uma data 365 dias no futuro a partir do tempo de acesso do navegador. Portanto, você deve ter certeza de que o bloco location {} contém realmente apenas arquivos estáticos que podem ser armazenados em cache pelos navegadores.

Recarregue o nginx após suas alterações:

/etc/init.d/nginx reload

Você pode usar as seguintes configurações de tempo com a diretiva expires:

• off faz com que os cabeçalhos Expires e Cache-Control não sejam modificados.
• epoch define o cabeçalho Expires para 1 de janeiro de 1970 00:00:01 GMT.
• max define o cabeçalho Expires para 31 de dezembro de 2037 23:59:59 GMT, e o Cache-Control max-age para 10 anos.
• Um tempo sem um prefixo @ significa um tempo de expiração relativo ao tempo de acesso do navegador. Um tempo negativo pode ser especificado, o que define o cabeçalho Cache-Control para no-cache. Exemplo: expires 10d; ou expires 14w3d;
• Um tempo com um prefixo @ especifica um tempo absoluto de expiração do dia, escrito na forma Hh ou Hh:Mm, onde H varia de 0 a 24, e M varia de 0 a 59. Exemplo: expires @15:34;

Você pode usar as seguintes unidades de tempo:

• ms: milissegundos
• s: segundos
• m: minutos
• h: horas
• d: dias
• w: semanas
• M: meses (30 dias)
• y: anos (365 dias)

Exemplos: 1h30m para uma hora e trinta minutos, 1y6M para um ano e seis meses.

Observe também que se você usar um cabeçalho Expires para um futuro distante, terá que mudar o nome do arquivo do componente sempre que o componente mudar. Portanto, é uma boa ideia versionar seus arquivos. Por exemplo, se você tiver um arquivo javascript.js e quiser modificá-lo, deve adicionar um número de versão ao nome do arquivo do arquivo modificado (por exemplo, javascript-1.1.js) para que os navegadores tenham que baixá-lo. Se você não mudar o nome do arquivo, os navegadores carregarão o arquivo (antigo) do cache.

Em vez de basear o cabeçalho Expires no tempo de acesso do navegador (por exemplo, expires 10d;), você também pode baseá-lo na data de modificação de um arquivo (observe que isso funciona apenas para arquivos reais que estão armazenados no disco rígido!) usando a palavra-chave modified que precede o tempo:

expires modified 10d;

3 Testando

Para testar se sua configuração funciona, você pode instalar o plugin Live HTTP Headers para Firefox e acessar um arquivo estático através do Firefox (por exemplo, uma imagem). Na saída do Live HTTP Headers, você deve agora ver um cabeçalho Expires e um cabeçalho Cache-Control com uma diretiva max-age (max-age contém um valor em segundos, por exemplo, 31536000 é um ano no futuro):

4 Links

• nginx HttpHeadersModule: http://wiki.nginx.org/HttpHeadersModule
• Live HTTP Headers Plugin para Firefox: https://addons.mozilla.org/en-us/firefox/addon/live-http-headers/

Sobre o Autor

Falko Timme é o proprietário da Timme Hosting (hospedagem web nginx ultra-rápida). Ele é o principal mantenedor do HowtoForge (desde 2005) e um dos desenvolvedores principais do ISPConfig (desde 2000). Ele também contribuiu para o livro da O’Reilly “Administração de Sistemas Linux”.