Al medir las Métricas web de usuarios reales, Rakuten 24 también descubrió que un buen Largest Contentful Paint (LCP) puede generar un aumento en el porcentaje de conversiones del 61.13%.
Rakuten 24 es una tienda en línea que colabora con los principales fabricantes de bienes de consumo nacionales y multinacionales para ofrecer una gran variedad de necesidades diarias, como cuidado de la salud, bebidas, suministros para mascotas, productos para bebés y mucho más. Rakuten Group, Inc., una tienda líder mundial en servicios de Internet, proporciona esta tienda, una de las empresas con mejor rendimiento en su plataforma de mercado digital en Japón.
Al comprender el impacto del rendimiento web en la experiencia del usuario, el equipo de Rakuten 24 ha estado midiendo, optimizando y supervisando continuamente las Métricas web esenciales y otras métricas.
Como resultado, más del 75% de sus usuarios experimentan los componentes Largest Contentful Paint (LCP), First Input Delay (FID) y First Contentful Paint (FCP). Sin embargo, siguen trabajando para mejorar el Cambio de diseño acumulado (CLS).
Después de analizar los datos de la página principal, Rakuten 24 descubrió que una buena puntuación de LCP puede generar lo siguiente:
- Un aumento de hasta un 61.13% en el porcentaje de conversiones
- 26.09% en ingresos por visitante.
- 11.26% en el valor promedio del pedido.
- Una buena puntuación FID puede generar un aumento de hasta un 55.88% en el porcentaje de conversiones.
Para correlacionar aún más las Métricas web esenciales y las métricas comerciales, Rakuten 24 también ejecutó una prueba A/B enfocada en optimizar las Métricas web esenciales y las métricas relacionadas, y observó una mejora en los siguientes aspectos:
- 53.37% en ingresos por visitante.
- 33.13% en el porcentaje de conversiones.
- 15.20% en el valor promedio del pedido.
- 9.99% del tiempo promedio dedicado
- Una reducción del 35.12% en el porcentaje de salidas.
Destacar la oportunidad
Si bien optimizar el rendimiento web es una inversión inteligente para mejorar la experiencia del usuario y el crecimiento comercial, el equipo de Rakuten 24 comprende lo difícil que puede ser convencer a las partes interesadas de adoptar las Métricas web esenciales y enfocarse en el rendimiento web. Creen que mostrar a los interesados exactamente qué tipo de optimización del rendimiento del retorno de la inversión (ROI) puede generar la mejor manera de involucrarlos.
Rakuten 24 es un servicio independiente y relativamente nuevo, por lo que aprovechó su ventaja de flexibilidad para aceptar el desafío. Creen que el resultado de su caso práctico los ayudará a tomar decisiones más orientadas a los datos en el futuro, así como a otros desarrolladores a medir el impacto de su trabajo y a convencer a las partes interesadas de que la inversión vale la pena para mejorar el rendimiento. Descubre cómo lo hicieron en esta publicación.
Optimiza JavaScript y los recursos
- Elimina los recursos que bloquean el procesamiento.
- Divide el código y usa
import()dinámico. - Divide todo el contenido en partes separadas y carga de forma diferida los archivos HTML en la mitad inferior de la página.
- Ejecuta y carga JavaScript a pedido.
- Identifica recursos de JavaScript lentos y optimiza el proceso de carga con el atributo asíncrono en las etiquetas
<script>y estableciendo conexiones anticipadas con orígenes importantes (sugerencias de recursos comodns-prefetch,preconnectypreload). - Quita el código que no se use y minifica y comprime el código.
- Usa una CDN.
- Controla el almacenamiento en caché con Service Worker con Workbox.
Optimiza imágenes
- Carga diferida de imágenes de la mitad inferior de la página.
- Optimiza las imágenes con una CDN, publica imágenes con el tamaño adecuado, comprime las imágenes y adopta los formatos de imagen adecuados para el trabajo (WebP, SVG, fuentes web).
Optimizar CLS
- Usa CSS
aspect-ratiopara reservar el espacio requerido para las imágenes mientras se cargan. - Usa CSS
min-heightpara minimizar los cambios de diseño mientras los elementos se cargan de forma diferida.
Medición del rendimiento
Además de usar PageSpeed Insights para auditar sus sitios web, el equipo quería encontrar una mejor manera de saber qué experimentan realmente los usuarios en el campo. Por lo tanto, Rakuten 24 decidió usar la biblioteca de JavaScript web-vitals para medir las Métricas web esenciales y otras métricas en el campo, y enviar los datos a una herramienta de estadísticas interna.
Análisis del rendimiento
El equipo analizó los datos de campo recopilados para determinar si existe alguna correlación entre las Métricas web esenciales y las métricas empresariales clave. Descubrieron que los usuarios que generaron una conversión tienden a experimentar un LCP mejor que los usuarios que no generaron una conversión.
Los datos recopilados también revelaron lo siguiente:
- Un buen LCP puede generar un aumento de hasta un 61.13% en el porcentaje de conversiones, un 26.09% en los ingresos por visitante y un 11.26% en el valor promedio del pedido.
- Un buen FID puede generar un aumento de hasta un 55.88% en el porcentaje de conversiones en comparación con los datos promedio generales.
Supervisión del rendimiento
El equipo creó un panel de control del rendimiento utilizando los datos recopilados en el campo y la herramienta de inteligencia empresarial. Esto es importante para supervisar el progreso y evitar regresiones.
Prueba A/B
Con la idea de que las pruebas A/B son una buena manera de medir el impacto comercial de las optimizaciones de rendimiento, el equipo optimizó una de sus páginas de destino para las Métricas web esenciales y, luego, comparó la versión optimizada con la página original mediante una prueba A/B durante un mes. Eligieron una página de destino con un tráfico y conversiones significativos para que la prueba pudiera obtener resultados significativos. Durante la duración de la prueba, el 50% del tráfico se envió a la página de destino optimizada (versión A) y el 50% a la página original (versión B). La única diferencia entre la versión A y la versión B era que la versión A se optimizó para las Métricas web esenciales y no hubo otras diferencias funcionales ni visuales.
La versión optimizada A terminó de cargarse 0.4 segundos antes en la prueba de carga para dispositivos móviles y no muestra un cambio de diseño significativo. De hecho, el CLS de la versión A mejoró un 92.72% en comparación con la versión B. También mejoraron otras puntuaciones de Métricas web: el FID mejoró un 7.95%, el FCP mejoró un 8.45% y el TTFB mejoró un 18.03%.
Si comparamos la versión optimizada A con la B no optimizada, Rakuten 24 descubrió que la versión A brinda lo siguiente:
- 53.37% de aumento en los ingresos por visitante
- Aumento del 33.13% en el porcentaje de conversiones.
- 15.20% de aumento en el valor promedio del pedido
- Aumento del 9.99% en el tiempo promedio dedicado
- Un 35.12% de reducción del porcentaje de salidas
Conclusión
La optimización del rendimiento web es desafiante, pero gratificante. Gracias a un enfoque basado en los datos, Rakuten 24 pudo ofrecer con éxito una mejor experiencia del usuario y medir el impacto positivo en su negocio. Al comprender que esto es solo una parte del recorrido, no el destino, seguirán mejorando su sitio web para ofrecer a los compradores en línea experiencias más agradables.
La optimización requiere un esfuerzo conjunto, y los desarrolladores no tienen que estar solos en este recorrido. Al compartir sus luchas y logros, Rakuten 24 espera que más desarrolladores puedan usar los datos de las Métricas web esenciales para desarrollar un entendimiento mutuo con las partes interesadas y, luego, trabajar juntos para lograr una experiencia del usuario de alta calidad y un crecimiento comercial.