Encontrar una correlación entre el rendimiento del sitio y las métricas comerciales fue la clave para impulsar el éxito de sus iniciativas de optimización.
Swappie es una startup exitosa que vende teléfonos reacondicionados. Durante algunos años, priorizaron agregar nuevas funciones por sobre el rendimiento del sitio. Sin embargo, cuando notaron que los resultados de la empresa en el sitio móvil se estaban quedando atrás con respecto a la versión para computadoras de escritorio, se produjo un cambio. Se enfocaron en optimizar el rendimiento y pronto experimentaron un aumento en los ingresos provenientes de dispositivos móviles.
El 42%
de aumento en los ingresos provenientes de los visitantes que utilizan dispositivos móviles
10pp*
*punto porcentual de aumento del MCVR de la red
Destacar la oportunidad
Para calcular el porcentaje de conversiones móviles relativo (MCVR de Rel), se divide el porcentaje de conversiones móviles por el porcentaje de conversiones en computadoras de escritorio. Existen muchas oportunidades para hacer un seguimiento de las métricas de velocidad, pero conectarlas con las métricas empresariales puede ser bastante complicado. Dado que las mismas campañas y temporadas llegan tanto a dispositivos móviles como a computadoras de escritorio, la métrica del MCVR de Rel quita la influencia de estos parámetros externos y solo muestra si el sitio móvil está mejorando o no.
El promedio de los diez sitios de comercio electrónico más grandes de Estados Unidos es un MCVR de rel. del 50%, pero Swappie fue del 24%. Esto indicaba que el sitio móvil presentaba desafíos y que la empresa estaba perdiendo ingresos, lo que llevó a lanzar el proyecto de mejora del rendimiento.
Cómo medir el impacto de las mejoras en el rendimiento
Swappie usó Google Analytics para configurar el seguimiento diario del mCvR de Rel y del tiempo de carga promedio de la página en dispositivos móviles mediante esta hoja de cálculo de plantilla. (Lee las instrucciones para usar la hoja de cálculo). También comenzaron a realizar un seguimiento de las Métricas web esenciales a través de Google Analytics y BigQuery. Luego de implementar el seguimiento, los desarrolladores comenzaron a trabajar en el rendimiento del sitio.
Después de solo tres meses de trabajo, el impacto fue claro: el MCVR de Rel pasó del 24% al 34% y los ingresos móviles habían aumentado un 42%.
El 23%
Menor tiempo de carga promedio de la página
El 55%
LCP inferior
El 91%
CLS más bajo
El 90%
FID inferior
Optimizaciones
Optimización para LCP y CLS
El equipo de desarrollo de Swappie descubrió que había mucho margen para mejorar los elementos pequeños que se pasaban por alto durante mucho tiempo. Tras analizar el sitio en diferentes viewports y idiomas, se destacaron problemas con LCP y CLS que fueron fáciles de resolver y tuvieron un gran impacto en el rendimiento general. Por ejemplo, renderizar el elemento de LCP en el servidor en lugar del cliente cuando es posible generaba una disminución del LCP.
Detectar cambios de diseño fue un desafío, ya que pueden variar mucho según el viewport y la conexión. Después de obtener las Métricas web esenciales de los usuarios para sus estadísticas, sabían que estaban en el camino correcto, ya que el CLS había disminuido.
Imágenes
Las imágenes se optimizaron mediante la precarga, la carga diferida y el ajuste de tamaño adecuado. Precargan las imágenes principales (por ejemplo, LCP), mientras se cargan imágenes fuera del viewport, solo cuando es necesario.
Fuentes
Swappie optimizó las fuentes cambiando de proveedor. Esto tuvo un gran impacto, ya que necesitaban una forma óptima de manejar los tipos de letra que requieren los diferentes idiomas.
Secuencias de comandos de terceros
Swappie se esforzó mucho por revisar cada secuencia de comandos y widget de terceros, dónde se usaba y las funciones que ofrecía. Después de conversar con todas las partes interesadas, planificaron reducir el impacto de las secuencias de comandos en el sitio y, al mismo tiempo, mantener las funciones. Quitaron lo que no era necesario y optimizaron el resto, lo que redujo considerablemente la cantidad de JavaScript de terceros en el sitio.
Quita el código que no se usa y optimiza la creación de paquetes
Optimizar las importaciones y quitar el JS y CSS sin usar contribuyó con pequeñas mejoras en el rendimiento del sitio de Swappie. Sin embargo, esas pequeñas mejoras se acumulan con el tiempo. También optimizaron la configuración del paquete.
Crea una cultura de rendimiento en Swappie
El resultado que Swappie logró no solo deriva de los cambios en el código, sino también de los cambios en la organización y sus prioridades.
Teemu Huovinen, líder de ingeniería, explica lo siguiente:
Debes vincular la velocidad del sitio con las métricas empresariales para destacar realmente su importancia. Todo se reduce a la priorización cuando tienes poco tiempo y recursos, que siempre es así. Priorizar el valor del cliente es la mejor opción, pero es muy fácil centrarse en las funciones nuevas y en las mejoras de conversiones más directas si consideras que la velocidad del sitio solo mejora el aspecto del sitio. Vincular la velocidad del sitio a las métricas empresariales no siempre es fácil, y ahí es donde el cálculo con el MCVR de Rel nos ayudó mucho.
Teemu Huovinen
Una vez que el equipo de desarrolladores tuvo la oportunidad de enfocarse por completo en la velocidad del sitio durante un trimestre, se sintieron más motivados para profundizar en el tema.
La combinación de nuestro impacto con el crecimiento de nuestro equipo es lo que lo hace aún más impresionante. Cuatro de nuestros siete desarrolladores comenzaron en el mes en que comenzamos a trabajar en el rendimiento. Gracias al equipo, es realmente increíble cómo pudimos reunirnos en torno a este tema y tener un gran impacto.
Teemu Huovinen
Teemu también destaca la importancia de dedicar tiempo al comienzo de la elaboración de planes basados en datos, aprender a usar la pestaña Rendimiento de Herramientas para desarrolladores y configurar las estadísticas de usuarios antes de realizar mejoras. Los gráficos (especialmente los que van en la dirección correcta) son una excelente fuente de comentarios y validación de tu trabajo. Analizar las Métricas web esenciales en el campo junto con las puntuaciones de Lighthouse (basadas en labs) los ayudó a enfocarse en optimizar los aspectos correctos que afectarían a la mayoría de las personas.