Hacer que los navegadores almacenen en caché archivos estáticos en nginx

Este tutorial explica cómo puedes configurar nginx para establecer el encabezado HTTP Expires y la directiva max-age del encabezado HTTP Cache-Control de archivos estáticos (como imágenes, archivos CSS y Javascript) a una fecha en el futuro para que estos archivos sean almacenados en caché por los navegadores de tus visitantes. Esto ahorra ancho de banda y hace que tu sitio web parezca más rápido (si un usuario visita tu sitio por segunda vez, los archivos estáticos se cargarán desde la caché del navegador).

¡No emito ninguna garantía de que esto funcione para ti!

1 Nota Preliminar

Asumo que tienes una configuración de nginx funcionando, por ejemplo, como se muestra en este tutorial: Instalación de Nginx con soporte para PHP5 (y PHP-FPM) y MySQL (LEMP) en Ubuntu 12.04 LTS

2 Configurando nginx

El encabezado HTTP Expires se puede establecer con la ayuda de la directiva expires que se puede colocar dentro de http {}, server {}, location {}, o una declaración if dentro de un bloque location {}. Normalmente lo usarás en un bloque location para tus archivos estáticos, por ejemplo, como sigue:

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

En el ejemplo anterior, todos los archivos .jpg, .jpeg, .png, .gif, .ico, .css y .js obtienen un encabezado Expires con una fecha 365 días en el futuro desde el tiempo de acceso del navegador. Por lo tanto, debes asegurarte de que el bloque location {} contenga realmente solo archivos estáticos que puedan ser almacenados en caché por los navegadores.

Recarga nginx después de tus cambios:

/etc/init.d/nginx reload

Puedes usar las siguientes configuraciones de tiempo con la directiva expires:

• off hace que los encabezados Expires y Cache-Control no sean modificados.
• epoch establece el encabezado Expires en 1 de enero de 1970 00:00:01 GMT.
• max establece el encabezado Expires en 31 de diciembre de 2037 23:59:59 GMT, y el max-age de Cache-Control en 10 años.
• Un tiempo sin un prefijo @ significa un tiempo de expiración relativo al tiempo de acceso del navegador. Se puede especificar un tiempo negativo, que establece el encabezado Cache-Control en no-cache. Ejemplo: expires 10d; o expires 14w3d;
• Un tiempo con un prefijo @ especifica un tiempo absoluto de expiración en el día, escrito en la forma Hh o Hh:Mm, donde H varía de 0 a 24, y M varía de 0 a 59. Ejemplo: expires @15:34;

Puedes usar las siguientes unidades de tiempo:

• ms: milisegundos
• s: segundos
• m: minutos
• h: horas
• d: días
• w: semanas
• M: meses (30 días)
• y: años (365 días)

Ejemplos: 1h30m para una hora y treinta minutos, 1y6M para un año y seis meses.

También ten en cuenta que si usas un encabezado Expires a un futuro lejano, debes cambiar el nombre del archivo del componente cada vez que el componente cambie. Por lo tanto, es una buena idea versionar tus archivos. Por ejemplo, si tienes un archivo javascript.js y quieres modificarlo, deberías agregar un número de versión al nombre del archivo del archivo modificado (por ejemplo, javascript-1.1.js) para que los navegadores tengan que descargarlo. Si no cambias el nombre del archivo, los navegadores cargarán el archivo (antiguo) desde su caché.

En lugar de basar el encabezado Expires en el tiempo de acceso del navegador (por ejemplo, expires 10d;), también puedes basarlo en la fecha de modificación de un archivo (¡ten en cuenta que esto solo funciona para archivos reales que están almacenados en el disco duro!) utilizando la palabra clave modified que precede al tiempo:

expires modified 10d;

3 Pruebas

Para probar si tu configuración funciona, puedes instalar el complemento Live HTTP Headers para Firefox y acceder a un archivo estático a través de Firefox (por ejemplo, una imagen). En la salida de Live HTTP Headers, ahora deberías ver un encabezado Expires y un encabezado Cache-Control con una directiva max-age (max-age contiene un valor en segundos, por ejemplo, 31536000 es un año en el futuro):

4 Enlaces

• 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 el Autor

Falko Timme es el propietario de Timme Hosting (alojamiento web nginx ultrarrápido). Es el mantenedor principal de HowtoForge (desde 2005) y uno de los desarrolladores principales de ISPConfig (desde 2000). También ha contribuido al libro de O’Reilly “Administración del Sistema Linux”.