How Agrofy optimised Core Web Vitals and improved business metrics

Comparison with the previous period
  • We migrated the front end architecture from Angular JS (Deprecated) to React solution.
  • We implemented a lazy loading strategy for all non-visible elements using Intersection Observers.
  • We optimised static resource delivery using a CDN with cropped WEBP images.
  • Lazy loading for non-visible images.
  • We used an SSR strategy to resolve critical content.
  • We included preloads and preconnects to critical resources to minimise handshake times.

How was the FCP improved

Although FCP is not a Core Web Vital, it represents the first content stack and carries all the rest of the key metrics.

  • We first identified and removed a render blocking resource.
There is a breach of more than a second since the DOM is parsed and rendering begins.
El render comienza inmediatamente

How was the LCP improved

The Largest Contentful Paint is the element with the greatest visual impact for the user and therefore the one that contributes the most to the feeling of a full page load.

How was the CLS improved

Identifying which elements increase the value of CLS is usually quite an easy job, but it can become a complex task in applications with lots of dynamic content and spaces that depend of external services.

Con Chrome DevTools identificamos los elementos que generaban el aumento de CLS

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store