Saltar al contenido principal

¿Qué es el Caché? ⚡

¡Uno de los secretos para que los sitios web carguen rápidamente es precisamente el caché! Te explicaré qué es el caché y cómo funciona de manera que hasta los principiantes puedan entenderlo fácilmente.

¿Cómo comparar el caché con la vida cotidiana?​

Comparemos el caché con un bloc de notas en el escritorio.

La historia del bloc de notas 📝​

Sin bloc de notas (sin caché):

Cada vez que necesitas el número de teléfono de un amigo
1. Abrir el cajón
2. Sacar la guía telefónica
3. Buscar el número
4. Guardar la guía telefónica de nuevo
→ Toma tiempo cada vez 😓

Usando el bloc de notas (usando caché):

Anotar los números frecuentes en el bloc del escritorio
1. Mirar el bloc de notas
2. ¡Llamar inmediatamente!
→ Rápido y conveniente ⚡

¡El caché funciona igual!

Guardar temporalmente
los datos frecuentes
cerca
→ ¡Acceso rápido!

Definición de caché​

Caché (Cache)

  • Guardar temporalmente datos frecuentes en almacenamiento rápido
  • Mejorar la velocidad es el objetivo
  • El original permanece intacto, solo se guarda la copia

¿Por qué necesitamos caché?​

Comparación de velocidad​

Obtener datos del servidor:
Navegador → (Internet) → Servidor → Datos → (Internet) → Navegador
Tiempo: 500ms (lento 🐌)

Obtener datos del caché:
Navegador → Caché local → Datos
Tiempo: 10ms (rápido ⚡)

→ ¡50 veces más rápido!

Tipos de caché​

1. Caché del navegador 🌐​

Caché guardado en el navegador web

Primera visita:
Navegador → Servidor: "Dame index.html"
Servidor → Navegador: [Transferencia de archivo + "Puedes guardarlo en caché"]
Navegador: Guardar archivo

Siguiente visita:
Navegador: "¡Ah, está en el caché!" → Usar inmediatamente
→ Carga rápida sin solicitud al servidor ⚡

Lo que se guarda:

  • Archivos HTML
  • Archivos CSS
  • Archivos JavaScript
  • Imágenes (logos, iconos, etc.)
  • Fuentes

2. Caché CDN 🌍​

Almacenamiento distribuido en servidores de todo el mundo

Usuario (España) → Servidor CDN (Madrid) → Contenido
                  ↓
            Respuesta rápida ⚡

vs

Usuario (España) → Servidor original (EE.UU.) → Contenido
                  ↓
            Respuesta lenta 🐌

3. Caché del servidor 💾​

Cachear datos en el servidor

Cachear resultados de consultas de base de datos
Cachear respuestas de API
Cachear resultados de cálculos

4. Caché de memoria (RAM) 🧠​

Guardado en la memoria del ordenador

Orden de velocidad:
Caché de memoria (más rápido) ⚡⚡⚡
Caché de disco (rápido) ⚡⚡
Red (lento) ⚡

Proceso de funcionamiento del caché​

1. Primera solicitud (Fallo de caché)​

1. Navegador: "¡Necesito logo.png!"
2. Verificar caché: "¿No está?"
3. Solicitar al servidor: "Dame logo.png"
4. Respuesta del servidor: [Archivo + Política de caché]
5. Usar archivo + Guardar en caché

2. Segunda solicitud (Acierto de caché)​

1. Navegador: "¡Necesito logo.png!"
2. Verificar caché: "¡Está!" ✅
3. Usar inmediatamente desde el caché
→ Sin solicitud al servidor ⚡

Encabezados de control de caché​

El servidor le dice al navegador cómo cachear:

Cache-Control​

Cache-Control: max-age=3600
→ Usar caché durante 3600 segundos (1 hora)

Cache-Control: no-cache
→ Verificar con el servidor cada vez

Cache-Control: no-store
→ No cachear

Cache-Control: public
→ Cualquiera puede cachear

Cache-Control: private
→ Solo el navegador del usuario puede cachear

Expires​

Expires: Wed, 21 Oct 2025 07:28:00 GMT
→ El caché es válido hasta esta fecha

ETag​

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
→ Identificador único del archivo
→ Verificar si el archivo ha cambiado

Validación de caché (Validation)​

Solicitud condicional​

Navegador → Servidor: "Tengo el archivo, ¿ha cambiado?"
           If-None-Match: "33a64df55..."

Servidor → Navegador: "¡No ha cambiado!"
           304 Not Modified

Navegador: "¡Entonces uso el caché!" ✅
Si el archivo ha cambiado:
Servidor → Navegador: "¡Ha cambiado!"
           200 OK + archivo nuevo

Ventajas del caché​

✅ Velocidad de carga rápida​

Primera visita: 3 segundos
Segunda visita: 0.5 segundos ⚡
→ ¡6 veces más rápido!

✅ Reducción de carga del servidor​

1 millón de visitantes
→ 90% sin solicitud al servidor gracias al caché
→ El servidor solo procesa 100,000 solicitudes

✅ Reducción de costes​

Reducción de tráfico de red
→ Reducción de costes del servidor 💰

✅ Uso sin conexión​

Las páginas cacheadas
se pueden ver sin Internet

Desventajas del caché​

❌ Contenido obsoleto​

Incluso si el archivo se actualiza
se usa la versión antigua del caché

❌ Uso de almacenamiento​

Cuando se acumula el caché
ocupa espacio en disco

❌ Necesita gestión de caché​

Configurar tiempo de expiración apropiado
Necesita estrategia de invalidación de caché

Resolución de problemas de caché​

Problema 1: ¡La actualización no se muestra!​

Soluciones:

  1. Recarga forzada (Hard Refresh)
Windows: Ctrl + F5
Mac: Cmd + Shift + R
  1. Eliminar caché
Chrome: Configuración → Borrar datos de navegación → Caché
  1. Modo incógnito
Ctrl + Shift + N (Chrome)
→ No usa caché

Problema 2: Cambiar nombre de archivo (Cache Busting)​

Solución para desarrolladores:

<!-- Mal ejemplo -->
<link rel="stylesheet" href="style.css">

<!-- Buen ejemplo: Agregar número de versión -->
<link rel="stylesheet" href="style.css?v=1.2.3">

<!-- Mejor ejemplo: Hash de archivo -->
<link rel="stylesheet" href="style.abc123.css">

¡Cuando el archivo cambia, el nombre también cambia y se descarga de nuevo!

Estrategias de caché​

1. Recursos estáticos (no cambian)​

Logos, iconos, bibliotecas

Cache-Control: max-age=31536000, immutable
→ Cachear 1 año (garantía de no cambio)

2. Contenido actualizado frecuentemente​

Artículos de noticias, lista de productos

Cache-Control: max-age=300
→ Cachear solo 5 minutos

3. Información personal​

Perfil de usuario, información de cuenta

Cache-Control: private, no-cache
→ Solo navegador del usuario, verificar cada vez

4. Nunca cachear​

Página de pago, información sensible

Cache-Control: no-store
→ Prohibir caché

Gestión de caché en el navegador​

Herramientas de desarrollador de Chrome​

F12 → Pestaña Network
→ Verificar caché en la columna "Size"

(disk cache) = Cargado desde caché de disco
(memory cache) = Cargado desde caché de memoria
Mostrar tamaño = Descargado del servidor

Eliminar caché​

Chrome:

Configuración → Privacidad y seguridad
→ Borrar datos de navegación
→ Marcar Imágenes y archivos en caché
→ Borrar

Ejemplos de uso real​

Ejemplo 1: Caché de imagen​

Primera visita:
GET /logo.png
← 200 OK (1MB descargado, 500ms)
Cache-Control: max-age=86400

Siguiente visita:
GET /logo.png
← (disk cache) (0KB, 10ms)
→ ¡50 veces más rápido! ⚡

Ejemplo 2: Archivo CSS​

<link rel="stylesheet" href="styles.abc123.css">

Cache-Control: max-age=31536000, immutable
→ Cachear 1 año, hash incluido en el nombre del archivo
→ El nombre también cambia al modificar el archivo

Ejemplo 3: Caché de respuesta de API​

// Respuesta del servidor
Cache-Control: max-age=60

// Si llamas a la misma API en 1 minuto
→ Usar respuesta cacheada
→ Reducir carga del servidor

Preguntas frecuentes (FAQ)​

R:

  • Caché: Almacenamiento de archivos (carga rápida)
  • Cookie: Almacenamiento de datos pequeños (mantener estado)

P2: ¿Hay que eliminar el caché frecuentemente?​

R: ¡Normalmente no es necesario!

  • El navegador lo gestiona automáticamente
  • Elimina automáticamente los antiguos si falta espacio
  • Solo eliminar manualmente cuando hay problemas

P3: ¿El caché en modo incógnito?​

R: Solo usa caché temporal

  • Todo se elimina al cerrar la ventana
  • No usa el caché existente

P4: ¿Cuánta capacidad tiene el caché?​

R: Varía según el navegador:

  • Chrome: ~50MB por sitio
  • Caché total: ~varios GB

P5: ¿El móvil también usa caché?​

R: ¡Sí! Funciona de la misma manera.

  • Ahorra datos
  • Carga rápida

Invalidación de caché (Cache Invalidation)​

Uno de los problemas más difíciles en ciencias de la computación:

"¿Cuándo se debe eliminar el caché?"

Estrategias​

  1. Basado en tiempo
Expiración automática cada 10 minutos
  1. Basado en eventos
Eliminar caché cuando se actualizan los datos
  1. Gestión de versiones
Incluir versión/hash en el nombre del archivo

Siguientes pasos 🚀​

Si has entendido el caché:

  1. ✅ ¿Qué es una Cookie? - Otro método de almacenamiento del navegador
  2. ✅ Entender solicitud/respuesta HTTP - Cómo funcionan los encabezados de caché
  3. ✅ ¿Qué es una VPN? - Seguridad en Internet

Resumen​

¡El caché es la magia que hace que la Web sea rápida! ⚡

Puntos a recordar:

  • Caché = Almacenamiento temporal
  • Objetivo: Mejorar velocidad
  • Guardar datos frecuentes
  • Se gestiona automáticamente, no hay que preocuparse
  • Solo eliminar cuando hay problemas

Gracias al caché, los sitios web cargan rápidamente. ¡La próxima vez que navegues por la web, intenta sentir el caché funcionando! 🚀