Cómo la memoria caché atrás/adelante ayudó a Yahoo! Las noticias de Japón aumentaron un 9% los ingresos provenientes de dispositivos móviles

Yuriko Hirota

La memoria caché atrás/adelante (o bfcache) es una optimización del navegador que permite la navegación instantánea hacia adelante y hacia atrás. 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 de Japón, realizó un esfuerzo conjunto para mejorar su tasa de hits de bfcache y, como resultado, obtuvo mejoras significativas en la experiencia del usuario y en la empresa. Específicamente, los resultados del experimento A/B que realizaron mostraron que las páginas que usan bfcache tuvieron un aumento del 9% en los ingresos publicitarios.

En este caso de éxito, se explicará cómo Yahoo! JAPAN News quitó los bloqueadores de bfcache y cómo bfcache mejoró drásticamente la experiencia del usuario.

Quita los bloqueadores de bfcache

bfcache está disponible desde Chrome 86 y también en todos los navegadores modernos. Sin embargo, para aprovechar al máximo bfcache, se deben quitar los posibles bloqueadores del sitio web. Algunos bloqueadores principales que utiliza Yahoo! Los problemas que enfrentó JAPAN News fueron los siguientes:

Uso de controladores unload
Uso de la directiva no-store en encabezados Cache-control

Para verificar los bloqueadores principales de tu sitio web, ve a Herramientas para desarrolladores de Chrome > Aplicaciones > Caché de Atrás/Adelante (más detalles) o usa la API de notRestoredReasons para obtener una vista más completa de los bloqueadores en función del uso real en el campo.

A continuación, te indicamos cómo Yahoo! JAPAN News quitó sus bloqueadores:

Controladores de descarga: Usa el evento pagehide en lugar del evento unload, ya que este último es muy poco confiable.unload Además, Permissions-Policy: unload=() se lanzó en Chrome 115 para que los sitios web puedan quitar de forma confiable los controladores unload de orígenes específicos. Chrome también planea dar de baja gradualmente los controladores unload.
Cache-control: no-store (o CCNS, en resumen): Si cambias el encabezado Cache-control de no-store a no-cache, puedes habilitar bfcache. Chrome también planea comenzar a almacenar en caché bfcache incluso con un encabezado no-store en ciertas circunstancias.

El CCNS está diseñado para páginas que nunca deben almacenarse en caché bajo ninguna circunstancia. Sin embargo, ten en cuenta que ninguna página con CCNS podrá beneficiarse de ninguna tecnología de almacenamiento en caché, incluidos los servidores perimetrales de CDN y las cachés 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.

Cache-control: no-store Cache-control: no-cache

`Cache-control: no-store`	`Cache-control: no-cache`
No se permite almacenar la respuesta en cachés. Por lo tanto, la respuesta se recupera por completo en cada solicitud. Se debe usar para respuestas privadas.	La respuesta se puede almacenar en cachés, siempre y cuando se vuelva a validar con el servidor antes de cada uso. Estas deben ser respuestas públicas que quieras volver a validar cada vez (por ejemplo, la página principal de un sitio web de noticias; aunque, incluso en ese caso, un tiempo de almacenamiento en caché muy corto puede mejorar el rendimiento y descargar trabajo de los servidores principales).

No se permite almacenar la respuesta en cachés.
Por lo tanto, la respuesta se recupera por completo en cada solicitud.
Se debe usar para respuestas privadas.

La respuesta se puede almacenar en cachés, siempre y cuando se vuelva a validar con el servidor antes de cada uso.
Estas deben ser respuestas públicas que quieras volver a validar cada vez (por ejemplo, la página principal de un sitio web de noticias; aunque, incluso en ese caso, un tiempo de almacenamiento en caché muy corto puede mejorar el rendimiento y descargar trabajo de los servidores principales).

Si te interesa obtener más información sobre las opciones de Cache-control, este diagrama de flujo es de gran ayuda.

Impacto de bfcache en cifras

Para medir el impacto de bfcache, Yahoo! JAPAN News realizó una prueba A/B durante 2 semanas, en la que publicó una versión de sus páginas con las correcciones de bfcache para un grupo y una versión con páginas no aptas para bfcache para otro. Eligieron las rutas de URL con una cantidad significativa de tráfico para que la prueba pudiera obtener resultados significativos. No hubo otras diferencias visuales ni funcionales entre las 2 versiones.

Este es un video en el que se compara el sitio web con y sin bfcache. Puedes ver que el sitio web con bfcache habilitado se carga mucho más rápido durante una navegación hacia atrás o hacia adelante.

Lo que es realmente prometedor es que el grupo con bfcache habilitado tuvo un aumento significativo en las vistas de página y los ingresos publicitarios, en especial en dispositivos móviles.

Aquí encontrarás 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).

Métricas	Porcentaje de aumento (dispositivos móviles)	% de aumento (computadoras)
Tasa de aciertos de bfcache	+54.03 puntos (0.04% → 54.07%)	+47.28 puntos (0.02% → 47.30%)
Vistas de páginas	+2.26%	+0.65%
Ingresos publicitarios	+9.0%	+0.6%

Cuando los movimientos hacia atrás y hacia adelante entre páginas se vuelven instantáneos con bfcache, los usuarios tienden a permanecer en las páginas más tiempo, lo que aumenta las vistas de anuncios y, en consecuencia, los ingresos publicitarios.

bfcache mejora la experiencia del usuario en el sitio web

Cuando las páginas se cargan al instante, la navegación se siente más fluida.

En Yahoo! En JAPAN News, uno de los principales recorridos del usuario es el siguiente:

Ve 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 leerlo

Antes de bfcache, cuando los usuarios terminaban de leer un artículo (paso 2), debían esperar a que se volviera a cargar la página de la lista de artículos. Esto podría ser un factor de fricción para los usuarios que solo quieren volver a la lista de artículos para elegir otro artículo para leer.

Otra fuente de fricción durante la navegación hacia atrás fue 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 los 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 el rumbo o incluso salgan de la página. Esto nunca es un problema cuando una navegación hacia atrás está potenciada por bfcache: la posición de desplazamiento se restablece de inmediato y de forma correcta.

Dos fotogramas de una navegación hacia atrás desde un artículo a la página de la ficha del artículo. La parte superior es una tira de película del proceso que se controla con bfcache, que tarda 0.3 segundos, mientras que la parte inferior es del mismo proceso que se controla sin bfcache, que tarda 3.3 segundos.

Ahora, con bfcache, se eliminó la fricción en el recorrido del usuario: los usuarios pueden volver a la página de la lista de artículos de inmediato y elegir otro artículo para leer sin tener que esperar a que se cargue la página.

Lo mismo sucede cuando los usuarios navegan de un artículo directamente a otro y viceversa:

Una imagen animada que muestra el flujo de navegación hacia atrás de un artículo a la página de la ficha del artículo con y sin bfcache. Con bfcache, la navegación hacia atrás no solo es más rápida, sino que la posición de desplazamiento se mantiene con precisión. Sin bfcache, no se pueden realizar estas garantías.

En resumen, los beneficios de usar bfcache para Yahoo! JAPAN News incluye lo siguiente:

Mayor cantidad de vistas de página: Los usuarios tenían más probabilidades de navegar dentro del sitio web cuando las páginas se almacenaban en caché con bfcache.
Aumento de los ingresos: Como resultado del aumento de las vistas de página por sesión, aumentó la impresión de anuncios, 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, bfcache no solo hace que tu sitio web sea instantáneo, sino que también puede reducir las fricciones 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 los dos motivos que se mencionan en este artículo, ya que son razones comunes por las que no se usa bfcache. En el futuro, es posible que no impidan el uso de bfcache, pero no es necesario esperar hasta entonces. Para aprovechar bfcache, observa tus bloqueadores de bfcache y evita estos patrones comunes y otros menos comunes.