• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Evita problemas con la caché del navegador

cache navegador

Vamos a ver un pequeño problema que a casi todos nos habrá pasado y no sólo una vez, si no muchas veces y como solucionarlo.

¿Qué es una caché? es la que almacena documentos web para reducir el ancho de banda consumido, la carga de los servidores y el retardo en la descarga. Un caché web almacena copias de los documentos que pasan por él, de forma que subsiguientes peticiones pueden ser respondidas por el propio caché, si se cumplen ciertas condiciones.

Una vez terminamos de realizar una página web, cuando un usuario nuevo entra a verla, los navegadores cachean todos los ficheros y los descarga para mostrarlo al nuevo usuario. En las sucesivas visitas a la página, de un usuario que no es nuevo, únicamente descarga el html y usa los css, js e imágenes que previamente había cacheado.

Es positivo en el sentido que ese usuario, que ya no es nuevo, entrará de forma más rápida a la web, el problema viene que si hemos actualizado alguna parte de nuestra web, ese usuario no verá los cambios que hemos realizado o se mostrarán de forma extraña si luego no actualiza la página. Y siendo sinceros, nadie actualiza la página ni podemos obligarles a hacerlo.

La solución a este problema es sencilla, pasa por añadir un parámetro a la url con la que se piden los css, js e imágenes de una actualización a otra. No es necesario cambiar el nombre del fichero. A continuación os muestro unos ejemplos:

<link rel="stylesheet" href="css/mi-archivo.css?1.1.0">
<link rel="stylesheet" href="css/mi-archivo.css?23.5.16">
<link rel="stylesheet" href="css/mi-archivo.css?id=025">

<script src="js/mi-archivo.js?1.1.0"></script>
<script src="js/mi-archivo.js?23.5.16"></script>
<script src="js/mi-archivo.js?id=025"></script>

<img src="img/mi-archivo.jpg?1.1.0">
<img src="img/mi-archivo.jpg?23.5.16">
<img src="img/mi-archivo.jpg?id=025">

Como podéis observar, al final del enlace es donde se pone un pequeño parámetro, en forma de versión de actualización (?1.1.0), de fecha de actualización (?23.5.16) o a través de un id (?id=025). Ponerlo de la forma que queráis y que mejor os venga, yo pongo fechas para saber cuando actualicé la última vez.

Cada vez que actualicemos un archivo, habrá que cambiar ese parámetro. Al hacerlo, estamos forzando al navegador a descargar de nuevo el archivo, retomando de esta forma el control sobre cuándo cachear y cuándo no.

Para los que utilizáis Wordpress, echar un ojo al plugin WP Super Cache, observar como funciona porque es bastante interesante.

Seguro que os será útil este consejo para evitar problemas con la caché de los navegadores. Si alguien sabe otras formas es libre de opinar.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code