B

Bawitools
Blog
  • navegador
  • rendimiento
  • desarrollo web

Por qué a veces ves una versión vieja de una web (y qué hace Ctrl+F5)

Cambias algo en tu página, recargas y sigue igual. La culpa casi nunca es del servidor: es la caché, y funciona con reglas que conviene conocer.

Por BawiTools5 min de lectura

Subes un cambio a tu web. Recargas. Sigue viéndose lo de antes. Recargas otra vez. Igual. Pruebas en el móvil y ahí sí se ve bien, lo cual lo hace todavía más confuso.

Nadie ha roto nada. Lo que estás viendo es la caché, y es una de esas cosas que resultan misteriosas hasta que entiendes las reglas, momento en el que dejan de serlo del todo.

Por qué existe

Cada vez que abres una página, el navegador necesita decenas de archivos: HTML, hojas de estilo, JavaScript, tipografías, imágenes. Pedirlos todos, cada vez, a un servidor que puede estar a miles de kilómetros sería absurdamente lento.

Así que el navegador guarda una copia local. La segunda visita a una web es mucho más rápida que la primera casi enteramente por esto.

El problema es el que tiene siempre cualquier copia: decidir cuándo ha dejado de ser válida.

Quién guarda copias de tu página

No hay una caché. Hay varias, encadenadas, y cada una puede estar sirviéndote algo distinto:

  1. La caché de memoria del navegador, mientras la pestaña está abierta
  2. La caché de disco del navegador, que sobrevive al reinicio
  3. El service worker, si la web instaló uno — puede servir contenido sin tocar la red siquiera
  4. La caché de tu proveedor de internet, en algunas redes
  5. El CDN, si la web usa uno
  6. La caché del servidor, como LiteSpeed Cache o Varnish

Cuando “el cambio no se ve”, el trabajo real es averiguar cuál de las seis te está dando la copia vieja. Vaciar la del navegador no sirve de nada si quien retiene la versión antigua es el CDN.

Las reglas que deciden

El servidor manda instrucciones junto a cada archivo. Las dos que importan:

Cache-Control dice cuánto tiempo vale la copia:

  • max-age=31536000 — válida un año, no vuelvas a preguntar
  • no-cache — guárdala, pero pregunta si sigue vigente antes de usarla
  • no-store — no la guardes en absoluto

ETag es una huella del contenido. El navegador la envía de vuelta preguntando “¿sigue siendo esta?”. Si el servidor responde 304 Not Modified, se reutiliza la copia local y no viajan datos. Es una petición de red muy barata comparada con descargar el archivo entero.

Fíjate en el matiz importante: no-cache no significa “no guardar”. Significa “guarda pero revalida”. El que no guarda nada es no-store. El nombre es desafortunado y confunde a mucha gente.

Qué hace realmente Ctrl+F5

Aquí hay una diferencia que casi nadie conoce y que explica media hora de frustración típica:

Acción Qué hace
F5 o el botón de recargar Revalida el HTML, pero puede reutilizar los recursos cacheados
Ctrl+F5 / Cmd+Shift+R Pide todo de nuevo ignorando la caché
Vaciar caché y recargar (desde F12) Borra lo de este sitio y recarga
Ventana privada Empieza con la caché vacía

Y aquí está la trampa: Ctrl+F5 solo afecta a tu navegador. Si quien sirve la versión vieja es el CDN o la caché del servidor, puedes pulsarlo cien veces y no cambiará nada. Sigues recibiendo lo mismo, solo que más rápido en pedirlo.

Cuando la copia vieja llega igual en una ventana privada, en otro navegador y en el móvil con datos móviles, el problema no es tu navegador. Es aguas arriba.

Cómo lo resuelven las webs bien construidas

Existe una técnica que elimina el problema de raíz, y se llama cache busting.

En vez de servir estilos.css, el sistema de compilación genera estilos.a7f3c9.css, donde esas letras son una huella del contenido. Si el archivo cambia, el nombre cambia, y un nombre nuevo es por definición un archivo que el navegador no tiene.

Eso permite lo mejor de los dos mundos:

  • Los archivos con huella en el nombre se cachean un año entero, porque nunca cambian: cuando el contenido cambia, es otro archivo.
  • El HTML, que sí conserva su nombre, se sirve con revalidación obligatoria. Es pequeño, así que revalidarlo es barato.

Cualquier herramienta de compilación moderna lo hace sola. Es la razón por la que una web bien montada puede ser muy agresiva con la caché y aun así publicar cambios al instante.

El caso más molesto: el service worker

Si una web instaló un service worker —lo hacen las aplicaciones web instalables— hay un intermediario que puede responder sin consultar la red en absoluto. Ahí Ctrl+F5 puede no bastar.

Se resuelve desde las herramientas de desarrollo: F12 → Aplicación → Service Workers → Anular registro, y recargar. Si desarrollas una web y ves comportamiento imposible, este suele ser el culpable.

Diagnóstico en orden

Cuando algo no se actualiza, esta secuencia localiza el problema rápido:

  1. Abre F12 → Red y marca Deshabilitar caché. ¿Se ve bien? Entonces es tu navegador y ya sabes que el servidor está correcto.
  2. Prueba en ventana privada. Descarta caché y extensiones a la vez.
  3. Prueba con datos móviles en el teléfono. Si ahí también sale mal, tu red no tiene la culpa.
  4. Mira la columna Tamaño en el panel de Red: si dice (disk cache) o (memory cache), el archivo ni siquiera se pidió.
  5. Si tienes CDN o caché de servidor, púrgala. Casi siempre es esto cuando lo anterior no da nada.

La idea de fondo

La caché no es un fallo que haya que sortear: es lo que hace que la web sea utilizable. Sin ella, cada visita sería como la primera.

Lo que hay que entender es que hay varias copias, en varios sitios, con reglas propias. Cuando algo no se actualiza, la pregunta correcta no es “cómo borro la caché”, sino “cuál de todas me está dando esto”. Con esa pregunta bien planteada, la respuesta suele aparecer en dos minutos.

Comentarios

Inicia sesión para dejar un comentario