WHITE PAPER

Comportamiento de la caché de los navegadores web

Updated February 05, 2014
  • Share via AddThis

Cuando un usuario visita una página web, el contenido de esa página puede almacenarse en la caché del navegador para no tener que volver a solicitarla y descargarla más adelante. El uso eficiente de la caché del navegador puede mejorar los tiempos de respuesta del usuario final y reducir la utilización del ancho de banda.

La capacidad de almacenamiento en caché de un elemento en el navegador viene determinada por:

  • Los encabezados de respuesta que devuelve el servidor web de origen. Si los encabezados indican que el contenido no debe almacenarse en caché, entonces no se almacenará.
  • Un validador como un encabezado ETag o Last-Modified debe estar presente en la respuesta.

Si un elemento se considera almacenable en caché, el navegador recuperará el elemento de la memoria caché en las visitas posteriores si está considerado como «fresco», La frescura viene determinada por:

  • Una hora de caducidad válida que todavía está dentro del período de validez.
  • La configuración del navegador tal y como se explica a continuación.

Si una representación es antigua o no tiene una fecha de caducidad válida, el navegador pedirá al servidor web de origen que valide el contenido para confirmar que la copia que tiene se puede proporcionar. El servidor web devolverá entonces un 304 para informar al navegador de que la copia local almacenada en la caché sigue siendo válida para su uso. Si el contenido ha cambiado, el servidor web devuelve un código de respuesta 200 y entrega la nueva versión.

El uso de la caché del navegador depende de tres cosas principales:

  • Configuración del navegador
  • El sitio web (código HTML y encabezados HTTP).
  • Cómo carga el usuario la página

Configuración del navegador

El usuario puede configurar cómo quiere que se almacene y entregue el contenido en caché desde su caché local, o si quiere o no que el contenido se almacene en la caché. Internet Explorer y Firefox funcionan de forma ligeramente diferente a este respecto.

Cada vez que visite/vea la página web

Cuando un usuario vuelve a una página visitada anteriormente, el navegador comprueba con el servidor web de origen si la página ha cambiado desde la última vez que se visualizó.

Cada vez inicie el navegador/Una vez por sesión

Si se vuelve a visitar una página dentro de la misma sesión del navegador, el contenido se entregará desde la caché. Cuando se cierre el navegador y se vuelva a abrir, se enviará una solicitud para comprobar si el contenido ha cambiado. Si se visita una página durante la misma sesión del navegador, se utilizarán los archivos de la caché en lugar de descargar el contenido del servidor web de origen.

Automáticamente/Cuando la página no esté actualizada

Cuando el navegador se cierra y se vuelve a abrir en visitas repetidas, utilizará la configuración de la vida útil del contenido almacenado en la caché. Si se visita la misma página durante una única sesión del navegador, se utilizarán los archivos almacenados en la caché. Esta es la configuración predeterminada tanto para Internet Explorer como para Firefox.

Nunca

El navegador no comprobará con los servidores web de origen los contenidos más nuevos.

Estos ajustes se pueden configurar de las siguientes maneras para IE y Firefox:

Internet Explorer

  • Seleccione Herramientas.
  • Seleccione Opciones de Internet.
  • IE 7: en la pestaña General, en el historial de navegación, seleccione la configuración.
  • IE 5 o 6: en Archivos temporales de Internet, haga clic en Configuración.

Firefox

  • Escriba about:config en un navegador Firefox.
  • Haga doble clic en el ajuste browser.cache.check_doc_frequency.
  • Introduzca el valor entero deseado en el cuadro de diálogo.
  • 0 = Una vez por sesión
  • 1 = Cada vez que vea la página
  • 3 = Cuando la página no esté actualizada (predeterminado)
  • 2 = Nunca

Además de configurar las opciones generales de la caché, hay opciones adicionales que se pueden configurar para controlar si el contenido SSL se almacena en la caché o no. Cuando esta opción está activada, ningún contenido SSL se almacena en el disco, lo que incluye las imágenes estáticas, y se obliga al navegador a solicitar el contenido con cada visita a la página. Internet Explorer tiene esta opción desactivada de forma predeterminada, mientras que Firefox la tiene activada de forma predeterminada.

Para activar/desactivar el almacenamiento en caché del contenido SSL:

Internet Explorer

  • Seleccione Herramientas.
  • Seleccione Opciones de Internet.
  • Seleccione Opciones avanzadas
  • En la sección Seguridad:
    • Seleccione la opción «No guardar las páginas cifradas en el disco» para no almacenar en caché el contenido SSL.
    • Desmarque la opción «No guardar las páginas cifradas en el disco» para almacenar en caché el contenido SSL.

Firefox

  • Escriba about:config en un navegador Firefox.
  • Haga doble clic en browser.cache.disk_cache_ssl para cambiar la configuración.
    • «True» indica que el contenido SSL se almacenará en la caché.
    • «False» indica que el contenido SSL no se almacenará en la caché.

El sitio web

Para que el contenido se entregue desde la caché, la URL tiene que coincidir exactamente con el contenido de la caché. Algunos desarrolladores web añaden números aleatorios a parte de la cadena de consulta para asegurarse de que el contenido no se almacena en la caché y es siempre «fresco». Cuando se añaden estas cadenas de consulta aleatorias a la URL, el navegador no reconoce que el contenido es el mismo que el elemento que ya está en la caché y se emitirá una nueva solicitud GET para el elemento en cuestión.

En la mayoría de los casos, el comportamiento de la memoria caché del contenido se controla mediante los encabezados HTTP Cache-Control y Expires. Los encabezados Cache-Control especifican si el contenido se puede almacenar en la caché o no, y durante cuánto tiempo. Los valores pueden incluir:

  • no-cache: No almacenar en caché este contenido.
  • private: se puede almacenar mediante navegadores, pero no en cachés compartidas/públicas.
  • max-age: se establece en segundos; especifica la cantidad máxima de tiempo que el contenido se considera fresco.

Cuando se incluye un único encabezado Expires sin encabezado Cache-Control indica que el contenido se puede almacenar en caché tanto mediante los navegadores como mediante las cachés públicas/compartidas, y se considera obsoleto después de la fecha y hora especificadas, como se muestra a continuación:

(Status-Line) HTTP/1.1 200 OK Content-Length 4722 Content-Type image/gif Date Fri, 31 Aug 2007 10:20:29 GMT Expires Sun, 17 Jan 2038 19:14:07 GMT Last-Modified Wed, 07 Jun 2006 23:55:38 GMT URL in cache? Yes Expires 19:14:07 Sun, 17 Jan 2038 GMT Last Modification 23:55:38 Wed, 07 Jun 2006 GMT Last Cache Update 10:20:32 Friday, August 31, 2007 GMT Last Access 10:20:31 Friday, August 31, 2007 GMT ETag Hit Count 1

Si no están presentes los encabezados Cache-Control o Expires, el navegador almacenará en caché el contenido sin fecha de caducidad, como se ilustra a continuación:

Headers: (Status-Line) HTTP/1.1 200 OK Accept-Ranges bytes Connection Keep-Alive Content-Length 221 Content-Type Image/gif Date Fri, 31 Aug 2007 10:27:06 GMT Last-Modified Fri, 02 Jun 2006 09:46:32 GMT URL in cache? Yes Expires (Not set) Last Modification 09:46:32 Friday, June 02, 2006 GMT Last Cache Update 10:26:32 Friday, August 31, 2007 GMT Last Access 10:26:31 Friday, August 31, 2007 GMT ETag Hit Count 1

Algunos desarrolladores web han optado por utilizar las etiquetas META para controlar cómo se guarda el contenido en la caché en lugar de establecer parámetros de caché en los encabezados HTTP. El uso del encabezado HTTP es la forma preferida y recomendada de controlar el comportamiento de la caché.

Control de la caché del navegador y del proxy

Existen cuatro valores que se pueden utilizar para la variable de contenido:

  • Private: solo se permite el almacenamiento en una caché privada, como la de un navegador.
  • Public: se puede almacenar en cachés compartidas o cachés privadas.
  • No-Cache: el contenido no se puede almacenar en caché.
  • No-Store: el contenido se puede almacenar en caché pero no archivar: . La etiqueta Expires se debe utilizar junto con las etiquetas Cache-Control para especificar cuánto tiempo se puede almacenar el contenido.

Anular la caché del navegador

Cuando se recibe, el navegador no almacenará el contenido en caché de forma local; de forma efectiva, es igual que enviar un encabezado Cache-Control=No-Cache.

Actualizar el contenido o redirigir a los usuarios a otra página


Los elementos de actualización se pueden utilizar para indicar al navegador que redirija al usuario a otra página o que actualice la página después de un tiempo determinado. La etiqueta de actualización funciona de la misma manera que cuando se pulsa el botón de actualización del navegador. Incluso aunque el contenido tenga una fecha de caducidad válida, el navegador solicitará que se compruebe que no haya cambiado desde el servidor de origen. Esto, básicamente, anula el propósito del establecimiento de fechas de caducidad para el contenido.

Si se especifica una URL en la etiqueta META, se indica al navegador que debe redirigirse a la URL especificada una vez transcurrido el tiempo. No se recomienda redirigir a los usuarios a través de la etiqueta META en lugar de un encabezado HTTP-Response, ya que las actualizaciones de META pueden desactivarse por parte del usuario en la configuración de seguridad del navegador.

Cómo carga el usuario la página

El uso de cómo se extrae el contenido de la caché en las visitas repetidas se ve afectado por la forma en que se emite la solicitud.

Navegar por varias páginas o pulsar el botón Atrás

Mientras se encuentre en la misma sesión del navegador, todo el contenido de un sitio se entregará desde la caché local del navegador. Si un usuario hace clic en varias páginas de una aplicación y se encuentran los mismos gráficos y elementos en cada página, la solicitud no se enviará al servidor web de origen. En su lugar, se entregará el contenido desde la caché local. Si el usuario vuelve a visitar una página durante esa sesión, todo el contenido (incluido el HTML) se recuperará desde la caché local, como se muestra en la imagen siguiente (dependiendo de la configuración del navegador). En el momento en que se cierra el navegador, la caché de la sesión se borra. Para la siguiente sesión, la única caché que se utilizará será la de disco.

Actualizar

Los usuarios también pueden pulsar el botón de actualización de una página para comprobar si hay nuevo contenido, como un resultado deportivo o una noticia que se hayan actualizado. Al hacer clic en la opción de actualizaciones, se envía un encabezado «If-None-Match» al servidor web de origen para todo el contenido que está actualmente en la caché del disco, independientemente de la fecha de caducidad del contenido almacenado en la caché. Esto da como resultado un código de respuesta 304 para cada elemento reutilizable que se encuentre actualmente en la caché del navegador, como se ilustra en la imagen siguiente.

CTRL + Actualizar o CTRL + F5

Al pulsar CTRL y actualizar (solo en Internet Explorer) o CTRL y F5 (Internet Explorer y Firefox), se insertará un encabezado «Cache-Control=no-cache» en la solicitud, lo que hará que todo el contenido se entregue directamente desde los servidores de origen sin que se entregue ningún contenido desde la caché local del navegador. Todos los objetos contendrán un código de respuesta 200, lo que indica que todos se entregaron directamente desde los servidores, como en la ilustración siguiente.

Nueva sesión del navegador

Si se inicia una nueva sesión del navegador y un usuario vuelve a un sitio que visita con frecuencia, se utilizará la caché del navegador local (según la configuración del navegador). Si existe una fecha de caducidad válida para el contenido almacenado en la caché, éste se entregará directamente desde la caché y no se emitirá ninguna solicitud al servidor web de origen. Si el contenido no tiene una fecha de caducidad válida, el navegador insertará un encabezado «If-modified-since» o «If-none-match» en la solicitud. Si el contenido no ha cambiado, el servidor devolverá un 304 y el contenido se recuperará desde la caché. Por el contrario, si el contenido ha cambiado, el servidor responderá con un 200 y entregará el contenido al usuario.

Ajustes recomendados

Los usuarios habituales de BIG-IP® WebAccelerator™ pueden obtener grandes ventajas siempre que utilicen la siguiente configuración recomendada. Utilizando estos ajustes, el usuario sacará el mayor provecho de las funciones de Intelligent Browser Referencing de WebAccelerator.

Configuración del navegador

  • Automáticamente/Cuando la página no esté actualizada
  • El contenido SSL debe almacenarse en caché.

El sitio web

Si el contenido estático contiene parámetros de consulta aleatorios para evitar el almacenamiento en caché, se puede utilizar una iRule para eliminar estos parámetros aleatorios y permitir el almacenamiento en caché.

Como se ha mencionado anteriormente, el uso de encabezados HTTP en lugar de etiquetas META es la forma preferida de controlar el comportamiento de la caché de una aplicación. El uso de etiquetas META anula, en potencia, las ventajas de la aceleración para el usuario final. Las etiquetas META pueden eliminarse mediante el uso de iRules o guiones de reescritura personalizados. Con la eliminación de las etiquetas META, los usuarios finales podrán experimentar las ventajas de la función Intelligent Browser Referencing.

Carga de la página

Para ver las diferencias de la aplicación con y sin aceleración, hay que iniciar una nueva sesión del navegador; las otras tres formas de cargar una página en visitas repetidas no mostrarán ninguna diferencia con o sin aceleración.

Conclusión

Si se elimina la necesidad de que el navegador descargue el contenido en las visitas repetidas, se puede mejorar mucho el rendimiento de las aplicaciones web. Existen muchos factores que influyen en si el contenido puede o no ser recuperado desde la caché del navegador local en las visitas repetidas, incluyendo la configuración del navegador, el sitio web y el comportamiento del usuario. BIG-IP WebAccelerator puede mejorar la utilización de la caché del usuario sin necesidad de cambiar la aplicación.