Caché

Qué es caché

Caché es almacenamiento temporal de contenido para servirlo más rápido en futuras peticiones, sin tener que regenerarlo o volverlo a descargar.

Niveles de caché en una web

Una petición de un usuario pasa por varios niveles de caché:

Usuario → Navegador → CDN edge → Servidor de aplicación → Base de datos
        ↓ caché      ↓ caché     ↓ caché                  ↓ caché

Cada nivel puede cachear, ahorrando trabajo a los siguientes.

1. Caché de navegador

El navegador almacena recursos descargados (imágenes, CSS, JS, fuentes) según headers de respuesta:

• Cache-Control: max-age=31536000 → cachear 1 año
• Cache-Control: no-store → no cachear
• Cache-Control: public, max-age=3600 → cachear 1 hora, público
• ETag: validador para revalidar sin re-descargar

Resultado: visitas posteriores son casi instantáneas para recursos cacheados.

2. Caché de CDN

CDNs como Cloudflare cachean tu contenido en 300+ ubicaciones globales. Usuarios reciben respuestas del centro más cercano.

Beneficios:

• TTFB <100ms
• Absorbe spikes de tráfico
• Reduce carga en tu servidor origen

3. Caché de servidor

Aplicación

Frameworks generan páginas en build (SSG) o cachean respuestas dinámicas en memoria/disco.

Reverse proxy

NGINX/Varnish cachean respuestas para servir sin tocar la aplicación.

Database

Redis, Memcached cachean queries pesadas.

Estrategias de caché

Cache-Control headers

Para assets estáticos con hash en nombre (ej: style.abc123.css):

Cache-Control: public, max-age=31536000, immutable

Cachear forever, nunca revalidar.

Para HTML:

Cache-Control: public, max-age=0, must-revalidate

Siempre validar (porque cambia con cada deploy).

Para API:

Cache-Control: no-store

Nunca cachear (datos dinámicos).

Cache busting

Para que cuando actualices CSS/JS los usuarios reciban la nueva versión:

<!-- Antes -->
<link href="/style.css" rel="stylesheet">

<!-- Mejor -->
<link href="/style.abc123.css" rel="stylesheet">

Cuando cambias el archivo, el hash cambia, el navegador descarga la nueva versión.

Astro/Next.js/Vite hacen esto automáticamente en build.

Stale-while-revalidate

Header avanzado:

Cache-Control: max-age=60, stale-while-revalidate=3600

Significado: sirve desde caché durante 60s. Si está stale (entre 60s y 1h), sirve la versión stale mientras revalida en background.

Resultado: respuestas instantáneas + datos eventualmente actualizados.

Errores típicos

No cachear lo cacheable

Headers no-cache o no-store en TODO. Genera peticiones repetidas sin necesidad. Ralentiza la web.

Cachear lo no cacheable

Headers max-age=31536000 en HTML que cambia. Usuarios ven versiones viejas durante 1 año.

Olvidar invalidar tras deploy

Subes nueva versión, el CDN sirve la vieja durante horas. Solución: purgar caché tras deploy o usar URLs con hash.

Caché muy agresivo en backend

Cacheas queries de BBDD durante 1 hora. Cuando cambias datos, los usuarios ven info vieja.

Cómo verificar caché

Chrome DevTools

Network tab → recargar página → ver columna “Size”:

• “from disk cache” → desde caché
• “from memory cache” → memoria
• Tamaño en bytes → descargó de red

Headers de respuesta

curl -I https://tudominio.es/style.css
# Ver Cache-Control, ETag, Age, X-Cache headers

Caché bien hecho =

• LCP <2s automáticamente
• TTFB <100ms
• Bandwidth reducido drásticamente
• Servidor menos cargado

Audita tu caché con Test de Velocidad Web.