Web Caching and Cache Busting

INTRODUCCIÓN

“Caching” es un concepto de almacenamiento de datos de uso frecuente para dar ubicaciones de acceso rápido para que la solicitud de los datos ocurra más rápido. Existen varios tipos de cachés como el caché de CPU, el caché de GPU, el caché de disco y el caché del navegador, etc. El caché de contenido es una de las formas más poderosas de improvisar la experiencia del usuario para su sitio web. Cuando se trata de una solicitud y respuesta, si el recurso solicitado se encuentra en el caché, se llama como un cache hit (golpe de caché) . Del mismo modo, si el recurso no se encuentra en el caché, se llama cache miss (error de caché) . Aquí nos estamos centrando en el Web Caching (El almacenamiento en caché web) y Cache Busting (encubrimiento de caché), que es la parte crucial a tener en cuenta al desarrollar un sitio web.

¿QUÉ ES WEB CACHING?

Web Caching (El almacenamiento en caché web) es una función principal del protocolo HTTP utilizado para minimizar el tráfico de red al mejorar el rendimiento de la web. Los cachés se encuentran en cada capa de un viaje de contenido desde el servidor al navegador. Cada navegador tiene su propia función de almacenamiento en caché, que es donde se almacenan las imágenes y otros activos web para un acceso rápido más adelante. El objetivo principal del Web caching es ahorrar tiempo si se solicita el mismo recurso varias veces y también para minimizar el ancho de banda al reducir los datos requeridos a través de una red.

¿CÓMO FUNCIONA EL CACHING?

En el momento de la solicitud de datos que se descargan desde el servidor de origen, se almacena una copia en la memoria caché web durante un período de tiempo especificado por el conjunto de reglas de caching. Si otro usuario solicita la misma información, la memoria caché del navegador envía el contenido previamente almacenado y no es necesario que la solicitud del usuario llegue nuevamente al servidor de origen.

Flujo de caché web:

PROS

Algunas de las ventajas que aporta el almacenamiento en caché son:

• Tiempo de Respuesta Mejorado: El almacenamiento en caché permite una recuperación más rápida del contenido porque no se necesita todo el viaje de ida y vuelta. El caché del navegador que se mantiene cerca del usuario puede ayudar a obtener esta recuperación rápidamente.
• Bajo Uso de Red: El contenido se puede almacenar en caché en las diversas etapas de la ruta de red entre el lado del cliente y el servidor. Cuando el contenido se almacena en caché más cerca del lado del cliente como en la memoria caché del navegador, puede hacer que la recuperación sea instantánea.
• Disponibilidad Continua de Datos: En el caso de interrupción de la red, Caching se puede utilizar para servir el contenido al usuario final incluso cuando no está disponible durante un corto período de tiempo desde el servidor (punto de origen).

¿QUÉ PUEDE SER CACHEADO?

Algunos de los datos más compatibles con el caché de la mayoría de los sitios son:

• Media files (Archivos multimedia)
• Logo images (Imágenes de logotipo)
• Style sheets (Hojas de estilo)
• Archivos JavaScript

Todos los contenidos enumerados anteriormente cambian con poca frecuencia, por lo que es mejor recuperarlos usando caché.

Algunos de los contenidos en los que se debe tener cuidado al almacenar en caché son:

• Archivos JS y CSS actualizados frecuentemente.
• Páginas HTML.
• Imágenes giratorias
• Autenticación de contenido solicitado.

Muchas veces, nos preguntamos sobre el reflejo de los cambios realizados con los archivos CSS / JS, aunque los cambios se implementan en el servidor. Digamos que el navegador tiene un archivo CSS / JS en la memoria caché desde los últimos seis meses y usted quiere cambiar un archivo CSS / JS, para esto necesita encontrar una forma de romper el caché y forzar al navegador a descargar una nueva copia. En tal caso, el enfoque de Cache busting es más adecuado.

CACHE BUSTING / ENFOQUE DE VERSIÓN

Es el navegador que hace el “Web Caching”. La mayoría de los navegadores primero preguntan al servidor si es obligatorio descargar el archivo CSS / JS y el servidor responde en consecuencia. Muchas veces el servidor responde con el estado 304 (No modificado) que le dice a un navegador que use su propia copia en caché.

Evidentemente, si cambia los archivos CSS / JS en el servidor y luego actualiza el navegador, el servidor no tendrá los cambios actualizados y responderá con 304 lo que llevará a su navegador a usar su copia en caché (es decir, la versión más antigua de su archivo).

Para deshacerse de eso y recibir los cambios apropiados, agregar información de la versión (como una cadena de consulta) al final del enlace del archivo CSS / JS es probablemente una forma más inteligente. Para hacer esto, es necesario cambiar al enlace en caso de que se actualice un archivo en particular y luego el time-stamping (sellado de tiempo) entre en la imagen.

• TimeStamping CSS/JS:Para evitar caching de los scripts y los Stylesheets, el TimeStamp se agrega al final del atributo href / src. La principal ventaja de hacer TimeStamping es cambiar el enlace y dejar que el navegador lo considere un nuevo archivo para cargarlo / descargarlo cada vez.Puede usar su código específico de plataforma para recuperar la TimeStamp actual. TimeStamping CSS con la plantilla líquida –

  <link rel="stylesheet" type="text/css" href="{{"main.css"}}?v={{site.time | date: '%Y-%m-%d-%T'}}">

  Lo cual resulta como esto:

  <link rel="stylesheet" type="text/css" href="main.css?v=2018-05-04-17:41:33">

Por lo tanto, el TimeStamping proporciona una mejor manera de recibir los cambios del lado del usuario sin tener que preocuparse por actualizar una página nuevamente.

CONCLUSIÓN

Ahora tiene todos los pros y contras de cómo funciona el caching en el navegador y el cache busting/ enfoque de versiones. Ahora puede configurar todas las políticas de la memoria caché, las cuales pueden ayudar a acelerar sus páginas web y darle una importante mejora con un trabajo mínimo.