BFcache: acelera la navegación en el historial para tus usuarios

La caché de retroceso/avance (o BFcache) es una optimización del navegador que permite una navegación instantánea hacia atrás y adelante. Mejora significativamente la experiencia de navegación, especialmente para usuarios con redes o dispositivos más lentos.

¿Qué es BFcache?#

BFcache es una caché en el navegador que almacena una instantánea completa de la página cuando el usuario se aleja. Al tener toda la página almacenada en memoria, el navegador puede recuperarla rápidamente si el usuario decide volver, en lugar de repetir todas las solicitudes de red necesarias para cargar la página.

El siguiente video muestra cuánto puede acelerar la navegación el uso de BFcache:

Addy Osmani: BFcache on Chrome for Android

Cómo funciona BFcache#

La caché utilizada por BFcache es diferente de la caché HTTP, que juega su propio papel en acelerar las navegaciones repetidas. BFcache es una instantánea completa de la página en memoria, incluyendo JavaScript, mientras que la caché HTTP solo contiene las respuestas a solicitudes realizadas anteriormente.

Las visitas repetidas utilizando la restauración desde BFcache son siempre más rápidas que las navegaciones mejor optimizadas sin BFcache. Con BFcache, la visualización del estado anterior de la página es prácticamente instantánea.

Para uno de nuestros clientes, Key4you.cz, activamos BFcache, permitiendo que ahora lo utilicen el 16,5% de los usuarios móviles. Después de descontar el impacto de TTFB (tiempo de respuesta del servidor), el valor de la métrica LCP para todo el dominio disminuyó en 60 ms.

Compatibilidad con navegadores#

BFcache ha sido compatible durante muchos años tanto en Firefox como en Safari, tanto en computadoras como en dispositivos móviles.

A partir de la versión 86, el navegador Chrome permitió a un pequeño porcentaje de usuarios utilizar BFcache para la navegación entre páginas en el sistema Android. Desde la versión 96, BFcache está habilitado para todos los usuarios de Chrome tanto en computadoras como en móviles.

El grupo de desarrolladores de Google Chrome dijo: «La introducción de la caché BFcache causó la mayor mejora en CLS que observamos en 2022».

Optimización para BFcache#

No todas las páginas se almacenan automáticamente en BFcache, e incluso cuando una página se almacena allí, no permanece indefinidamente. Aquí describimos en qué se basa la elegibilidad de las páginas para el almacenamiento en BFcache. El desarrollador debe evaluar cuáles páginas deben almacenarse en BFcache y cuáles no. Asimismo, es necesario maximizar la cantidad de páginas que aprovechan BFcache.

Evento unload#

Usa el evento pagehide en lugar de unload. La forma más importante de optimizar para BFcache en todos los navegadores es nunca usar el listener de eventos unload. En su lugar, utiliza pagehide.

El evento unload no debe usarse ni en scripts de terceros. Para saber si algún JavaScript en tus páginas utiliza unload, recomendamos usar la auditoría no-unload-listeners en la herramienta Lighthouse.

Auditoría para el evento Unload en la prueba de Lighthouse

Cache-Control: no-store#

Minimiza el uso de Cache-Control: no-store y prefiere Cache-Control: no-cache o Cache-Control: max-age=0.

Cache-Control: no-store es una cabecera HTTP que los servidores web pueden configurar en las respuestas y que le indica al navegador que no almacene la respuesta en ninguna caché HTTP. Se utiliza para recursos que contienen información sensible del usuario, como páginas detrás de un inicio de sesión.

Para optimizar para BFcache, utiliza Cache-Control: no-store solo en páginas que contienen información sensible que no debe almacenarse en caché.

Para las páginas que quieren mostrar siempre el contenido más reciente pero no contienen información sensible, utiliza Cache-Control: no-cache o Cache-Control: max-age=0. Estas instrucciones le dicen al navegador que verifique el contenido antes de mostrarlo, y no afectan la elegibilidad de la página para BFcache.

Usar Cache-Control: no-cache asegura el almacenamiento en BFcache.

Window.opener#

Evita los enlaces a window.opener.

Si una página fue abierta usando window.open() desde un enlace con target=_blank sin especificar rel="noopener", la página abierta contenía un enlace al objeto de ventana de la página que la abrió.

Además de representar un riesgo de seguridad, la página no se puede colocar de manera segura en BFcache, ya que no se puede determinar con claridad de dónde proviene.

Para evitar estos riesgos, usa rel="noopener" para evitar la creación de enlaces window.opener. Este es el comportamiento predeterminado en todos los navegadores modernos.

Conexiones abiertas#

Siempre cierra las conexiones abiertas antes de que el usuario se aleje.

Esto se aplica a los casos de:

• Páginas con conexión IndexedDB abierta
• Páginas con fetch() o XMLHttpRequest en progreso.
• Páginas con conexión WebSocket o WebRTC abierta

Consejo: Si estos consejos no son suficientes, puedes ver el video sobre cómo depurar y optimizar para BFcache de Chrome for Developers.

Pruebas de funcionalidad de BFcache#

¿Cómo puedes probar si tus páginas web se cargan desde BFcache?

DevTools#

• Ve a una página específica en el navegador Chrome.
• Luego, en la herramienta DevTools, ve al menú Application > Back-Forward cache.
• Haz clic en el botón Run Test y la herramienta DevTools te mostrará el estado para la página específica.

Una página que se almacena con BFcache.

Una página que no cumple las condiciones para almacenamiento en BFcache.

Lighthouse 10#

En la herramienta Lighthouse, una de las pruebas en la auditoría verifica la elegibilidad de la página para BFcache.

Lighthouse 10

Desventajas#

Aunque BFCache ofrece varias ventajas para la velocidad y fluidez de la navegación web, también existen algunas desventajas asociadas con esta tecnología:

Consumo de memoria#

BFCache requiere cierta cantidad de memoria para almacenar el estado de las páginas web, lo que puede aumentar el consumo total de memoria del navegador, especialmente en dispositivos con recursos limitados, como teléfonos móviles o computadoras más antiguas.

Posibles inconsistencias de datos#

Existe el riesgo de que BFCache pueda llevar a inconsistencias de datos, especialmente si las páginas web contienen elementos interactivos como formularios, carritos de compras o ventanas de chat. Los usuarios podrían ver información obsoleta o inválida si BFCache no se actualiza adecuadamente.

Riesgos de seguridad#

Almacenar datos sensibles en caché puede representar un riesgo de seguridad, especialmente si el dispositivo es compartido o no está adecuadamente asegurado. Existe la posibilidad de que la información sensible pueda ser mal utilizada si se almacena en BFCache y luego es accesible por personas no autorizadas.

A pesar de estas desventajas, BFCache es una tecnología beneficiosa para la mayoría de los usuarios y desarrolladores, mejorando la experiencia del usuario y la eficiencia de la navegación web.

Impacto en las métricas Core Web Vitals#

BFCache puede tener un gran impacto en los Core Web Vitals, que son clave para evaluar la experiencia del usuario de las páginas web por parte de Google.

Largest Contentful Paint (LCP)
BFCache puede afectar positivamente al LCP al permitir una rápida visualización del contenido principal de la página web cuando se usan los botones de retroceso o avance. Esto puede llevar a una mejor calificación de LCP y mejorar la impresión general del usuario.

Cumulative Layout Shift (CLS)
BFCache puede afectar positivamente al CLS si la restauración de la página sin BFcache causa desplazamientos inesperados del contenido.

Interaction to Next Paint (INP) y First Input Delay (FID)
BFCache puede influir en INP y FID si el usuario interactúa con la página web después de usar los botones de retroceso o avance. Si el estado de la página se restaura desde BFCache, puede significar un menor FID y también una mejor métrica INP, ya que el navegador no necesita recargar y renderizar el contenido de nuevo.

Presentamos BFcache en nuestro reciente seminario web:

Activa BFcache#

Eliminando los obstáculos para almacenar páginas en BFcache, obtienes:

1. Navegación más rápida:
   BFCache permite una restauración instantánea del estado de la página web al usar los botones de retroceso o avance, lo que acelera significativamente la navegación entre páginas y mejora la impresión general para el usuario.

2. Ahorro en tráfico de datos:
   Al almacenar el estado de las páginas en memoria, BFCache puede minimizar la necesidad de recargar y renderizar el contenido repetidamente, lo que conduce a una reducción del tráfico de datos y a una carga más rápida de las páginas.

3. Mejora de la experiencia de usuario y métricas de Core Web Vitals:
   Con una carga más rápida y navegación fluida, BFCache contribuye a una mejora general de la experiencia de usuario al navegar por la web, lo que resulta en una mayor satisfacción del usuario.