Caché HTTP explicado: ETag, Cache-Control y CDNs

Por qué tu sitio web se siente lento (y cómo la caché lo soluciona)

Has optimizado tus imágenes, minificado tu CSS e incluso actualizado tu servidor. Sin embargo, los visitantes recurrentes siguen experimentando tiempos de carga lentos, y tu servidor de origen está consumiendo ancho de banda. ¿El culpable? Una caché HTTP ineficiente. Sin las cabeceras de caché adecuadas, los navegadores vuelven a descargar los mismos recursos en cada visita, y las CDN no pueden hacer su trabajo de manera efectiva.

La caché HTTP es una de las optimizaciones de rendimiento con mayor impacto disponibles. Reduce la latencia, recorta los costos de ancho de banda y aligera la carga en tus servidores de origen. En esta guía, desglosaremos los mecanismos clave: ETag, Cache-Control y cómo encajan las CDN. Aprenderás estrategias prácticas para implementarlos correctamente.

Cómo funciona la caché HTTP: el panorama general

Cuando un navegador solicita un recurso, puede obtenerlo del servidor de origen o servir una copia almacenada localmente. La caché HTTP define las reglas sobre cuándo una copia almacenada se considera fresca y cuándo debe revalidarse.

Existen dos tipos principales de caché:

• Caché del navegador (privada): El navegador del usuario almacena recursos localmente. Esto beneficia a un solo usuario en múltiples páginas o visitas.
• Caché compartida (CDN, proxy): Los servidores intermedios almacenan recursos para múltiples usuarios. Esto reduce la carga en tu origen y acelera la entrega a nivel global.

Ambas dependen de las cabeceras HTTP para decidir la frescura y la revalidación. Las dos cabeceras más importantes son Cache-Control y ETag.

Cache-Control: las reglas de frescura

Cache-Control es la cabecera principal para definir políticas de caché. Es una cabecera basada en directivas que indica a las cachés cómo tratar una respuesta.

Directivas clave

• max-age: El número de segundos que una respuesta se considera fresca. Por ejemplo, Cache-Control: max-age=3600 significa que la respuesta es fresca durante 1 hora.
• s-maxage: Similar a max-age pero específicamente para cachés compartidas (CDN). Anula max-age para cachés compartidas.
• public: La respuesta puede ser almacenada en caché por cualquier caché, incluidas las compartidas.
• private: La respuesta está destinada a un solo usuario y no debe ser almacenada por cachés compartidas.
• no-cache: La respuesta puede almacenarse, pero debe revalidarse con el origen antes de cada uso.
• no-store: La respuesta no debe almacenarse en ninguna caché. Úsala para datos sensibles.
• must-revalidate: Una vez obsoleta, la caché no debe usar la respuesta sin revalidación.
• immutable: La respuesta no cambiará durante su vida útil de frescura. Útil para recursos versionados.

Ejemplo: Cache-Control: public, max-age=31536000, immutable es ideal para recursos estáticos con nombres de archivo con hash.

ETag y peticiones condicionales

Un ETag (Entity Tag) es un identificador de una versión específica de un recurso. Cuando un recurso cambia, el ETag cambia. Los navegadores usan ETags para hacer peticiones condicionales: envían el ETag almacenado en una cabecera If-None-Match. Si el recurso no ha cambiado, el servidor responde con 304 Not Modified y sin cuerpo, ahorrando ancho de banda.

De manera similar, Last-Modified funciona con If-Modified-Since, pero los ETags son más precisos (pueden detectar cambios dentro del mismo segundo).

Cómo generar ETags

La mayoría de los servidores web y frameworks generan ETags automáticamente. Por ejemplo, en Express.js puedes habilitarlo con app.set('etag', 'strong'). En Nginx, los ETags están activados por defecto para archivos estáticos.

Los ETags fuertes (por ejemplo, "abc123") garantizan identidad byte a byte. Los ETags débiles (por ejemplo, W/"abc123") indican equivalencia semántica, no bytes exactos.

Caché CDN: caché compartida a escala

Las CDN (Content Delivery Networks) actúan como cachés compartidas distribuidas globalmente. Almacenan tu contenido en ubicaciones perimetrales, sirviéndolo a los usuarios desde un punto de presencia cercano. Esto reduce la latencia y descarga tu origen.

Las CDN respetan las cabeceras Cache-Control pero a menudo tienen su propia configuración. Conceptos clave:

• Caché perimetral: La caché local de la CDN. Almacena respuestas según claves de caché (generalmente URL + cabeceras como Accept-Encoding).
• Origin shield: Una capa de caché adicional que reduce las peticiones a tu origen.
• Invalidación de caché: Las CDN proporcionan API para purgar contenido en caché cuando actualizas recursos.

Al usar una CDN, configura Cache-Control con s-maxage para controlar la frescura de la caché compartida de forma independiente de la caché del navegador. Por ejemplo: Cache-Control: public, max-age=600, s-maxage=3600 significa que los navegadores almacenan en caché durante 10 minutos, pero la CDN lo hace durante 1 hora.

Comparación de cabeceras de caché

Nota: Expires está reemplazada por Cache-Control pero aún la usan clientes antiguos.

Estrategia práctica de caché para aplicaciones web

Sigue estos pasos para implementar una caché efectiva:

1. Huella digital en recursos estáticos: Usa nombres de archivo con hash (por ejemplo, app.a1b2c3.js) y establece un max-age largo con immutable. Cuando el archivo cambia, el hash cambia, invalidando la caché.
2. Establece Cache-Control adecuado para HTML: El HTML normalmente debe ser no-cache o un max-age corto para que los usuarios obtengan actualizaciones rápidamente. Usa ETag para revalidación.
3. Usa Vary: Accept-Encoding: Si sirves versiones comprimidas y sin comprimir, esto asegura que las cachés las almacenen por separado.
4. Aprovecha la CDN con s-maxage: Establece un s-maxage más largo para cachés compartidas para reducir la carga del origen, mientras mantienes la caché del navegador más corta si es necesario.
5. Invalida con criterio: Usa las API de purga de la CDN al desplegar actualizaciones críticas. Para recursos estáticos, el fingerprinting evita la necesidad de purgar.
6. Monitorea la tasa de aciertos de caché: Usa análisis de CDN para asegurar que tu caché sea efectiva. Una tasa de aciertos baja indica cabeceras mal configuradas.

Errores comunes y cómo evitarlos

• Exceso de caché en HTML: Los usuarios ven contenido obsoleto. Usa no-cache o un max-age corto.
• Falta de caché en recursos estáticos: Establece un max-age largo (por ejemplo, 1 año) con fingerprinting.
• Ignorar Vary: Las cachés pueden servir contenido incorrecto (por ejemplo, gzip vs. plano). Siempre establece Vary: Accept-Encoding.
• Olvidar private para datos específicos del usuario: Las cachés compartidas podrían filtrar datos. Usa Cache-Control: private para respuestas autenticadas.
• Mal uso de no-store: Impide todo almacenamiento en caché, lo que puede perjudicar el rendimiento. Úsalo solo para datos sensibles.

Probar tu configuración de caché

Usa las DevTools del navegador (pestaña Network) para inspeccionar las cabeceras de respuesta y ver si los recursos se sirven desde la caché (busca "(from disk cache)" o "(from memory cache)"). Para el comportamiento de la CDN, usa curl -I para verificar cabeceras como X-Cache o CF-Cache-Status. Herramientas como WebPageTest pueden visualizar el almacenamiento en caché entre visitas.

Preguntas frecuentes

¿Cuál es la diferencia entre ETag y Last-Modified?

ETag es un identificador opaco que cambia cuando el recurso cambia, mientras que Last-Modified es una marca de tiempo. Los ETags son más precisos porque pueden detectar cambios dentro del mismo segundo y no dependen de la sincronización del reloj.

¿Cuándo debo usar no-cache vs no-store?

Usa no-cache cuando quieras que la caché almacene la respuesta pero la revalide con el origen antes de cada uso. Usa no-store para datos sensibles que nunca deben escribirse en disco o memoria por ninguna caché.

¿Cómo manejan las CDN la invalidación de caché?

Las CDN proporcionan API de purga que te permiten eliminar URLs específicas o directorios completos de sus cachés perimetrales. Algunas también admiten purgas suaves que marcan el contenido como obsoleto y revalidan en la siguiente petición. El fingerprinting de recursos suele ser más eficiente que purgar.

Conclusión

Dominar la caché HTTP con ETag, Cache-Control y CDN es esencial para construir aplicaciones web rápidas y escalables. Comienza estableciendo cabeceras adecuadas para tus recursos estáticos y HTML, aprovecha las cachés compartidas de CDN con s-maxage y siempre prueba tu configuración. Pequeños cambios en las cabeceras de caché pueden generar mejoras significativas en el rendimiento.

¿Necesitas analizar rápidamente los registros de tu servidor para ver las tasas de aciertos de caché? Prueba nuestro Analizador de registros de Nginx para parsear y visualizar tus registros de acceso.