Con el uso de herramientas de supervisión de usuarios reales y enfocándose en mejorar las métricas web esenciales en la refactorización de su aplicación, también mejoraron el CLS en un 72%, así como la capacidad de respuesta de la aplicación.
Agrofy es un mercado en línea para el mercado agroindustrial de Latinoamérica. Conectan a compradores y vendedores de maquinaria, tierras, equipos y servicios financieros agrícolas. En el tercer trimestre de 2020, un equipo de desarrollo de 4 personas de Agrofy pasó un mes optimizando su sitio web porque plantearon la hipótesis de que mejorar el rendimiento reduciría los porcentajes de rebote. Se enfocaron específicamente en mejorar el LCP, que es una de las Métricas web esenciales. Estas optimizaciones de rendimiento generaron una mejora del 70% en el LCP, que se correlacionó con una reducción del 76% en el abandono durante la carga (de 3.8% a 0.9%).
70%
LCP más baja
76%
Menor abandono de carga
Problema
Mientras estudiaba sus métricas comerciales, un equipo de desarrollo de Agrofy notó que sus tasas de rebote parecían ser más altas que las comparativas del sector. La deuda técnica también aumentaba en la base de código del sitio web.
Solución
El equipo de Agrofy presentó su propuesta a los ejecutivos y obtuvo su aceptación para lo siguiente:
- Migra de un framework más antiguo y obsoleto a uno más nuevo y compatible de forma activa.
- Optimiza el rendimiento de carga de la nueva base de código.
La migración tardó 2 meses. Además del equipo de desarrollo de 4 personas que se mencionó antes, esta migración también involucró a especialistas en productos y UX, y a un arquitecto de software. El proyecto de optimización le llevó 1 mes al equipo de desarrollo de 4 personas. Se enfocaron en la LCP, la CLS (otra métrica de las Métricas web esenciales) y la FCP. Entre las optimizaciones específicas, se incluyen las siguientes:
- Carga diferida de todos los elementos no visibles con la API de Intersection Observer.
- Entrega recursos estáticos más rápido con una red de distribución de contenido.
- Carga diferida de imágenes con
loading="lazy". - Renderización del servidor del contenido de la ruta de renderización crítica
- Carga previa y conexión previa de recursos críticos para minimizar los tiempos de enlace
- Usar herramientas de supervisión de usuarios reales (RUM) para identificar qué páginas de detalles del producto experimentaban muchos cambios de diseño y, luego, hacer ajustes en la arquitectura de la base de código
Consulta la entrada de blog de ingeniería de Agrofy para obtener más detalles técnicos.
Después de habilitar la nueva base de código en el 20% del tráfico, lanzaron el nuevo sitio para todos los visitantes a principios de septiembre de 2020.
Resultados
Las optimizaciones del equipo de desarrollo generaron mejoras mensurables en muchas métricas diferentes:
- El LCP mejoró un 70%.
- El CLS mejoró un 72%.
- El bloqueo de solicitudes de JS se redujo al 100% y el bloqueo de solicitudes de CSS al 80%.
- Las tareas largas se redujeron un 72%.
- El primer tiempo inactivo de la CPU mejoró un 25%.
Durante el mismo período, los datos de supervisión de usuarios reales (también conocidos como datos de campo) mostraron que la tasa de abandono de carga en las páginas de detalles del producto disminuyó un 76%, del 3.8% al 0.9%:
