Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

¿Cómo ignorar la caché del navegador (cache busting)?

Aunque la caché del navegador acelera la carga de una página, a veces es necesario deshabilitarla para acceder a las buevas actualizaciones.

¿Cómo ignorar la caché del navegador (cache busting)? - Escuela Digital

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í:

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

Ahora la cargarás así:

<link rel="stylesheet" href="/css/styles.css?abcde">

Entonces cuando hagas un cambio simplemente cambias el parámetro. Por ejemplo, para la siguiente actualización:

<link rel="stylesheet" href="/css/styles.css?abcdefg">

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.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal