¿Qué es el HTTP Caching y cómo funciona?

Caching es el almacenamiento y reutilización de recursos a los que se accede frecuentemente en las páginas web (imágenes, texto HTML, gráficos, URL, scripts, etc.). El uso de caché aporta beneficios para un sitio web, como la reducción de latencia, la reducción del consumo de ancho de banda, la reducción del tráfico de red, así como el aumento de la velocidad y del desempeño. Todo esto optimiza la experiencia en línea del usuario y, por tanto, aumenta los ingresos de las empresas.

Vivian Seixas - Technical Researcher
¿Qué es el HTTP Caching y cómo funciona?

Caching (almacenamiento en caché) es, básicamente, el almacenamiento y reutilización de recursos a los que se accede frecuentemente en las páginas web. Como el almacenamiento es realizado en un lugar de rápido acceso, la navegación es más rápida, lo que mejora el desempeño de los sitios web y aplicaciones. Por ello, HTTP Caching es una herramienta esencial para los negocios que quieren optimizar su experiencia de usuario y, en consecuencia, incrementar sus ingresos.

Cada milisegundo cuenta

Si te preguntan sobre lo que más te molesta de un sitio web, probablemente dirías “que sea un sitio lento”. No estás solo, el 70 % de los consumidores dice que la velocidad de carga de una página web afecta su deseo de completar una compra en línea. Cuando el suministro y la renderización de una página web son lentos, esto afecta la experiencia de usuario y se convierte en una oportunidad perdida de engagement y ventas.

Vivimos en la era de la inmediatez, por lo que cualquier cosa diferente a eso en el mundo virtual es sinónimo de fracaso. Si Google y otros motores de búsqueda no perdonan a los sitios web lentos al momento de definir sus rankings, imagina cómo esto afecta la experiencia y el consumo de tiempo cuando el usuario está esperando para navegar en tu página web.

En momentos de gran demanda, una forma eficiente de hacer que un sitio web sea más rápido es usando el caching. ¿Ya oíste hablar al respecto? En este artículo, te explicaremos qué es el caching, o almacenamiento en caché, y cómo funciona.

¿Qué es el caching?

Ya vimos que el caching es el almacenamiento y reutilización de recursos de las páginas web (imágenes, HTML, textos, gráficos, URL y scripts) a los que se accede frecuentemente, lo que evita su descarga cada vez que la página es visitada. Para hacer el caching, se usa una memoria caché, que es un repositorio de recursos –en el caso de una página web, la memoria caché puede estar en el navegador, en los servidores proxy, en los edge nodes, entre otros– más cerca del usuario que un servidor de origen. Entonces, cuando alguien visita un sitio web, el sistema accede a la memoria caché para revisar si hay copias de los recursos del sitio almacenados allí; si las hay, las recupera mucho más rápido porque no es necesario obtenerlas de la fuente original. Si no existe ninguna copia de los recursos en caché, la solicitud extraerá y almacenará los recursos necesarios en el servidor de caché.
Imagem que muestra lo que es HTTP Caching y cómo funciona

El uso de caché es hecho por medio de informaciones transmitidas por el header de solicitud y respuesta. A través del caching, es posible reducir el número de round-trips (viajes ida y vuelta), hechos en una solicitud, ya que se verifica si hay copias almacenadas en caché de lo que fue solicitado. La disminución en el número de round-trips reduce el tiempo de las solicitudes y, por tanto, el tráfico de la red. Es un efecto dominó, pero de una manera positiva, ya que todo esto contribuye a reducir la latencia y los costos del servidor.

El uso de la memoria caché es parte del protocolo HTTP en la transmisión de datos, así que vamos a revisar de qué se trata específicamente.

¿Qué es el HTTP caching?

Para entender mejor qué es HTTP caching, vamos a recordar qué es HTTP. De forma resumida, HTTP es un protocolo de transferencia de la capa de aplicación basado en texto y es considerado la base de la comunicación de datos entre los dispositivos de la red, o sea, entre clientes y servidores. En el proceso de comunicación del protocolo HTTP también pueden ser dadas directrices para definir cómo la información intercambiada será almacenada y esto es lo que llamamos HTTP caching. Estas informaciones sobre el almacenamiento en caché ocurren en los headers de las solicitudes y de las respuestas, al tiempo que definen el comportamiento deseado por el cliente o por el servidor. También podemos decir que el objetivo principal del almacenamiento en caché es mejorar el desempeño de la comunicación al reutilizar el mensaje de una respuesta previa para atender una solicitud actual.

¿Cómo funciona el HTTP caching?

En líneas generales, el proceso de caching funciona así:

  1. La página web solicita un recurso al servidor de origen.
  2. El sistema verifica en la memoria caché para saber si existe una copia del recurso almacenada.
  3. Si el recurso está almacenado en caché, el resultado será una respuesta positiva de caché y el recurso será entregado desde la memoria caché.
  4. Si el recurso no está almacenado en caché, el resultado será una pérdida de caché y se accede al archivo en su fuente original.
  5. Después de que el recurso es almacenado en caché, continuará allí hasta que expire o la memoria caché sea purgada.

Tipos de caching

El tipo de almacenamiento en caché es definido de acuerdo con el lugar en el que el contenido es almacenado.

  • Caché del navegador: este tipo de almacenamiento se realiza en el navegador. Todos los navegadores tienen almacenamiento local, generalmente usado para recuperar recursos a los que se ha accedido previamente. Este tipo de caché es privado, ya que los recursos almacenados no son compartidos.
  • Caché de proxy: este tipo almacenamiento, también llamado caching intermedio, se realiza en el servidor proxy, ubicado entre el cliente y el servidor de origen. Este es un tipo de caché compartido, ya que es usado por múltiples clientes y generalmente es mantenido por los proveedores.
  • Caché de gateway: también conocido como proxy inverso, es una capa separada e independiente. Este almacenamiento ocurre entre el cliente y la aplicación. Almacena en caché las solicitudes realizadas por el cliente y las envía a la aplicación; completa el mismo proceso con las respuestas, enviándolas desde la aplicación hacia el cliente. Si un recurso es solicitado nuevamente, la memoria caché envía la respuesta antes de llegar a la aplicación. También es un tipo de caché compartido, pero por los servidores y no por los usuarios.
  • Caché de aplicación: este tipo de almacenamiento es realizado en la aplicación. Permite al desarrollador especificar cuáles archivos debe almacenar el navegador en caché y poner a disposición de los usuarios incluso cuando no estén conectados.

Caching headers

En los headers (encabezados) de solicitud y respuesta, son dadas directrices que sirven para definir las características del almacenamiento en caché. Por ejemplo:
Imagen con HTTP caching headers

Cache-control

En el header de cache-control, pueden ser dadas las siguientes directrices estándar para el almacenamiento en caché:

  • private
    El contenido es considerado privado y solo un usuario tiene acceso. En este caso, el contenido privado puede ser almacenado en el navegador de un cliente, pero no en caché intermediario.

  • public
    El contenido es considerado público y más de un usuario puede tener acceso. El contenido puede ser almacenado en el navegador o en otros tipos de caché entre el cliente y el servidor.

  • no-store

    El contenido no puede ser almacenado en caché, así que la solicitud es enviada siempre al servidor de origen. Este formato indica que se transfieren datos confidenciales.

  • no-cache

    El contenido almacenado en caché debe ser revalidado en cada nueva solicitud y esto lo convierte inmediatamente en contenido obsoleto. En este caso, la memoria caché envía la solicitud al servidor de origen antes de liberar la copia almacenada.

  • max-age

    Define la cantidad máxima de tiempo que el contenido puede ser almacenado en caché sin ser revalidado en el servidor de origen. El tiempo es definido en segundos y el plazo máximo es de un año (31 536 000 segundos).

  • s-maxage

    Indica la cantidad máxima de tiempo que el contenido puede ser almacenado en caché. Es similar a max-age, pero la diferencia es que esta opción solo aplica para caché intermediarios, pero no para el navegador.

  • max-stale
    Indica que se aceptará una respuesta que ha excedido su tiempo de vida de actualización. Si no es asignado un valor (en segundos) a max-stale, será aceptada una respuesta obsoleta de cualquier edad; pero si se asigna un valor, entonces será aceptada una respuesta que ha excedido su vida útil de actualización en el tiempo especificado para el límite.

  • must-revalidate

    Indica que el tiempo de expiración, señalado por max-age, s-maxage o Expires, debe obedecerse. En este caso, el contenido obsoleto no debe ser suministrado al cliente y el navegador solo puede usar contenido obsoleto si ocurre una falla de red.

  • proxy-revalidate

    La directriz es similar a must-revalidate, pero es configurada solo para servidores intermediarios, proxies o CDN. En este caso, los servicios de almacenamiento en caché deben revalidar el contenido si se vuelve obsoleto.

  • no-transform

    Define que la memoria caché no puede modificar el contenido recibido. Por ejemplo, no puede elegir enviar una versión compacta de un contenido descomprimido que recibió desde el servidor de origen.

  • min-fresh

    Define que el contenido debe ser mantenido actualizado al menos por el tiempo de vida que fue especificado (en segundos).

  • only-if-cached

    Indica que el cliente solo quiere contenido que tiene una copia almacenada en caché. La memoria caché debe usar el contenido almacenado en caché en respuesta si esto se adecua con las restricciones. En caso contrario, responde con un código de estatus 504 (Gateway Timeout), que indica que el servidor intermediario no obtuvo una respuesta del servidor de origen para completar la solicitud.

Es posible combinar diferentes comportamientos de caché en los headers, pero hay dos casos donde solo una opción es posible, ya que son opuestas: 1) no-cache o no-store y 2) private o public.

Expires

El header Expires define cuándo expirará un contenido. Después de que pasa el tiempo especificado, el contenido almacenado en caché es considerado obsoleto, así que la solicitud tendrá acceso al contenido más reciente en el servidor de origen.

Etag

El header Etag (Entity tag) es usado para verificar si el recurso almacenado en caché del navegador es el mismo en el servidor de origen. Así valida si el cliente recibe la versión más reciente del contenido en caché. Este header funciona como un identificador único asociado con cada recurso en el sitio web. Para el proceso de identificación, los servidores de las páginas web usan un valor Etag, el cual se modifica cada vez que se altera el recurso. El valor Etag es el día y hora de la actualización más reciente del recurso.

Last-Modified

El header Last-Modified muestra al navegador la última vez que un recurso fue modificado y si debe usar la copia en caché o descargar la versión más reciente. Por ejemplo, cuando un usuario visita tu sitio web, el navegador almacena los recursos de la página, así la próxima vez que acceda a esta, el servidor verifica si los documentos han sido modificados desde la última vez que fueron consultados. Si no hay modificación, el servidor enviará una respuesta “304 not modified” al navegador y la copia almacenada en caché es usada .

Vary

El header Vary permite almacenar diferentes versiones del mismo contenido, así que es usado para solicitar a la memoria caché la verificación de headers adicionales antes de decidir qué contenido es una solicitud. Por ejemplo, cuando es usado en el header Accept-Encoding, las configuraciones permiten diferenciar entre contenido comprimido y descomprimido o cuando es usado usado con el header User-Agent, diferencia entre la versión de escritorio y móvil de un sitio web.

Beneficios del almacenamiento en caché

Para resumir, estos son los principales beneficios del caching o almacenamiento en caché:

  • reducción de la latencia;
  • reducción del consumo de ancho de banda;
  • reducción del tráfico de red, e
  • incremento de la velocidad y desempeño del sitio web.

La solución de Azion

Los usuarios tienen expectativas muy altas respecto a la velocidad de los sitios web y una respuesta que no las cumpla es sinónimo de pérdida de clientes. Prueba de esto son los datos del reporte de 2020, Milliseconds Make Millions, de Deloitte_,_ los cuales muestran que una mejora de 0,1 segundos en la velocidad trae varios beneficios al negocio, tales como un incremento en el engagement de los usuarios, mejores tasas de conversión y, por tanto, un crecimiento en las ventas.

Como hemos mostrado en este artículo, el HTTP caching es extremadamente importante para la optimización de la velocidad de un sitio web y vital para mejorar la percepción de la imagen de una compañía, especialmente si se quiere incrementar la base de clientes o mantenerlos leales. ¿Cómo puedes lograr todo esto? Es simple, con Azion.

Edge Cache de Azion: súper alta velocidad y potente desempeño

Edge Cache es la mejor solución para quienes quieren un sitio web rápido con un alto desempeño. ¿Cómo es posible? Una de las principales razones es porque el almacenamiento en caché es realizado en el edge de la red, más cerca de los usuarios finales. La otra razón es porque tiene la capacidad de responder miles de solicitudes simultáneas sin comprometer nuestra infraestructura.

Además, nuestro servicio de caching proporciona todos los tipos de contenido basados en HTTP y HTTPS, incluidos archivos estáticos y videos on-demand o en vivo, inclusive cuando tu servidor no está disponible. Esto mejora el desempeño y la confiabilidad durante el suministro de contenido a audiencias de cualquier tamaño, al reducir las fallas y la latencia mientras incrementa las tasas de transferencia.

Edge Cache tiene una arquitectura de proxy inverso mediante la cual los clientes se conectan a los edge nodes de nuestra red global altamente distribuida. En ella, puedes almacenar tu contenido en caché e inclusive expandir su versatilidad con el complemento Tiered Cache, una capa adicional de almacenamiento en caché entre el edge de Azion y el origen, que ayuda a reducir la carga en tu infraestructura.

Si deseas garantizar la máxima velocidad para tu sitio web y la mejor experiencia en línea para tus usuarios, entra en contacto con nuestro equipo de ventas aquí.

Suscríbete a nuestro boletín informativo