Califica tu experiencia

Cómo resolver los problemas de almacenamiento en caché de CSS con Cloudflare

Modificado el: Sat, 25 Nov, 2023

¿Qué es el almacenamiento en caché?

El almacenamiento en caché se refiere al almacenamiento a corto plazo de archivos, como imágenes y páginas web, para que no haya que cargar los mismos archivos cada vez que se vea una página. Esto suele acelerar la experiencia para el usuario, ya que reduce la cantidad de datos que hay que cargar. El almacenamiento en caché puede producirse en varios lugares. Por ejemplo, su navegador puede almacenar en caché los archivos para no tener que volver a descargar todos los archivos de una página que haya visitado antes.


Una Red de Distribución de Contenidos (CDN) como Cloudflare también almacenará en caché los archivos a mayor escala, de modo que después de que se haya accedido a un archivo en nombre de un usuario, el mismo archivo puede almacenarse en sus servidores para otros usuarios también, sin tener que hacer peticiones adicionales al servidor de origen. Al almacenar en caché de esta manera, las CDN pueden reducir el tiempo que se tarda en proporcionar un archivo en caché al usuario.


Almacenamiento en caché, CloudFlare y CSS

Un problema potencial del almacenamiento en caché es que puede dar lugar a una situación en la que se realicen cambios en un sitio sin que ese cambio sea inmediatamente visible para los visitantes del mismo. Esto puede ocurrir, tanto si el sitio ha sido almacenado en caché por un navegador web, como si lo ha sido por un servidor.


Aunque normalmente hay instrucciones para evitar que el almacenamiento en caché se convierta en un problema de este tipo, esto puede ser un problema particular con las hojas de estilo en cascada (CSS). Si está utilizando CloudFlare con su sitio, ellos almacenarán en caché su CSS durante mucho tiempo. Esto significa que si hace cambios en su CSS, pasará un tiempo antes de verlos en el sitio en vivo.


Solución de almacenamiento en caché de CSS

Esto puede solucionarse alterando la referencia a su archivo CSS en el HTML de la página en cuestión para que se añada una nueva cadena de consulta - por ejemplo, alterando "ejemplo.css" a "ejemplo.css?v=2.2.2". Esto suele provocar que tanto las CDN como los navegadores web se comporten como si se tratara de un archivo nuevo que no han descargado antes - incluso si lo han hecho.


En el ejemplo dado, CloudFlare dejará en espera su suposición habitual de que "ejemplo.css" es el mismo archivo que siempre ha estado utilizando, y hará una petición completamente nueva al servidor de origen para obtener la última copia del archivo.


El servidor de origen ignorará la cadena de consulta "?v=2.2.2", pero proporcionará, sin embargo, la última versión del archivo. La próxima vez que se actualice "ejemplo.css", se puede cambiar por "ejemplo.css?v=2.2.3" -o por cualquier número que prefiera el editor- para que el CloudFlare vuelva a obtener la última versión.


Puede encontrar más detalles sobre esta estrategia aquí.



Loading ...