Este guía explica cómo optimizar la caché de recursos web mediante las cabeceras HTTP.

Prólogo

• Una buena estrategia de caché permite mejorar significativamente el rendimiento de su sitio evitando retransmitir innecesariamente archivos sin cambios.
• La caché web se basa en dos mecanismos complementarios:
  1. La duración de validez de la caché (a través de la cabecera Expires) que indica cuánto tiempo un recurso puede ser reutilizado sin contactar con el servidor.
  2. La validación condicional (a través de las cabeceras Last-Modified/If-Modified-Since) que permite verificar si un recurso ha cambiado antes de volver a descargarlo.

Configuración de la duración de la caché con Expires

La cabecera Expires permite especificar una duración durante la cual el navegador puede reutilizar directamente los recursos desde su caché local. Aquí le mostramos cómo configurarlo en su archivo .htaccess:

1. Cree o abra el archivo .htaccess en la raíz de su sitio (generalmente en /web o /sites/domain.xyz).

2. Añada la configuración del módulo expires:

   <IfModule mod_expires.c>

3. Defina las duraciones de caché adecuadas para cada tipo de recurso:

   ExpiresActive On
   ExpiresByType text/html "access plus 1 week"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType text/css "access plus 1 month"
   ExpiresByType application/javascript "access plus 1 month"

   Estas directivas significan que:

   • Las páginas HTML se conservarán en caché durante una semana.
   • Las imágenes JPEG, archivos CSS y JavaScript se guardarán durante un mes.

   Adapte estas duraciones según la frecuencia de actualización de sus recursos.

4. Cierre la sección de configuración:

   </IfModule>

Validación condicional con Last-Modified

Incluso cuando un recurso ha expirado en la caché, no siempre es necesario volver a descargarlo por completo. El mecanismo de validación condicional permite al navegador verificar si su versión en caché sigue estando actualizada. Este proceso funciona así:

1. El servidor envía automáticamente una cabecera Last-Modified con cada recurso, indicando su fecha de última modificación.
   • Apache gestiona esto de forma nativa para los archivos estáticos - no se requiere configuración adicional.

2. Cuando el navegador solicita nuevamente el recurso, envía una cabecera If-Modified-Since que contiene la fecha que tiene en caché:

   GET /resource HTTP/1.1
   Host: www.example.com
   If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT

3. El servidor compara esta fecha con la fecha real de modificación del archivo:
   • Si el archivo no ha cambiado, simplemente devuelve un código 304 No Modificado, ahorrando así ancho de banda.
   • Si el archivo ha sido modificado, devuelve la nueva versión con un código 200 OK.