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.
![Capturas de pantalla de ejemplo de la página principal de Rakuten 24, con marcos de dispositivos móviles alrededor de cada captura.](https://web.developers.google.cn/static/case-studies/rakuten/image/example-screenshots-raku-193c464c35da7.jpg?authuser=0000&hl=es)
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
,preconnect
ypreload
). - 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-ratio
para reservar el espacio requerido para las imágenes mientras se cargan. - Usa CSS
min-height
para 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.
![Flujo de integración del seguimiento de Web Vitals de Rakuten 24. El primer paso es integrar la biblioteca de web-vitals agregando la secuencia de comandos al sitio web de Rakuten 24. Después, se podrán medir las métricas web esenciales a partir de métricas del usuario reales, y los datos se enviarán a la herramienta de recopilación de datos interna de Rakuten 24.](https://web.developers.google.cn/static/case-studies/rakuten/image/rakuten-24s-web-vitals-t-c0d353a93ae67.jpg?authuser=0000&hl=es)
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.
![Una comparación entre los usuarios que generaron conversiones y los que no lo hicieron mediante el LCP. El grupo de usuarios que generó conversiones con más frecuencia experimentó un LCP más bajo.](https://web.developers.google.cn/static/case-studies/rakuten/image/a-comparison-users-conv-c5d62d1600a03.jpg?authuser=0000&hl=es)
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.
![El LCP se agrupa por porcentaje de conversiones y tiempo de LCP. Los usuarios que generaron conversiones con más frecuencia generaron conversiones cuando el LCP era más bajo; el 61.13% de los usuarios generaban conversiones con un LCP de un segundo o menos.](https://web.developers.google.cn/static/case-studies/rakuten/image/lcp-bucketed-conversion-62b775421189c.jpg?authuser=0000&hl=es)
![El LCP se agrupa según los ingresos por visitante y el tiempo de LCP. Los usuarios con un LCP más bajo generaron más ingresos, con un 26.09% más de ingresos por usuario cuando el LCP era de un segundo o menos.](https://web.developers.google.cn/static/case-studies/rakuten/image/lcp-bucketed-revenue-per-cb892c5f24123.jpg?authuser=0000&hl=es)
![El LCP se agrupa por valor promedio del pedido y tiempo de LCP. Los usuarios con un LCP más bajo tuvieron un valor promedio del pedido un 11.26% más alto cuando el LCP era de un segundo o menos.](https://web.developers.google.cn/static/case-studies/rakuten/image/lcp-bucketed-average-ord-f371f7233ed47.jpg?authuser=0000&hl=es)
![FID agrupado por porcentaje de conversiones y hora de FID. Los usuarios que generaron conversiones con mayor frecuencia generaron conversiones cuando el FID era más bajo, con un 55.88% de los usuarios que realizaron conversiones con un FID de 50 milisegundos o menos.](https://web.developers.google.cn/static/case-studies/rakuten/image/fid-bucketed-conversion-0d43d40d194cf.jpg?authuser=0000&hl=es)
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.
![Una captura de pantalla del panel de supervisión del rendimiento interno de Rakuten 24 para cada una de las Métricas web esenciales (LCP, CLS y FID).](https://web.developers.google.cn/static/case-studies/rakuten/image/a-screenshot-rakuten-24-30bf38d4bb335.jpg?authuser=0000&hl=es)
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.
![Captura de pantalla de una prueba A/B para dispositivos móviles correspondiente al sitio web de Rakuten 24. Cada versión era visualmente y funcional, y la versión A estaba optimizada para obtener mejores Métricas web esenciales.](https://web.developers.google.cn/static/case-studies/rakuten/image/a-screenshot-a-mobile-b-23694e6702f81.jpg?authuser=0000&hl=es)
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%.
![Una comparación entre las startups de la página principal de Rakuten 24. La versión A está optimizada para lograr una mejor carga en 1.6 segundos, en comparación con la versión B, que tarda 2 segundos.](https://web.developers.google.cn/static/case-studies/rakuten/image/a-startup-comparison-the-a6e5d93ff742f.jpg?authuser=0000&hl=es)
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
![Captura de pantalla de las mejoras en las Métricas web esenciales de la página principal de Rakuten 24. Las estadísticas muestran un aumento del 53.37% en los ingresos por visitante, un aumento del 33.13% en el porcentaje de conversiones, un aumento del 15.2% en el valor promedio del pedido, un aumento del 9.99% en el tiempo promedio que los usuarios pasan en las páginas y una reducción del 35.12% en el porcentaje de salidas.](https://web.developers.google.cn/static/case-studies/rakuten/image/a-screenshot-core-web-vi-5494c342b0223.jpg?authuser=0000&hl=es)
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.