Controla la fecha de vencimiento de tus archivos con mod_expires

Como ponía hace un par de días atrás al presentar PHPSpeedy, una de las medidas que podemos tomar para mejorar el tiempo de carga de un sitio web es agregar cabeceras de expiración muy lejanas en el futuro.

Primero expondré cómo lograrlo y más adelante algunas explicaciones que podrían ser útiles si andas medio perdido.

Cómo hacerlo

Primero que nada, debes en cuenta que esto sólo funcionará si estás trabajando con Apache como servidor web. Ahora, pondré como ejemplo que queremos controlar la expiración de los archivos como imágenes, etc. que hemos subido en nuestro directorio wp-content/uploads de una instalación de WordPress.

El primer paso será, por supuesto, ir al susodicho directorio. Una vez allí, debes crear un archivo .htaccess o editar el que ya tengas allí y agregar lo siguiente:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 6 months"
</IfModule>

Con ello, todos los archivos que estén bajo wp-content/uploads (y sus subdirectorios) informarán que expiran en 6 meses tras la fecha en que el usuario ha accedido a ellos.

Si usas Firefox y tienes instalada la extensión Web Developer, puedes revisar si está funcionando si te diriges a Information → View Response Headers. En la página que presenta la información deberías ver entre las respuestas una que diga Expires:

El tiempo se puede especificar desde la fecha de acceso (access, como en este caso) o desde la fecha de modificación del archivo (modification), y el lapso de tiempo se puede determinar como years, months, weeks, days, hours, minutes, seconds. Por supuesto, las equivalencias de tiempo se mantienen (o sea, 1 month = 30 days = 2592000 seconds). También se pueden especificar algo como 1 year 6 months 15 days.

Ahora, otro ejemplo, esta vez con los archivos de nuestro tema. Lo mismo que en el caso anterior, nos dirigimos al directorio donde está y creamos el archivo .htaccess, pero en este caso agregaremos algo nuevo: ya que de vez en cuando damos algunos retoques a nuestras hojas de estilo o al javascript, fijaremos una expiración menor en estos casos:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 6 months"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/javascript "access plus 4 weeks"
</IfModule>

Como puedes ver, ExpiresByType debe ir seguido del tipo de archivo para el que queremos ajustar con mayor precisión la expiración y luego la cantidad de tiempo que le queremos dar.

Existe otra forma de fijar el tiempo: en vez de modification y access se utilizan simplemente las letras M o A y luego el tiempo en segundos: ExpiresDefault A86400 = un día después del acceso.

La (mini)explicación…

…o para qué sirve todo esto:

al solicitar un archivo a un servidor, tu navegador envía una petición y éste responde con algunas instrucciones (cabeceras o HTTP Headers) que determinan ciertas propiedades de la transferencia, por ejemplo, el tipo de archivo, su tamaño, cuándo fue la última vez que se modificó o en este caso, cuándo expira, es decir, hasta cuándo debería guardarse en el caché del navegador ya que dicho archivo no cambiaría su contenido.

Si visitas una página y luego la vuelves a ver, tu navegador tendrá la información que indica que determinados archivos no se habrían modificado, por lo que simplemente presenta la copia guardad en el caché de tu navegador en lugar de volver a bajarla. Así, el usuario ve la página con mayor rapidez y el servidor se ahorra trabajo y transferencia.

Más referencias

Siempre es bueno ir a las fuentes: