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

Prólogo

• Una buena estrategia de caché permite mejorar significativamente el rendimiento de tu sitio evitando retransmitir innecesariamente archivos sin cambios.
• La implementación de la caché web se basa en dos mecanismos complementarios:
  1. La duración de validez del caché (a través de la cabecera Expires) que indica cuánto tiempo puede ser reutilizado un recurso sin contactar al servidor.
  2. La validación condicional (a través de los encabezados 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 un período durante el cual el navegador puede reutilizar directamente los recursos desde su caché local. Aquí te explicamos cómo configurarlo en tu archivo .htaccess:

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

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

   <IfModule mod_expires.c>

3. Defina los tiempos de caché adecuados 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 mantendrán en caché durante una semana.
   • Las imágenes JPEG, los archivos CSS y JavaScript se mantendrán durante un mes.

   Ajuste estos plazos según la frecuencia de actualización de tus recursos.

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

   </IfModule>

Validación condicional con Last-Modified

Aunque un recurso haya 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é está actualizada. Este proceso funciona de la siguiente manera:

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

2. Cuando el navegador solicita nuevamente el recurso, envía un encabezado If-Modified-Since con 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 Not Modified, ahorrando así ancho de banda.
   • Si el archivo ha sido modificado, devuelve la nueva versión con un código 200 OK.