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
Yuriko Hirota

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 de Japón, realizó un esfuerzo concertado 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 de la prueba A/B que realizaron demostraron que las páginas que usan la 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 de los principales obstáculos que Yahoo! JAPAN News a las que se enfrentaron las siguientes personas:

  1. Uso de controladores unload
  2. 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:

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
  • La respuesta no se puede almacenar 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 publicaron una versión de sus páginas con sus correcciones de bfcache en un grupo y una versión con páginas no aptas para la bfcache. 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 la bfcache habilitada se carga mucho más rápido durante la 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 % 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% Más del 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.

La bfcache mejora una experiencia del usuario fluida en el sitio web.

Cuando las páginas se cargan al instante, las navegaciones son más fluidas.

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

  1. Ir a la lista de artículos
  2. Haz clic en un artículo para leerlo
  3. Volver a la lista de artículos
  4. 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 no es un problema cuando la navegación hacia atrás funciona con bfcache: la posición de desplazamiento se restablece de forma inmediata y 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, la fricción en el recorrido del usuario desapareció: los usuarios pueden volver instantáneamente 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 viceversa:

Una imagen animada que muestra el flujo de navegación hacia atrás desde un artículo hasta la página de la lista de artículos 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 correctamente. Sin bfcache, no se pueden hacer estas garantías.

En pocas palabras, 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 examina continuamente los bloqueadores de bfcache, especialmente las dos razones que se mencionan en este artículo, ya que son motivos comunes por los que no se usa la bfcache. En el futuro, es posible que no eviten el uso de bfcache, pero no será necesario esperar hasta entonces. Para aprovechar bfcache, observa tus bloqueadores de bfcache y evita estos patrones comunes y otros menos comunes.