By using real user monitoring tools and focusing on improving Core Web Vitals in refactoring their app, they also improved CLS by 72%, as well as application responsiveness.
Agrofy is an online marketplace for Latin America's agribusiness market. They match up buyers and sellers of farm machines, land, equipment, and financial services. In Q3 2020 a 4-person development team at Agrofy spent a month optimizing their website because they hypothesized that improved performance would lead to reduced bounce rates. They specifically focused on improving LCP, which is one of the Core Web Vitals. These performance optimizations led to a 70% improvement in LCP, which correlated to a 76% reduction in load abandonment (from 3.8% to 0.9%).
70%
Lower LCP
76%
Lower load abandonment
Problem
While studying their business metrics, a development team at Agrofy noticed that their bounce rates seemed higher than industry benchmarks. Technical debt was also increasing in the website codebase.
Solution
The Agrofy team pitched their executives and got buy-in to:
- Migrate from an older, deprecated framework to a newer, actively supported one.
- Optimize the load performance of the new codebase.
The migration took 2 months. Aside from the 4-person development team mentioned earlier, this migration also involved product and UX specialists and a software architect. The optimization project took the 4-person development team 1 month. They focused on LCP, CLS (another Core Web Vitals metric), and FCP. Specific optimizations included:
- Lazy loading all non-visible elements with the Intersection Observer API.
- Delivering static resources faster with a content delivery network.
- Lazy loading images
with
loading="lazy". - Server-side rendering of critical rendering path content.
- Preloading and preconnecting critical resources to minimize handshake times.
- Using real user monitoring (RUM) tools to identify which product detail pages were experiencing lots of layout shifts and then make adjustments to the codebase's architecture.
Check out the Agrofy engineering blog post for more technical details.
After enabling the new codebase on 20% of traffic, they launched the new site to all visitors in early September 2020.
Results
The development team's optimizations led to measurable improvements in many different metrics:
- LCP improved 70%.
- CLS improved 72%.
- Blocking JS requests reduced 100% and blocking CSS requests 80%.
- Long tasks reduced 72%.
- First CPU Idle improved 25%.
Over the same time frame, real user monitoring data (also known as field data) showed that the load abandonment rate on product detail pages dropped 76%, from 3.8% to 0.9%:
