≡En resumen
- La caché del navegador guarda recursos descargados para no pedirlos otra vez mientras sigan siendo válidos.
- El servidor decide cuánto tiempo vale cada copia con Cache-Control; si no dice nada, el navegador aplica una caché heurística.
- Cuando una copia caduca, el navegador pregunta si ha cambiado y, si no, el servidor responde 304 sin reenviar el archivo.
- La estrategia recomendada es HTML sin caché larga y archivos estáticos versionados con max-age de un año e immutable.
- La bfcache, la caché en memoria y la de los service workers son mecanismos distintos de la caché HTTP.
01 ¿Qué es la browser cache?
Es un caso concreto de caché, el concepto general de guardar copias temporales para servirlas más rápido. Se llama privada porque pertenece a un solo usuario y puede guardar contenido personalizado, a diferencia de las cachés compartidas de un proxy o una CDN, que sirven la misma copia a muchos visitantes.
02 Cómo funciona la caché del navegador
-
1
Primera petición
El navegador pide el recurso y el servidor lo envía con cabeceras como Cache-Control: max-age=3600 y un ETag.
-
2
Almacenamiento
El navegador guarda la respuesta y anota cuándo la recibió.
-
3
Copia fresca
Mientras no pase el max-age, el recurso se sirve desde la caché sin tocar la red.
-
4
Copia caducada
Pasado ese tiempo, el navegador pregunta al servidor con If-None-Match y el ETag guardado.
-
5
Revalidación
Si el archivo no ha cambiado, el servidor responde 304 Not Modified sin cuerpo; si ha cambiado, envía un 200 con la nueva versión.
GET /css/app.css
If-None-Match: "33a64df5"
HTTP/1.1 304 Not Modified
ETag: "33a64df5"
Cache-Control: max-age=3600
La petición sigue viajando, pero la respuesta pesa unos cientos de bytes en lugar del archivo completo. Puedes ver estas cabeceras en la pestaña Network de las DevTools o con un análisis de cabeceras HTTP.
03 Cabeceras HTTP que controlan la browser cache
| Cabecera o directiva | Qué hace | Cuándo usarla |
|---|---|---|
| Cache-Control: max-age=N | La copia es válida durante N segundos | Recursos estáticos |
| no-cache | Permite guardar, pero obliga a revalidar antes de cada uso | HTML y contenido que cambia |
| no-store | Prohíbe guardar la respuesta | Datos sensibles: banca, áreas privadas |
| private | Solo la caché del navegador puede guardarla, no las compartidas | Páginas personalizadas |
| public | Permite guardarla en cachés compartidas incluso con autenticación | Recursos públicos detrás de login |
| immutable | Evita revalidar al recargar mientras la copia esté fresca | Archivos versionados que nunca cambian |
| must-revalidate | Una copia caducada no puede usarse sin revalidar | Contenido donde servir una versión vieja es un error |
| ETag / Last-Modified | Identifican la versión para revalidar con If-None-Match o If-Modified-Since | Siempre que sea posible, ambas |
04 Qué política de caché usar para cada tipo de archivo
| Recurso | Cabecera recomendada | Motivo |
|---|---|---|
| HTML de las páginas | Cache-Control: no-cache + ETag | Su URL no puede cambiar y el contenido debe estar al día |
| CSS y JS con versión en el nombre | public, max-age=31536000, immutable | Si cambia el archivo, cambia la URL |
| Fuentes web | public, max-age=31536000, immutable | Casi nunca cambian |
| Imágenes versionadas o de producto | max-age de semanas o un año | Pesan mucho y se repiten entre páginas |
| Respuestas personalizadas o de API | private, no-cache o no-store según sensibilidad | No deben verlas otros usuarios |
location ~* \.(css|js|woff2|avif|webp|svg)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
En Apache se consigue lo mismo con mod_headers en el .htaccess, y en WordPress lo suelen gestionar los plugins de caché o el propio hosting. La calidad del servidor importa: te lo contamos en la guía para elegir hosting.
05 Cache busting: cómo actualizar archivos con caché larga
Si le dices al navegador que guarde app.css durante un año, ¿cómo le haces llegar un cambio mañana? Con cache busting: se cambia la URL del archivo cada vez que cambia su contenido. Para el navegador es un recurso nuevo que descarga de inmediato, mientras la versión vieja caduca sola.
Hash en el nombre
app.3f9a1c.css. Lo generan automáticamente Vite, webpack o Laravel Mix; es la opción más robusta.
Número de versión
bundle.v124.js. Sencillo, pero depende de acordarse de subir la versión.
Parámetro de consulta
style.css?ver=6.5. Lo usa WordPress; funciona, aunque algunas cachés intermedias tratan peor los parámetros.
06 Browser cache, bfcache y caché del service worker
| Mecanismo | Qué guarda | Quién lo controla |
|---|---|---|
| Caché HTTP (browser cache) | Respuestas individuales a peticiones | El servidor, con cabeceras HTTP |
| Caché en memoria | Recursos de la sesión actual para reutilizarlos al instante | El navegador |
| Back/forward cache (bfcache) | Una instantánea completa de la página, incluido el estado de JavaScript | El navegador; la bloquean los manejadores unload y a menudo no-store |
| Cache API (service worker) | Lo que el código decide guardar, incluso para funcionar sin conexión | El desarrollador, con JavaScript |
1 de cada 10
Navegaciones en escritorio que son hacia atrás o hacia delante (Chrome)
Fuente: web.dev, Back/forward cache
1 de cada 5
Navegaciones en móvil que son hacia atrás o hacia delante (Chrome)
Fuente: web.dev, Back/forward cache
La Cache API es la base de las PWA que funcionan sin conexión, algo habitual en proyectos de desarrollo de aplicaciones web. La bfcache, en cambio, no se configura: solo hay que evitar lo que la bloquea para que volver atrás sea instantáneo.
07 Browser cache, velocidad y SEO
Lighthouse y PageSpeed Insights señalan los recursos con caché corta en la auditoría Use efficient cache lifetimes, antes llamada Serve static assets with an efficient cache policy. No afecta a la primera visita, pero reduce mucho el peso de las siguientes y mejora la experiencia de quien navega por varias páginas o vuelve al día siguiente.
- ✓Revisa en DevTools qué recursos salen con max-age corto o sin Cache-Control.
- ✓Versiona CSS, JS y fuentes y sírvelos con caché de un año e immutable.
- ✓Deja el HTML con no-cache y ETag para que se actualice siempre.
- ✓No uses no-store salvo en páginas con datos sensibles.
- ✓Elimina los manejadores unload para no perder la bfcache.
- ✓Combina la caché del navegador con una CDN para acelerar también la primera visita.
Si usas WordPress, repasa qué plugins de caché funcionan de verdad. Y si quieres que lo ajustemos por ti junto al resto de métricas, nuestro servicio de optimización de la velocidad web empieza precisamente por aquí.
08 Cómo saltarse o vaciar la caché del navegador
| Acción | Cómo hacerlo | Para qué |
|---|---|---|
| Recarga forzada | Ctrl + Mayús + R o Ctrl + F5 en Windows; Cmd + Mayús + R en Mac | Volver a descargar los recursos de la página actual |
| Desactivar caché al desarrollar | DevTools › Network › Disable cache (con las DevTools abiertas) | Probar cambios sin copias antiguas |
| Vaciar caché y recargar | Con DevTools abiertas, clic derecho en el botón de recarga | Borrar la caché de ese sitio y recargar |
| Borrar datos de navegación | Ajustes › Privacidad › Borrar datos › Archivos en caché | Liberar espacio o resolver fallos persistentes |
El paso a paso para vaciar la caché en cada navegador y en el móvil, y qué ocurre al hacerlo, está en nuestra entrada general sobre la caché, enlazada al inicio de esta página. Para entender cómo encaja la caché con el resto de piezas del navegador, consulta browser.
Preguntas frecuentes sobre Browser cache
Es la caché del navegador: el almacenamiento local donde guarda copias de CSS, JavaScript, imágenes y otros recursos para no descargarlos de nuevo en visitas posteriores.
El que indique el servidor en Cache-Control con max-age. Si no lo indica, el navegador aplica una caché heurística basada en la fecha de última modificación del archivo.
no-cache permite guardar la respuesta pero obliga a revalidarla con el servidor antes de usarla; no-store prohíbe guardarla.
Que el recurso no ha cambiado desde la versión que tiene el navegador, así que puede reutilizar su copia sin descargar el archivo otra vez.
Versiona los archivos estáticos (hash o número de versión en el nombre) y deja el HTML con no-cache; así los cambios llegan sin que nadie borre la caché.
No. Solo hará que las webs carguen algo más despacio la próxima vez, mientras se vuelven a descargar los recursos.
La caché guarda archivos para acelerar la carga; las cookies guardan pequeños datos, como una sesión o preferencias, que se envían al servidor.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗