Caché del navegador vs CDN: diferencias y cómo afectan al “no sirve”

Introducción

Cuando un usuario dice “mi página no sirve”, el problema puede estar en dos niveles de caché distintos:

1. Caché del navegador – archivos guardados localmente en el dispositivo.
2. Caché de un CDN – copias distribuidas en servidores cercanos al usuario.

Comprender la diferencia evita pasos de depuración innecesarios y acelera la solución.

¿Qué es la caché del navegador?

El navegador guarda HTML, CSS, JS e imágenes durante un tiempo definido por los encabezados Cache-Control o Expires.

Ventajas

• Reduce el tiempo de carga en visitas repetidas.
• Ahorra ancho de banda al usuario.

Desventajas

• Si subes una versión nueva y olvidas cambiar el nombre de archivo o el hash, el visitante seguirá viendo la antigua.
• Errores 404 o 500 pueden persistir localmente incluso si el servidor ya está arreglado.

Solución rápida Pide al usuario que vacíe la caché (Ctrl + Shift + Del) o abra una ventana de incógnito.

2. ¿Qué es un CDN?

Un Content Delivery Network replica tus archivos estáticos y hasta páginas completas en nodos distribuidos por el mundo (POP).

Proveedores populares

Proveedores populares

Ventajas

• Menor latencia (el POP suele estar a < 50 ms del usuario).

• Mitigación de picos de tráfico y ataques DDoS.

• Capa adicional de caché sobre la de navegador.

Desventajas

• Cambios urgentes requieren purge (invalidar caché).

• Un error en el origen se cachea y replica globalmente si no configuras Cache-Control: no-store en páginas dinámicas.

3. Cuándo un “no sirve” es culpa del CDN

1. El error varía por región: usuarios en Europa ven 502, en América funciona.

2. Tienes cabeceras como cf-cache-status: HIT (Cloudflare) y el cuerpo muestra un error viejo.

3. Purge manual (Purge Everything) soluciona en segundos → indica que era caché CDN.

4. Cómo purgar correctamente

Cloudflare

1. Dashboard → Caching → Configuration.

2. Purge Everything o Custom Purge por URL/tag.

3. Espera 30 s y verifica en Compruébalo aquí

Fastly

curl -X POST \

  -H "Fastly-Key: YOUR_API_KEY" \

  https://api.fastly.com/service/SERVICE_ID/purge_all

Estrategias de caché seguras

• Versiona archivos estáticos (main.a1b2c3.js).

• Usa Cache-Control: max-age=0, must-revalidate en HTML dinámico.

• Configura Stale‑while‑revalidate en CDN para servir algo antiguo pero actualizar en bg.

6. Preguntas frecuentes

¿Debo usar CDN si mi sitio es pequeño?

Sí, Cloudflare gratuito mejora latencia y seguridad sin coste.

¿Un purgado global afecta SEO?

No. Google recrawlea; solo asegúrate de no bloquear bots al purgar.

¿Puedo desactivar la caché del navegador?

No es recomendable: perderías ventajas de velocidad. Ajusta expiraciones, no las elimines.

Conclusión

• Caché de navegador = almacenamiento local; se limpia con atajos o desde Configuración.

• CDN = copias globales; se limpian con “purge”.

• Saber cuál de las dos es responsable reduce tiempo de inactividad.

¿Tu web sigue mostrando una versión antigua?

Comprueba el estado aquí y usa esta guía para purgar la caché correcta.

Palabras clave

caché navegador · purge cache cloudflare · diferencia cdn · stale while revalidate · web no sirve por caché