Con el uso de herramientas reales de supervisión de usuarios y el enfoque en mejorar las Métricas web esenciales para refactorizar su app, también mejoraron el CLS en un 72% y la capacidad de respuesta de las aplicaciones.
Agrofy es un mercado en línea del mercado agrícola latinoamericano. Hay compradores y vendedores de máquinas agrícolas, tierras, equipamiento y servicios financieros. En el tercer trimestre de 2020, un equipo de desarrollo de 4 personas en Agrofy dedicó un mes a optimizar su sitio web debido a la hipótesis de que un mejor rendimiento reduciría los porcentajes de rebote. Se enfocaron en mejorar el LCP, que es una de las Métricas web esenciales. Estas optimizaciones de rendimiento llevaron a una mejora del 70% en el LCP, lo que se correlaciona con una reducción del 76% en el abandono de la carga (del 3.8% al 0.9%).
El 70%
LCP inferior
El 76%
Menor abandono por carga
Problema
Mientras estudiaba las métricas empresariales, un equipo de desarrollo en Agrofy notó que sus porcentajes de rebote parecían superiores a las comparativas de sectores. La deuda técnica también estaba aumentando en la base de código del sitio web.
Solución
El equipo de Agrofy realizó una presentación para sus ejecutivos y consiguió la aceptación de lo siguiente:
- Migra de un framework antiguo y obsoleto a uno más nuevo y compatible de forma activa.
- Optimizar 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 un arquitecto de software y especialistas en UX y productos. El proyecto de optimización le llevó al equipo de desarrollo de 4 personas 1 mes. Se enfocaron en LCP, CLS (otra métrica de Métricas web esenciales) y FCP. Optimizaciones específicas incluidas:
- 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 contenidos.
- Carga diferida de imágenes con
loading="lazy". - Renderización del servidor del contenido de la ruta de renderización crítica.
- Precarga y preconecta recursos críticos para minimizar los tiempos de protocolo de enlace.
- Uso de herramientas reales de supervisión de usuarios (RUM) para identificar qué páginas de detalles del producto experimentaron muchos cambios de diseño y, luego, realizar ajustes en la arquitectura de la base de código.
Consulta la entrada de blog sobre Agrofy Engineering 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 sitio nuevo para todos los visitantes a principios de septiembre de 2020.
Resultados
Las optimizaciones del equipo de desarrollo generaron mejoras medibles en muchas métricas diferentes:
- LCP mejoró un 70%.
- CLS mejoró un 72%.
- El bloqueo de solicitudes JS redujo un 100% y el bloqueo de solicitudes CSS en un 80%.
- Las tareas largas se redujeron un 72%.
- Primera CPU inactiva mejoró un 25%.
En el mismo período, los datos reales de supervisión de usuarios (también conocidos como datos de campo) mostraron que el porcentaje de abandono de cargas en las páginas de detalles de productos se redujo un 76%, del 3.8% al 0.9%:
