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.


![Kayce Basques](https://web.dev/images/authors/kaycebasques.jpg) Kayce Basques [X](https://twitter.com/kaycebasques) [GitHub](https://github.com/kaycebasques)

<br />

[Agrofy](https://www.agrofy.com.ar/) 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](https://web.dev/articles/lcp), which is one of
the [Core Web Vitals](https://web.dev/articles/vitals#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](https://web.dev/articles/cls) (another Core Web Vitals metric),
and [FCP](https://web.dev/articles/fcp). Specific optimizations included:

- Lazy loading all non-visible elements with the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API).
- Delivering static resources faster with a [content delivery
  network](https://web.dev/articles/content-delivery-networks).
- [Lazy loading images](https://web.dev/articles/browser-level-image-lazy-loading) with `loading="lazy"`.
- [Server-side rendering](https://web.dev/articles/rendering-on-the-web) of [critical rendering path](https://web.dev/articles/critical-rendering-path) content.
- [Preloading and preconnecting](https://web.dev/explore/fast#optimize-your-resource-delivery) 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](https://mollar-luciano.medium.com/how-agrofy-optimised-core-web-vitals-and-improved-business-metrics-2f73311bca)
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](https://web.dev/articles/long-tasks-devtools) reduced 72%.
- [First CPU Idle](https://developer.chrome.com/docs/lighthouse/performance/first-cpu-idle) improved 25%.

Over the same time frame, real user monitoring data (also known as [field
data](https://web.dev/articles/how-to-measure-speed#lab-data-vs-field-data)) showed that
the load abandonment rate on product detail pages dropped 76%, from 3.8% to
0.9%:
![A graph showing load abandonment rate decrease of 76% on the product details page after performance optimizations.](https://web.dev/static/case-studies/agrofy/image/a-graph-showing-load-aban-894ad97717144.png) Load abandonment rate trend on product detail page.