La memoria caché atrás/adelante ayudó a Yahoo! JAPAN News aumenta sus ingresos en un 9% en dispositivos móviles

Yuriko Hirota
Yuriko Hirota
X LinkedIn

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 en los sitios web que implican muchas navegaciones de ida y vuelta.

Artículo de web.dev sobre la bfcache

Yahoo! JAPAN News, una de las plataformas de noticias más populares de Japón, realizó un esfuerzo coordinado para mejorar su tasa de aciertos de la caché de páginas secundarias y, como resultado, observó mejoras significativas en la experiencia del usuario y en el negocio. Específicamente, los resultados de la prueba A/B que realizaron mostraron 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 la bfcache y cómo esta mejoró drásticamente la experiencia del usuario.

Cómo quitar los bloqueadores de bfcache

La 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 bloqueadores que Yahoo! Los desafíos que enfrentó JAPAN News fueron los siguientes:

  1. Uso de controladores unload
  2. Uso de la directiva no-store en los encabezados Cache-control

Para ver si hay bloqueadores importantes en tu sitio web, ve a Herramientas para desarrolladores de Chrome > Aplicaciones > Caché atrás-adelante. Como alternativa, puedes usar la API de notRestoredReasons para obtener una vista más integral de los bloqueadores según el uso real en el campo.

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

CCNS está diseñado para páginas que nunca deben almacenarse en caché, bajo ninguna circunstancia. Esto implica que las páginas con CCNS no se benefician 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 excelente 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
  • 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.
  • Se permite que la respuesta se almacene en cachés, siempre y cuando se vuelva a validar con el servidor antes de cada uso.
  • Deben ser respuestas públicas que quieras revalidar 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).

Para obtener más información sobre las opciones de cache-control, consulta el diagrama de flujo de cache-control.

Pruebas A/B para demostrar el impacto

Para medir el impacto de la bfcache, Yahoo! JAPAN News realizó una prueba A/B durante dos semanas. En un grupo, publicaron una versión de sus páginas con las correcciones de la bfcache y, en otro, una versión con páginas no aptas para la bfcache. Probaron rutas de URL con tráfico significativo para garantizar que la prueba obtuviera resultados significativos. No había ninguna otra diferencia visual o funcional entre las páginas.

Este es un video en el que se compara el sitio web con bfcache y sin bfcache. Puedes ver que el sitio web con la bfcache habilitada 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 por publicidad, especialmente en dispositivos móviles.

A continuación, se incluyen detalles sobre el impacto que observó Yahoo! JAPÓN News con su prueba A/B de bfcache. Puedes encontrar más información en su caso de éxito.

Métricas Porcentaje de aumento (dispositivos móviles) Porcentaje 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 la navegación hacia atrás o hacia adelante entre páginas se vuelve instantánea con la bfcache, los usuarios tienden a permanecer más tiempo en las páginas, lo que aumenta las vistas de anuncios y, por lo tanto, los ingresos publicitarios.

Experiencia del usuario fluida

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 leer varios artículos:

  1. Visita la lista de artículos.
  2. Haz clic en un artículo para leerlo.
  3. Cuando termines, regresa a la lista de artículos.
  4. Haz clic en otro artículo para leerlo.

Antes de la bfcache, cuando los usuarios terminaban de leer un artículo, 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 desean volver rápidamente a la lista 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 en el diseño, la posición de desplazamiento se puede restablecer de forma incorrecta. Esto genera confusión en los usuarios o incluso hace que abandonen la página.

Este problema se resuelve cuando la navegación hacia atrás se basa en bfcache: la posición de desplazamiento se restablece de inmediato y correctamente.

Dos tiras de película de una navegación hacia atrás. La parte superior es una tira de película que se controla con la bfcache, lo que lleva 0.3 segundos, mientras que la parte inferior muestra el mismo proceso controlado sin la bfcache, lo que lleva 3.3 segundos.

Ahora, con la 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 artículo 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 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 la bfcache, la navegación hacia atrás es más rápida y la posición de desplazamiento se mantiene con precisión. Sin la bfcache, estas mejoras no están garantizadas.

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

  • Aumento de las páginas vistas: Los usuarios eran más propensos a navegar por el 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, aumentaron las impresiones de anuncios, lo que generó un incremento del 9% en los ingresos en dispositivos móviles, en comparación con el grupo de prueba sin bfcache.

Implementa bfcache ahora

En resumen, la bfcache no solo hace que tu sitio web sea instantáneo, sino que también puede reducir la fricción en la experiencia general del usuario y aumentar la participación en tu sitio web.

El equipo de Chrome analiza continuamente los bloqueadores de la bfcache, en especial los motivos que se indican, ya que son razones comunes por las que no se usa la bfcache. En el futuro, es posible que no impidan el uso de bfcache, pero no es necesario esperar hasta entonces. Puedes aprovechar los beneficios de la bfcache si analizas los bloqueadores de la bfcache ahora y evitas estos patrones comunes (y otros menos comunes).