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

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.

Cómo quitar 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 de tu sitio web. Algunos bloqueadores principales que utiliza Yahoo! Los problemas que enfrentó JAPAN News fueron los siguientes:

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

Para comprobar si hay bloqueadores importantes en tu sitio web, ve a Herramientas para desarrolladores de Chrome > Aplicaciones > Memoria caché atrás/adelante. Como alternativa, puedes usar 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, las páginas con CCNS no se benefician 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
  • 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).

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 bfcache, Yahoo! JAPAN News realizó una prueba A/B durante dos semanas. Publicaron una versión de sus páginas con las correcciones de bfcache en un grupo y una versión con páginas no aptas para bfcache en otro. Probaron las rutas de URL con tráfico significativo para asegurarse de que la prueba lograra resultados significativos. No hubo otras diferencias visuales ni funcionales entre las páginas.

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 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% +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 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.

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 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 quieran 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 de diseño, la posición de desplazamiento se puede restablecer de forma incorrecta. Esto genera confusión en los usuarios o incluso los lleva a abandonar la página.

Este problema se resuelve cuando la navegación hacia atrás se habilita con bfcache: la posición de desplazamiento se restablece de inmediato y de forma correcta.

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 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 es más rápida y la posición de desplazamiento se mantiene con precisión. Sin bfcache, no se garantizan estas mejoras.

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

  • Más vistas de página: Los usuarios tenían más probabilidades de 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 aumento del 9% en los ingresos en dispositivos móviles, en comparación con el grupo de prueba sin bfcache.

Implementa bfcache ahora

En resumen, 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 bfcache, en especial los motivos enumerados, ya que son motivos comunes por los que no se usa bfcache. En el futuro, es posible que estas no impidan el uso de bfcache, pero no es necesario esperar hasta entonces. Para beneficiarte de bfcache, observa tus bloqueadores de bfcache ahora y evita estos patrones comunes (y otros menos comunes).