Increase in LCP and how i fixed it

In the dev environment of my site which is running on Next 15,

I found My LCP score has increased from 760 ms to 860.04 ms (almost a 100ms increase) as compared to my prod environment. Not good, need to fix this.

Well i did some design changes as well, so maybe because of that it's taking those in to account..

Time to first byte

The Time to first byte for the upgraded site comes to 32ms which earlier was 26ms in the previouse version. (increase by 6ms)

Prod environment (https://sujaykundu.com) :

TTFB - 26ms

Dev environment (https://dev.sujaykundu.com) :

TTFB - 32ms

Resource Load delay

The Resource load time has also increased by 23ms

Prod environment :

RLD - 667 ms

Dev environment :

RLD - 680ms

LCP Resource Load delay:

The load delay of the LCP element increased by 13ms

Prod environment :

LCP element load delay: 667ms

Dev environment :

LCP element load delay: 680ms

Resource Load Time:

The resource load time increased by 26ms

Prod environment :

Resource Load duration: 30ms

Dev environment :

Resource Load duration: 56ms

Element render delay :

The element render delay increased by 54ms

Prod environment :

Element Render delay: 38ms

Dev environment :

Element Render delay: 92ms

Fixing the LCP

So I started optimizing the page's LCP element first, LCP element is the largest element that is rendered on the screen of the loading the page. you can read more about LCP here - Measuring and optimizing LCP - a core web vital metric

Step 1 - Converting the small Images to Base64

I used this tools, to convert the images first to resize, then to webp and then to base64. This made a huge difference.

After adding the base64 image, the render blocking time for this images were reduced to 0, as it was directly rendered through inline code.

Step 2 - Lazy load the images which are not in the first section of the pages.

<Image
    loading="lazy"
    fetchPriority="low"
    src={optimizedAvatarUrl.toString()}
    alt={avatarAlt}
    width={width}
    height={height}
    className="rounded-full object-cover"
/>

So this made a huge difference.

As you can see, we have eliminated resource load delay and duration, and the LCP score has reduced from 860ms to 660ms

Result

As you can see this were the scores before the optimization :

| Metric            |      (prod)        |     (dev)         | 
| ----------------- | -------------------| ------------------|
| TTFB              | 26 ms              |    32 ms          |
| RLD               | 667 ms             |    680 ms         |
| RLT               | 30ms               |    56 ms          |
| ERD               | 38ms               |    92ms           |

and after the optimization:

| Metric            |       (prod)       |     (dev)         | 
| ----------------- | -------------------| ------------------|
| TTFB              | 26 ms              |    30 ms          |
| RLD               | 667 ms             |    0 ms           |
| RLT               | 30ms               |    0 ms           |
| ERD               | 38ms               |    629 ms         |