Una de las estrategias más útiles para mejorar el rendimiento de un sitio web es tener un sistema de caché habilitado. De esta forma le decimos al navegador que almacene en sus archivos temporales los assets del sitio por un tiempo determinado (una semana, un mes, varios meses, etc.). Entonces, cuando volvemos a visitar el sitio, el navegador no descarga los assets de internet (archivos js, css, imagenes, etc) sino que toma los que tiene en su caché acelerando la renderización de la página.
Hasta ahí perfecto. Hay muchas formas de habilitar la caché en nuestro desarrollo o directamente desde el servidor pero no es tema de este post. Lo que vamos a ver es como forzar al navegador a ignorar su caché. Seguro te preguntarás: “¿para qué, si la caché mejora el rendimiento?” Pues porque si realizas actualizaciones tus usuarios seguirán viendo la versión antigua por culpa de la caché (es entonces cuando deja de ser cool). Y aunque pedirle que limpien la caché de su navegador es una opción, no es la mejor. Incluso puede que muchos ni tengan idea de como limpiar la caché (a menudo un CTRL F5 o SHIFT F5 debería bastar).
Así que vamos al punto, ¿cómo le digo al navegador que ignore la caché y cargue la nueva versión? Existen varias formas para hacer cachebusting (romper la caché) pero veamos la más fácil de todas que consiste en añadirle un parámetro (query string) a la URL de los assets. Por ejemplo, si antes cargabas tu css así:
1<link rel="stylesheet" href="/css/styles.css"> 2
Ahora la cargarás así:
1<link rel="stylesheet" href="/css/styles.css?abcde"> 2
Entonces cuando hagas un cambio simplemente cambias el parámetro. Por ejemplo, para la siguiente actualización:
1<link rel="stylesheet" href="/css/styles.css?abcdefg"> 2
Así, cuando el navegador cargue la página, como el parámetro es diferente, asumirá que se trata de otro archivo que no tiene en su caché y lo descargará. Fantástico.
El parámetro comienza con un signo ? y un string aleatorio. En nuestro caso hemos usado ?abcde como ejemplo pero no es muy buena idea. Mucho mejor ?v1.0.1 y ?v.1.0.2.
Y es todo, solo no te olvides de actualizar el parámetro para cada actualización antes de llevar a producción. Aunque siempre puedes automatizar este proceso, pero ya es cosa de otro post.
¿Conoces otro tip para cachebusting? Cuéntalo en los comentarios.