X

Cómo evitar problemas con la cache del navegador

En esta ocasión veremos como evitar un problema con el que seguro os habréis topado en más de una ocasión: El navegador no detecta un cambio que hemos realizado en un archivos estático ( CSS / Javascript / imagen ) y usa la copia cacheada en disco, impidiendo que la web muestre los estilos correctos, actualizados, o lanzando un error Javascript por el uso de una función no existente, hasta que forzamos una actualización con Ctrl-F5.

La caché de los navegadores actúa en el 90% de las ocasiones como nuestro aliado. Permite que determinados archivos estáticos se carguen una única vez por usuario, y se lean desde el disco en sucesivas visitas, reduciendo drásticamente los tiempos de carga.

De todas formas, el caché también puede jugar en nuestra contra en determinadas ocasiones: Si hemos realizado modificaciones a un archivo estático en un intervalo corto de tiempo, y además estas modificaciones han hecho variar muy poco el tamaño de nuestro archivo, es muy probable que el navegador no detecte que existe una nueva versión, y en vez de descargar el fichero más actual, haga uso de la copia que guarda en el disco para montar la página.

Como apuntábamos al principio, las consecuencias de esto suelen ser desastrosas: webs descuadradas o errores javascript por culpa de funciones que «deberían estar», pero que el navegador no ha cargado. Y, claro , el Ctrl-F5 sirve para mostrar la página al compañero de mesa o para tranquilizar al jefe que ha pegado un bote en la silla al ver el resultado, pero el usuario no tiene ni idea… va a verlo todo descuadrado hasta que expire la caché o le dé por forzar la recarga ( cosa poco probable ).

La solución a este problema es sencillamente añadir un parámetro a la llamada que hagamos al archivo estático. Los hay que optan por usar una fecha, y otros simplemente un valor numérico. Yo soy de estos últimos: como suelo usar Subversion para el control de versiones, lo que hago es actualizar el valor con el nº de versión correspondiente. De esta forma puedo saber, además, cuándo se hizo la última modificacion «sensible» a la hoja de estilos, echando un vistazo al showlog.

 
    

Cada vez que cambiamos el parámetro que hemos añadido a la llamada al CSS ( o Javascript, o imagen… ), lo que estamos haciendo es forzar al navegador a descargar de nuevo el archivo, retomando de esta forma el control sobre cuándo cachear y cuándo no.

Post Anterior
Post Siguiente
Albert Garcia: Co-fundador y director técnico en <strong><a href="https://twitter.com/Uvinum">Uvinum</a></strong>, fundador y CEO de <strong><a href="https://twitter.com/OboLog">Obolog</a></strong>, co-fundador de <strong><a href="https://twitter.com/Splitweet">Splitweet</a></strong>, vendido recientemente a Hootsuite, ex-director de <strong><a href="https://twitter.com/softonic">Softonic Labs</a></strong>.

View Comments (15)

  • Genio!!! funciono te mereces un 10!!!!!!!! solo es ponerle ?id=algun_numero y listo gracias!!!!!!!!!!!

  • no se donde incrustar este código, ya lo hice en el índex.html y no me funciona, cuando entran a la pagina aun sale la anterior versión y esa ni siquiera esta en el servidor por que ya la borre, no se que hacer agradezco su apoyo. gracias

    • amigo tienes que hacerlo en tu link de CSS y JS ejemplo
      entonces se lo agregas asi

  • Muchas gracias por el truco, aunque no ha pasado nada aún, en mi caso el problema es que se me guardaron los cambios en Chrome e IE 9, pero no se guardaba en Firefox ni en Opera; espero que se arregle. Copié la línea de " link rel..." en el del html.

  • Hola, Me podrías decir en donde lo copio? en el html o en el css? gracias. manejo joomla 1.5