Relación entre la velocidad del sitio y las métricas empresariales

Aprovecha las pruebas A/B para evaluar el impacto de la velocidad del sitio en las métricas de tu empresa.

Bart Jarochowski

Martin Schierle

Dikla Cohen

En los últimos años, está bien establecido que el rendimiento de la velocidad del sitio es una parte significativa de la experiencia del usuario y que mejorarlo beneficia diferentes métricas empresariales, como los porcentajes de conversiones y los porcentajes de rebote. Se publicaron varios artículos y casos de éxito para respaldar esto, como How Website Performance Affects Conversion Rates de Cloudflare, Milliseconds Make Millions de Deloitte y Shopping for Speed on eBay.com, por nombrar algunas.

Aunque la cuestión de la velocidad es clara, muchas empresas aún tienen dificultades para priorizar el trabajo que mejorará la velocidad de su sitio, ya que no saben exactamente cómo afecta a sus usuarios y, como resultado, su negocio.

Si no hay datos, es fácil retrasar el trabajo de velocidad del sitio y enfocarse en otras tareas. Una situación común es que algunas personas de la empresa reconozcan la importancia de la velocidad del sitio y, sin embargo, no puedan crear un caso a favor y convencer a varias partes interesadas de invertir en consecuencia.

En este artículo, se proporciona orientación de alto nivel sobre cómo aprovechar las pruebas A/B para evaluar el impacto de la velocidad del sitio en las métricas empresariales y, de este modo, permitir una toma de decisiones más eficaz sobre el asunto.

Paso 1: Elige una página para realizar la prueba A/B

Tu objetivo es probar la hipótesis de que la velocidad de la página se relaciona con las métricas de tu empresa. Para simplificar, al principio, puedes limitarte a identificar una sola página para el análisis. El trabajo futuro puede expandirse a varias páginas del mismo tipo para verificar los resultados y, luego, a otras áreas del sitio. Al final de este paso, se incluyen algunas sugerencias sobre por dónde comenzar. El proceso de selección de páginas impulsa varios requisitos:

• La prueba A/B solo debe ejecutarse en dispositivos de usuarios de dispositivos móviles. A nivel global, los sitios de socios a los que brindamos asistencia observan un promedio de más del 50% (y un crecimiento) de su tráfico proveniente de dispositivos móviles, pero esto puede aumentar considerablemente según la región y la vertical. Los dispositivos móviles son más sensibles a los sitios web más lentos debido a las limitaciones de procesamiento y memoria, y a redes menos estables. Además, los patrones de uso sobre la marcha implican que las expectativas de velocidad son mayores.

• La página que elijas para las pruebas debe ser una parte importante de tu embudo de conversión. Cada sitio tiene un propósito diferente, por lo que cada sitio hace un seguimiento de distintas métricas de éxito. Por lo general, estas métricas están relacionadas con el recorrido del usuario que se analiza mediante un embudo. Por ejemplo, los usuarios de un sitio web de comercio electrónico tendrán que navegar por una página principal, las páginas de categorías, las páginas de productos y una página de confirmación de compras para completar una compra. Si realizas optimizaciones para obtener conversiones, una de esas páginas sería una buena opción.

• La página debe tener un propósito único. A menos que tu sitio tenga una misión muy específica, lo mejor es evitar el uso de la página principal para la prueba. Las páginas principales de muchos sitios comerciales son portales a una amplia variedad de funcionalidades que harán que tu análisis sea ruidoso. Por ejemplo, si optimizas para obtener vistas de página por sesión en un sitio de noticias, podría ser mejor excluir las partes no comerciales del sitio y enfocarte en las secciones y los artículos monetizados.

• La página elegida debería recibir suficiente tráfico para que no debas esperar mucho antes de obtener un resultado de importancia estadística.

• La página seleccionada debe ser relativamente lenta. De hecho, cuanto más lento, mejor. Esto no solo significa que es probable que te resulte más fácil mejorar la página, sino que los datos deben ser mucho más claros. Puedes analizar rápidamente el Informe de velocidad de Google Analytics o el Informe de Métricas web esenciales de Search Console para ver cuáles de tus páginas son más lentas.

• La página debe ser relativamente estable. No actualices las páginas (todo lo que pueda afectar las métricas empresariales) hasta que se complete la prueba. Cuantos menos factores externos haya que considerar, más limpio será el análisis.

Si usas lo anterior como guía, debería ser un poco más claro qué páginas son buenas candidatas para tu prueba. Las páginas de destino de los anuncios también son una buena opción, ya que es probable que tengas métricas comerciales, pruebas A/B y análisis integrados a tu disposición. Si aún tienes dudas, estas son algunas ideas por vertical:

• Sitios web de contenido: secciones y artículos
• Vidrieras: páginas de categorías, páginas de productos
• Reproductores multimedia: páginas de búsqueda o descubrimiento de videos, página de reproducción de video
• Servicios y descubrimiento (viajes, alquiler de automóviles, registro de servicios, etc.): página inicial de entrada del formulario.

Paso 2: Mide el rendimiento

Existen dos formas generales de medir las métricas: en el lab y en el campo. Personalmente, descubrimos que las métricas de medición en el campo (también conocidas como supervisión de usuarios reales [RUM]) son más útiles porque reflejan la experiencia de los usuarios reales. Algunos ejemplos de bibliotecas y servicios que pueden ayudarte a informar datos de RUM incluyen Perfume, Firebase Performance Monitoring y los eventos de Google Analytics.

Hay muchas métricas para elegir porque su objetivo es capturar diferentes aspectos de la experiencia del usuario. Recuerda que tu objetivo es, en algún momento, determinar si existe una correlación directa entre la velocidad y las métricas empresariales, por lo que podría ser útil realizar un seguimiento de algunas métricas de velocidad para determinar cuál tiene la correlación más fuerte con tu éxito empresarial. En general, recomendamos comenzar con las Métricas web esenciales. La biblioteca web-vitals.js puede ayudarte a medir algunas de las Métricas web esenciales en el campo, aunque ten en cuenta que la compatibilidad con navegadores no es completa. Más allá de las Métricas web esenciales, también vale la pena echar un vistazo a las Otras métricas web. También puedes definir métricas personalizadas, como "Tiempo hasta el primer clic en el anuncio".

Paso 3: Crea variantes de rendimiento de velocidad

En esta etapa, implementarás cambios para crear una versión más rápida de la página que se probará con la versión actual.

Debes tener en cuenta lo siguiente:

1. Evita hacer cambios en la IU o la UX. Aparte de que una página es más rápida que la otra, los cambios deben ser invisibles para los usuarios.
2. La medición también es un aspecto clave de esta etapa. Durante el desarrollo, se deben usar herramientas de prueba del lab, como Lighthouse, para indicar el efecto que tienen los cambios en el rendimiento. Ten en cuenta que los cambios en una métrica a menudo pueden influir en otra. Una vez que las páginas estén publicadas, usa RUM para realizar una evaluación más precisa.

Crear variantes de rendimiento se puede hacer de diferentes maneras. Para esta prueba, debes hacerlo de la forma más sencilla posible. A continuación, hay algunas opciones.

Crea una página más rápida

• Usa una herramienta como Squoosh para optimizar manualmente las imágenes de tu página de prueba.
• Usa la cobertura de código de las Herramientas para desarrolladores para eliminar de forma manual el código JavaScript o CSS que no se usa solo para esa página.
• Carga de manera eficiente secuencias de comandos de terceros
• Usa una herramienta como Critical para desglosar e intercalar código crítico de CSS.
• Quita el código JavaScript que no sea crítico que no afecte la experiencia del usuario y que no puedas prescindir para los fines de la prueba (por ejemplo, ciertas bibliotecas de terceros).
• Implementa la carga diferida en el nivel del navegador, que no es compatible con todos los navegadores, pero que aun así puede mejorar significativamente el rendimiento cuando lo admitan
• Quita las etiquetas de Analytics que no sean críticas o cárgalas de forma asíncrona.

Puedes encontrar optimizaciones adicionales que se deben considerar en Tiempos de carga rápidos y Lista de tareas de rendimiento de frontend. También puedes usar PageSpeed Insights a fin de ejecutar Lighthouse, que identifica oportunidades para mejorar el rendimiento.

Cómo ralentizar la página

Esta puede ser la forma más fácil de crear variantes, y se puede lograr agregando una secuencia de comandos simple, ralentizando los tiempos de respuesta del servidor, cargando imágenes más grandes, etc. The Financial Times eligió esta opción cuando probó el impacto del rendimiento en las métricas de su empresa: consulta FT.com más rápido.

Cómo acelerar la carga de la página

Cuando la página de prueba (por ejemplo, una página de detalles del producto) está vinculada en su mayoría desde una página diferente (como la página principal), la carga previa o renderización previa de la página del producto directamente desde la página principal del grupo de prueba acelerará la carga posterior de la página. Ten en cuenta que, en este caso, la división de la prueba A/B (paso 4) se realiza en la página principal. Además, todo esto puede ralentizar la primera página, por lo que debes asegurarte de medirlo y tenerlo en cuenta cuando analices los resultados de la prueba (paso 5).

Paso 4: Crea una prueba A/B

Una vez que tengas dos versiones de la misma página en las que una es más rápida que la otra, el siguiente paso es dividir el tráfico para medir el impacto. En general, existen muchas técnicas y herramientas para realizar pruebas A/B, pero ten en cuenta que no todos los métodos son adecuados para medir el impacto en el rendimiento de la velocidad.

Si usas una herramienta de prueba A/B como Optimize o Optimize, te recomendamos configurar una prueba del servidor en lugar de una prueba del cliente, ya que las pruebas A/B del cliente suelen ocultar el contenido de la página hasta que se carga el experimento, lo que significaría que las pruebas A/B en sí realizarían el sesgo. Si solo puedes realizar pruebas del cliente, considera configurar el experimento en una página diferente y cambiar los vínculos a tu página de prueba para dividir el tráfico. De esta manera, la prueba del cliente no arrastra la página de prueba hacia abajo.

Ejemplo

Ejemplo de cambios de rendimiento de las pruebas A/B en una página de detalles del producto (PDP) determinada a través de pruebas del servidor:

La solicitud va al backend, que distribuye a los usuarios a las dos versiones diferentes de la página. Si bien esta es una buena configuración en general, a menudo se necesitan recursos de TI para configurar la división del servidor.

A continuación, se muestra un ejemplo de una configuración de prueba del cliente, que usa la página anterior (la página principal en el diagrama a continuación) para ejecutar el JavaScript de prueba:

El JavaScript de prueba manipula el vínculo saliente para proporcionar vínculos de los dos grupos de prueba de usuarios a las dos versiones de la PDP en cuestión. Esto es fácil de configurar y mantener con herramientas de prueba A/B comunes, como Optimize o Optimize, y no influye en la prueba de rendimiento porque el JavaScript de prueba se ejecuta en una página diferente.

También puedes elegir dos páginas que se comporten y tengan un rendimiento muy similar (por ejemplo, para dos productos muy similares). Aplica tus cambios a uno de ellos y, luego, compara la diferencia en las métricas a lo largo del tiempo. Esto significa que no estás realizando una prueba A/B adecuada, pero aun así puede ser bastante valiosa.

Si tu página de prueba se usa como página de destino para campañas publicitarias, puedes utilizar las herramientas de prueba A/B integradas de tu red de publicidad, como la prueba dividida de los anuncios de Facebook o los experimentos y borradores de Google Ads. Si no puedes hacerlo, puedes utilizar dos campañas con la misma configuración y establecer páginas de destino diferentes como objetivos.

Paso 5: Analiza la prueba A/B

Una vez que hayas ejecutado la prueba durante el tiempo suficiente y tengas datos suficientes para saber con seguridad los resultados, es hora de reunir todo y ejecutar un análisis. La forma de hacerlo depende en realidad de cómo se ejecutó la prueba, así que repasemos las opciones.

Si tu prueba se ejecutó en páginas de destino de anuncios con las herramientas antes mencionadas, el análisis debe ser tan sencillo como leer un resultado. Si usas Borradores y experimentos de Google, observa la comparación con la ScoreCard.

Las plataformas como Optimize o Optimize también ofrecen formas sencillas de interpretar los resultados y determinar cuánto impacto tiene la velocidad en tus páginas.

Si usas Google Analytics o una herramienta similar, tendrás que generar el informe por tu cuenta. Afortunadamente, Google Analytics facilita la creación de informes personalizados, por lo que debes comenzar a usarla. Si enviaste datos de velocidad a Google Analytics con una dimensión personalizada, consulta la guía de informes para obtener información sobre cómo configurarlos e incluirlos en tus informes personalizados. Asegúrate de que el informe abarque la fecha del experimento y esté configurado para mostrar ambas variantes. ¿Qué se debe incluir en este informe?

• Principalmente, debes incluir las métricas comerciales que más te interesan: conversiones, páginas vistas, anuncios vistos, porcentaje de conversiones, métricas de comercio electrónico, tasa de clics, etcétera.
• Además, otras métricas estándar de la página que también sirven para mejorar la velocidad del sitio son el porcentaje de rebote, la duración promedio de la sesión y el porcentaje de salida.

Es posible que también debas filtrar los datos para dispositivos móviles y asegurarte de excluir los bots y otro tráfico que no sea de usuarios. Un análisis más avanzado también filtraría por región, redes, dispositivos, fuente de tráfico, y perfiles y tipos de usuarios, como usuarios nuevos en comparación con visitantes recurrentes. Cada grupo de usuarios puede ser más o menos sensible a las velocidades más lentas, por lo que identificarlas también es muy útil.

Looker Studio (anteriormente Data Studio) y otras herramientas de visualización de datos facilitan la integración de varias fuentes de datos, incluido Google Analytics. Esto facilita la realización del análisis y la creación de paneles que se pueden compartir con las muchas partes interesadas involucradas en la administración de un sitio web moderno para una mayor aceptación. Por ejemplo, The Guardian creó un sistema de alertas automatizado que advertía al equipo editorial cuando el contenido publicado recientemente excedía el tamaño de la página o los umbrales de velocidad y era probable que generara usuarios insatisfechos.

Paso 6: Sacar conclusiones y decidir los próximos pasos

Una vez que tengas datos que conecten el rendimiento con las métricas empresariales, puedes examinar los resultados y comenzar a sacar conclusiones.

Si puedes ver con claridad una correlación entre mejorar el rendimiento y mejorar las métricas empresariales, resume los resultados y, luego, infórmalos en toda la empresa. Ahora que puedes hablar sobre el rendimiento de la velocidad en un "lenguaje empresarial", es más probable que captes la atención de diferentes partes interesadas y que el rendimiento de la velocidad del sitio sea visible para todos. El siguiente paso es establecer los presupuestos de rendimiento basados en los resultados y planificar el trabajo para cumplir con esos presupuestos. Dado que conoces el valor que proporcionará ese trabajo, podrás priorizar en consecuencia.

Si no puedes identificar una correlación, consulta las siguientes advertencias y evalúa si se deben ejecutar pruebas similares en otro lugar del sitio (por ejemplo, en todo el embudo de compra o en un tipo de página diferente).

Advertencias

Puede haber varios motivos para no encontrar una correlación significativa entre las métricas de velocidad del sitio y las métricas empresariales:

• La página elegida no tiene suficiente influencia en las métricas empresariales que estás examinando. Por ejemplo, es posible que una página de producto más rápida no tenga un gran efecto en los porcentajes de conversiones si la página de confirmación de compras es muy lenta o poco agradable. Considera la posibilidad de consultar métricas más relevantes, como los porcentajes de rebote, los porcentajes de elementos agregados al carrito o cualquier otra métrica que esté conectada de manera más directa con la página que estás probando.
• La diferencia de velocidad no es lo suficientemente significativa entre las dos versiones. Esto debe evaluarse de acuerdo con las métricas de RUM que estás midiendo.
• Hay una falla en el mecanismo de prueba A/B. Es posible que el tráfico no se distribuya de forma adecuada o que las estadísticas no se informen correctamente. Para descartarlo, considera ejecutar una prueba A/A en la que pruebes la misma versión de una página con el mismo mecanismo de prueba y te asegures de que no haya diferencias en los resultados al hacerlo.
• La velocidad del sitio realmente no influye en las métricas de tu empresa. Esto es poco común, pero puede ocurrir en casos en los que tu mercado objetivo es menos sensible a la velocidad (p.ej., se accede al sitio principalmente desde dispositivos potentes en una red sólida) o la demanda de los usuarios es muy alta y las opciones son limitadas (p.ej., un servicio de venta de entradas que vende entradas exclusivamente para espectáculos de alta demanda). Ten en cuenta que esto no significa que un sitio más rápido no mejorará la experiencia del usuario y, como resultado, afectará la reputación de la marca.

Conclusión

Si bien es tentador lanzar optimizaciones de velocidad en todo el sitio, suele ser más beneficioso a largo plazo comprender primero lo que significa para los usuarios y la empresa tener un sitio web más rápido. Es la diferencia entre decir “mejoramos el FCP en 1.5 segundos” y “mejoramos el FCP en 1.5 segundos y eso mejora nuestros porcentajes de conversiones en un 5%”. Esto te permitirá priorizar el trabajo adicional, obtener la aceptación de las diferentes partes interesadas y hacer que el rendimiento de la velocidad del sitio sea una iniciativa de toda la empresa.