Skip to main content

Fallacy of Optimising for Web Vitals the wrong way.

TL;DR Don't overlook JS Execution time

As the story goes, a really smart bunch of developers working on a large eCommerce application being built on React wanted to optimise their site as per the recommendations of Google's Web Vitals, of LCP, FID, and CLS.

The overall site was quite fast and was within the green to amber range for LCP, FID and CLS scores, however the Product Listing page was performing poorly with much higher Time to First Bytes and there by Largest Contentful paints.

The problem was narrowed down to slower API responses for Product images and Prices for the products on the PLP page. In an attempt to improve TTFB and LCP, the team decided to move the product Image and Price calls to client side,

By moving these calls to client side the TTFB significantly improved and now we had the static HTML page rendered within 1-2 seconds and the images and prices loaded in about 2-3 seconds. The users were able to scroll through the pages while the prices were loading in.

However we received a lot of negative feedback on the PLP pages and customers complaining that the prices took over 10 seconds to load.

While getting into debugging sessions with the client, we came across our biggest learnings until date, JavaScript Execution time is heavily dependant on the CPU of the devices and while it might 2-3 seconds on a regular mac, it is 3X slower on lower end laptops.

In hindsight what we realised that, while looking through the various reports from google Page Speed Insights we focused a lot of improving the LCP scores and ignored the high JS Execution time especially on Mobile devices.

Things we did to fix it​

  • We moved out Clientside calls back to server side and focused o optimising the API response times. Moving the API calls to the server ensured that the JS Execution time was a lot lesser and the loading of the page wih all the relevant information was not dependant on the user's devices.

  • Developers (most of who are on macs) now use 4x CPU throttling to test the performance of all the pages. (Just an FYI 4x CPU throttling on the M1 chipsets are still way faster than a Intel Celeron or i3 PC).

  • Fine tuning the overall rendering of the pages, getting rid of inefficient and excessive use of useEffects, reducing recursive loops and unnecessary re-renders.