Cómo este minorista de moda de comercio electrónico correlacionó las Métricas web esenciales y las métricas de rendimiento con las métricas comerciales, observó un aumento en los KPI y creó una "Calculadora de casos de rendimiento de negocios" para impulsar las decisiones sobre productos y una cultura de rendimiento.
En muchas empresas, el rendimiento de la velocidad del sitio web y las Métricas web esenciales siguen siendo, en su mayoría, una responsabilidad de los equipos de ingeniería. La velocidad del sitio puede volverse invisible para otras áreas de la empresa si no se comprende el valor de la experiencia del negocio y del cliente. Esto puede hacer que se pase por alto el rendimiento cuando se toman decisiones clave y se definen las hojas de ruta.
Para mejorar la cultura de rendimiento entre los equipos y generar mejoras significativas en su experiencia web, Farfetch, una empresa minorista de moda de comercio electrónico de lujo, lanzó un proyecto para definir y utilizar métricas de rendimiento verdaderas centradas en el cliente. Su objetivo era correlacionar estas métricas con las métricas comerciales como una forma de esclarecer cómo afecta el rendimiento a los KPI de la empresa.
Sin embargo, sus ambiciones no terminaron allí. En última instancia, el objetivo del proyecto era un cambio cultural a escala: eliminar los silos dentro de la organización e introducir un nuevo lenguaje orientado a los negocios para brindar a todos una forma compartida de hablar sobre lo que antes se consideraba temas técnicos. Farfetch quería que el rendimiento de la velocidad del sitio web fuera una responsabilidad compartida, facilitar la toma de decisiones fundamentada y establecerlo como un pilar principal de lo que crea una buena experiencia en la Web.
Para comenzar, Farfetch se dio cuenta de que un solo departamento no podía lograr esto como antes y reunió un equipo central de expertos de varias áreas de la empresa (ingeniería, infraestructura, arquitectura y producto), que puso en marcha una estrategia paso a paso para renovar la forma en que la empresa consideraba este tema.
Paso 1: Define, mide y supervisa las métricas
En primer lugar, Farfetch necesitaba contar con las herramientas de supervisión adecuadas para comprender el estado actual y las desviaciones en los puntos de contacto y las aplicaciones del recorrido.
Usaron datos de laboratorio y supervisión de usuarios reales (datos de campo) para realizar un seguimiento de las Métricas web esenciales y otras métricas de rendimiento centradas en el usuario para analizar el estado actual del rendimiento de la velocidad. Usaron JavaScript y la biblioteca de web-vitals.js para capturar los datos, lo que permitió al equipo de análisis de productos obtener visibilidad de las métricas de rendimiento junto con las métricas empresariales en la misma sesión y comenzar a examinar cómo una afecta a la otra.
El grupo multidisciplinario se propuso comprender qué métricas eran más importantes para la empresa. Para ello, observaron la ruta del recorrido crítica de los usuarios de Farfetch y trataron de vincular ese recorrido con los marcadores de rendimiento. Además de las métricas web esenciales que describió Google, cada una de las cuales representa una faceta distinta de la experiencia del usuario, también usaron JavaScript personalizado para hacer un seguimiento del tiempo hasta el primer byte (TTFB), el primer procesamiento de imagen con contenido (FCP), el primer procesamiento de imagen y el tiempo de carga (TTI).
Las métricas se recopilan a través de varios métodos de la API de Performance, la API de Long Tasks y los polyfills de Google. Puedes encontrar más detalles en esta entrada de blog de Farfetch Tech de mediados de 2020, de Manuel Garcia, ingeniero principal sénior de la Web.
En cuanto al análisis de datos, Farfetch tiene su propia solución de seguimiento multicanal que usan las aplicaciones frontend, llamada Omnitracking. Hace un seguimiento de los eventos generados por vistas de página, acciones del usuario y acciones del sistema. El modelo de datos de varios seguimientos es la solución de Farfetch para casos de análisis, exploración de datos y generación de informes, que se basa en los eventos que generan los rastreadores. El objetivo del modelo de datos es ayudar y asistir a cualquier persona que necesite comprender lo siguiente:
- Comportamiento de los usuarios
- Experiencia del usuario en las aplicaciones de Farfetch
- Uso de aplicaciones
- Macro y microconversiones
- Análisis de embudos y en múltiples canales
La idea era agregar a esta capa de datos los datos de rendimiento de cada vista de página en farfetch.com, capturados por JavaScript. El uso de este modelo garantiza una coincidencia entre los datos de rendimiento y las principales métricas del embudo de conversión para cada sesión y la base para una exploración analítica sobre el tema.
Por último, Farfetch estableció presupuestos de rendimiento basados en el tiempo para cada métrica en las páginas principales del recorrido y un proceso de administración para manejar las violaciones del presupuesto. También comenzaron a incorporar métricas de rendimiento en las canalizaciones de CI para comprender las desviaciones del presupuesto lo antes posible en el flujo de desarrollo.
Paso 2: Usa el lenguaje empresarial para comunicarte
Ahora que los datos de rendimiento están disponibles en los conjuntos de datos internos de inteligencia empresarial de Farfetch, el equipo de análisis comenzó a explorar modelos y patrones matemáticos en los datos que podrían indicar una correlación entre las métricas de rendimiento y los KPI comerciales (por ejemplo, el porcentaje de conversiones y el porcentaje de visitas a una sola página), lo que permite una nueva visión del impacto financiero de la velocidad del sitio y la UX para la empresa. Esto permitió analizar el rendimiento en un lenguaje común con los responsables de la toma de decisiones empresariales. El análisis incluyó todas las Métricas web esenciales y las demás métricas que Farfetch consideraba valiosas. Reveló estadísticas realmente impactantes.
Teniendo en cuenta que Google recomienda que el Procesamiento de imagen con contenido más grande (LCP) se mantenga por debajo de los 2.5 segundos para proporcionar una experiencia del usuario óptima, Farfetch estudió este umbral en detalle y encontró resultados significativos.
El análisis estadístico de correlaciones de Farfetch mostró que, más allá de ese punto, el porcentaje de conversiones comienza a bajar, así como el porcentaje de salidas aumenta. Esto demuestra que los usuarios realmente empiezan a sentir la desventaja de que la percepción de la carga de la página sea lenta y el porcentaje de conversiones disminuye en promedio de -1.3% con cada 100 ms más de LCP.
Farfetch también verificó una disminución del porcentaje de salidas de -3.1% para cada 0.01 menos en la puntuación de Cambio de diseño acumulado (CLS), lo que reafirmó el impacto de la estabilidad de la página para mantener a los usuarios en el sitio web.
En cuanto a la interactividad y la fluidez de la página, aunque se hace un seguimiento y un análisis continuos del retraso de primera entrada (FID), Farfetch también mide el TTI, lo que demostró ser una métrica con un impacto considerable para el embudo de conversión empresarial de Farfetch.
Para ello, inyectó polyfill de TTI de Google en el sitio web para almacenar esta métrica. Uso de la API de Long Tasks para informar tareas largas (tareas que tardan más de 50 milisegundos en el subproceso principal del navegador)
Luego, el equipo de análisis pudo descubrir que el porcentaje de conversiones aumentó un 2.8% por cada segundo de reducción en TTI, lo que representa un argumento sólido para una mejor eficiencia del código y para eliminar el obstáculo del subproceso principal del navegador.
Al final, este análisis también pudo mostrar que algunas métricas no tuvieron un impacto significativo en los KPI comerciales o que otras serían más relevantes en diferentes etapas del recorrido del usuario. Esto permitió comprender a fondo las oportunidades disponibles en cada punto del embudo de conversión.
Paso 3: Incorpora el cambio cultural
Mostrar las estadísticas anteriores junto con la investigación cualitativa de los usuarios sobre la percepción de los usuarios sobre la velocidad del sitio fue fundamental para establecer la alineación con los objetivos de la empresa, asegurar el reconocimiento a nivel ejecutivo y la aceptación para la toma de decisiones basada en el rendimiento en las hojas de ruta de los productos. Ahora fue posible demostrar cuánto valor valía el rendimiento para Farfetch.
Para agilizar el proceso de priorización, Farfetch creó una herramienta de autoservicio llamada Calculadora de casos empresariales de velocidad del sitio, inspirada en la Calculadora de impacto de la velocidad de Google. Permite que cualquier gerente de producto cree un caso empresarial a partir de las mejoras en el rendimiento calculando el impacto comercial sobre la marcha. Con un modelo de datos que utiliza la correlación entre el porcentaje de conversiones y las métricas de la experiencia del usuario, es flexible para adaptarse a diferentes alcances de productos, dispositivos y puntos de contacto del recorrido del usuario.
Mientras tanto, un conjunto de paneles analíticos de autoservicio creó visibilidad en toda la empresa de los indicadores de rendimiento en tiempo real y su impacto en el negocio. El rendimiento ahora se está integrando por completo en el desarrollo de productos, y los equipos de productos disfrutan de un acceso fácil a las métricas, herramientas de auditoría y supervisión del presupuesto de rendimiento. Además, gracias a la integración de capas de datos, las métricas de rendimiento también están disponibles en las herramientas de pruebas A/B de Farfetch, lo que les brinda a los administradores de productos otro importante vector de estadísticas.
En los últimos meses, el equipo central también está encaminado para establecer esta cultura no solo en los equipos de desarrollo de frontend, sino también dentro del dominio de la plataforma, utilizando metodologías similares para supervisar y demostrar el impacto de los principales microservicios y transacciones.
Hubo una serie de presentaciones centradas en Farfetch sobre este tema, pero también menciones externas. Por ejemplo, una mención en una charla de Google I/O de 2021 sobre el impacto comercial de las Métricas web esenciales. Esto también contribuyó a dar relevancia continua al tema y solidificó la estrategia del equipo en torno a la cultura.
Paso 4: Mejora las métricas
Al final, todo este trabajo debía contribuir a que Farfetch mejorara objetivamente sus métricas de velocidad del sitio web y garantizara que sus equipos siguieran las mejores prácticas de su clase y buscaran oportunidades de mejora.
Una de las principales oportunidades detectadas en 2021 fue la necesidad de mejorar el LCP en los dos tipos de páginas principales de Farfetch: páginas de productos y páginas de fichas de productos.
Los equipos abordaron cómo cargaban el contenido principal de esas páginas. Con un caso de negocio que mostró el impacto de perseguir esta oportunidad, pudieron hacer lo siguiente:
- Adapta el componente de carga de imágenes del producto de una solución basada en JavaScript a una implementación nativa.
- Define la prioridad de las imágenes y divídelas en elementos críticos y no críticos.
- Carga las imágenes importantes antes de tiempo, con la fuente ya intercalada en el código HTML y usando
<link rel="preload">para que se descarguen lo antes posible. - Usa el atributo
<img loading="lazy">para imágenes no críticas, con un polyfill que utiliza Intersection Observer en navegadores no compatibles, como Safari.
Con esto, pudieron cambiar de lugar y demostrar a través de pruebas A/B de la hipótesis y el impacto empresarial. Por ejemplo, en las páginas de productos, esta iniciativa redujo más de 600 ms, y la prueba A/B mostró un aumento en el porcentaje de conversiones del 1% al 5% con el nivel de confianza definido de la empresa.
A continuación, se presentan las mejoras que el equipo pudo realizar en términos del porcentaje de vistas de página que se consideran "buenas", "necesitan mejorar" y "deficientes", según la definición de Google de la puntuación LCP.
Los beneficios de un sitio más rápido y mejores prácticas de trabajo
Crear una cultura en torno al rendimiento y a las herramientas como la calculadora de casos de negocio permitió que todos empezaran a hablar un lenguaje en común que pueden entender los gerentes de producto, las partes interesadas y los ingenieros por igual. Esto precipitó los debates continuos sobre cómo priorizar nuevas iniciativas y mejoras del rendimiento.
"Queríamos romper el ciclo del rendimiento siendo una preocupación solo de tecnología, algo que solo el equipo de ingeniería tiene que tratar y solucionar", explica Rui Santos, gerente sénior de Productos sénior de Canales web de Farfetch. "Conectar las métricas de rendimiento con las métricas comerciales fue muy eficaz para transmitir el mensaje de forma muy rápida. El negocio motiva a la empresa, y conectar su éxito con las métricas de velocidad motivó a un conjunto más amplio de partes interesadas a comprender y abordar las decisiones de compensación".
En el segmento del comercio electrónico de lujo, si tu sitio es rápido o lento, puede determinar la forma en que los consumidores ven tu marca y la calidad de tu servicio en general. Para los usuarios, la calidad equivale al lujo, y esto se aplica a todos los aspectos de su experiencia, incluido el rendimiento de su sitio web. Ahora que la velocidad del sitio tiene un efecto comprobado en el porcentaje de conversiones, el rendimiento ahora ocupa una posición segura en la planificación a futuro en Farfetch.