Usar encabezados para optimizar el almacenamiento en caché de recursos

Esta guía explica cómo optimizar la caché de los recursos web gracias a los encabezados HTTP.

Preámbulo

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

Configuración del tiempo de 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í es cómo configurarlo en su archivo .htaccess :

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

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

   <IfModule mod_expires.c>

3. Define 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 directrices 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 descargarlo por completo. El mecanismo de validación condicional permite al navegador comprobar si su versión en caché sigue estando 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 gestiona esto nativamente para los archivos estáticos - no se requiere ninguna configuración adicional.

2. Cuando el navegador pide de nuevo el recurso, envía un encabezado If-Modified-Since que contenga la fecha que tenga 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.