La memoria caché atrás/adelante (o bfcache) es una optimización del navegador que permite la navegación instantánea hacia atrás y hacia adelante. Mejora significativamente la experiencia de navegación de los usuarios, especialmente para los sitios web que implican muchas navegaciones de ida y vuelta.
Artículo de web.dev sobre bfcache
Yahoo! JAPAN News, una de las plataformas de noticias más populares en Japón, impulsó un esfuerzo conjunto para mejorar su tasa de aciertos de bfcache y, como resultado, observó mejoras significativas en la experiencia del usuario y la empresa. Específicamente, los resultados de la prueba A/B que realizaron demostraron que las páginas que utilizan bfcache generaron un aumento del 9% en los ingresos publicitarios.
Este caso de éxito explicará cómo Yahoo! JAPAN News quitó los bloqueadores de la bfcache y cómo la bfcache mejoró drásticamente la experiencia del usuario.
Quita los bloqueadores de la bfcache
bfcache está disponible desde Chrome 86 y también en todos los navegadores modernos. Sin embargo, para aprovechar al máximo la bfcache, es necesario quitar los posibles bloqueadores del sitio web. Algunos de los principales obstáculos que Yahoo! JAPAN News que se enfrentaron fueron:
- Uso de controladores de
unload - Uso de la directiva
no-storeen los encabezadosCache-control
Para comprobar cuáles son los principales obstáculos que hay para tu sitio web, ve a Herramientas para desarrolladores de Chrome > Aplicaciones > Caché atrás/adelante (más detalles) o usa la API de notRestoredReasons para obtener una vista más completa de los bloqueadores según el uso real en el campo.
A continuación, te mostramos cómo Yahoo! JAPAN News eliminó sus bloqueadores:
- Descargar controladores: Usa el evento
pagehideen lugar del eventounload, ya que el eventounloades muy poco confiable. Además, se lanzópermission-policy: unloaden Chrome 115 para que los sitios web puedan quitar de forma confiable los controladoresunloadpara orígenes específicos. Chrome también planea dar de baja gradualmente los controladores deunload. Cache-control: no-store(o CCNS): Cambiar el encabezadoCache-controldeno-storeano-cachepuede habilitar bfcache. Chrome también planea comenzar a almacenar en caché para bfcache, incluso con un encabezadono-store, en ciertas circunstancias.
La función CCNS está diseñada para páginas que nunca deben almacenarse en caché bajo ninguna circunstancia. Esto conlleva la salvedad de que las páginas con CCNS no podrán beneficiarse de ninguna tecnología de almacenamiento en caché, incluidos los servidores perimetrales de CDN y las memorias caché locales.
Si tienes un encabezado CCNS, esta es una gran oportunidad para analizar cuáles son las estrategias de Cache-control adecuadas para tu sitio web. Estas son las principales diferencias entre no-store y no-cache.
Si te interesa obtener más información sobre las opciones de Cache-control, este diagrama de flujo es muy útil.
Impacto de la bfcache en números
Para medir el impacto de la bfcache, Yahoo! JAPAN News realizó una prueba A/B durante 2 semanas, en la que publicó una versión de sus páginas con sus correcciones de bfcache a un grupo y una versión con páginas no aptas para bfcache a otro. Eligieron las rutas de URL con una cantidad de tráfico significativa para que la prueba pudiera lograr resultados significativos. No hubo ninguna otra diferencia visual ni funcional entre las 2 versiones.
En este video, se compara el sitio web con bfcache y sin bfcache. Puedes ver que el sitio web con la bfcache habilitada se carga considerablemente más rápido durante una navegación hacia atrás o hacia adelante.
Lo que es realmente prometedor es que el grupo con la bfcache habilitada tuvo un aumento significativo en las vistas de página y los ingresos publicitarios, en especial en dispositivos móviles.
A continuación, se presentan detalles sobre el impacto que observó Yahoo! JAPAN News con su prueba A/B de bfcache. (Puedes encontrar más información en su artículo de caso de éxito).
Cuando las navegaciones hacia atrás y hacia adelante entre páginas se vuelven instantáneas con la bfcache, los usuarios tienden a permanecer más tiempo en las páginas, lo que aumenta las reproducciones de anuncios y los ingresos publicitarios.
bfcache mejora la experiencia del usuario sin inconvenientes en el sitio web
Cuando las páginas se cargan al instante, las navegaciones son más fluidas.
En Yahoo! JAPAN News, uno de los principales recorridos del usuario es el siguiente:
- Ir a la lista de artículos
- Haz clic en un artículo para leerlo
- Volver a la lista de artículos
- Haz clic en otro artículo para leer
Antes de la bfcache, cuando los usuarios terminaban de leer un artículo (paso 2), tenían que esperar a que se volviera a cargar la página de la lista de artículos. Este podría ser un factor de fricción para los usuarios que solo quieren volver a la lista de artículos para elegir otro.
Otra fuente de fricción durante la navegación hacia atrás era la posición de desplazamiento. En la práctica, el navegador intenta restablecer la posición de desplazamiento cuando se produce una navegación hacia atrás. Sin embargo, debido a anuncios agregados de forma dinámica o a otros cambios de diseño, la posición de desplazamiento a menudo se restablece de forma incorrecta, lo que podría hacer que los usuarios pierdan su orientación o incluso abandonen la página. Esto no es un problema cuando la navegación hacia atrás funciona con bfcache: la posición de desplazamiento se restablece de inmediato y correctamente.
Ahora, con la bfcache, la fricción en el recorrido del usuario desapareció: los usuarios pueden volver al instante a la página de la lista de artículos y elegir otro para leer sin tener que esperar a que se cargue la página de la lista de artículos.
Lo mismo sucede cuando los usuarios navegan de un artículo directamente a otro y regresan:
En pocas palabras, los beneficios de usar bfcache para Yahoo! JAPAN News incluye:
- Aumento de las vistas de página: Los usuarios tenían más probabilidades de navegar dentro del sitio web cuando las páginas se almacenaron en caché con bfcache.
- Aumento de los ingresos: Como resultado de un aumento en las vistas de página por sesión, las impresiones de anuncios aumentaron, lo que generó un aumento del 9% en los ingresos en dispositivos móviles en comparación con el grupo de prueba sin bfcache.
Conclusión
En resumen, la bfcache no solo ayuda a que tu sitio web sea instantáneo, sino que también puede reducir los obstáculos en la experiencia general del usuario y aumentar la participación en tu sitio web.
El equipo de Chrome analiza continuamente los bloqueadores de bfcache, en especial las dos razones que se mencionan en este artículo, ya que son razones comunes por las que no se usa bfcache. Es posible que no eviten el uso de la bfcache en el futuro, pero no es necesario esperar hasta ese momento. Para aprovechar la bfcache, observa los bloqueadores de bfcache y evita estos patrones comunes y otros menos comunes.