WebP conversion halved mobile LCP

sebastiao69

I can already think of all the people that are going to ask me to try that -- so I just want to share my result so everyone can test and try on its own.

I'm working with this particular client since 2019, and the steps I followed are as below:

Converted bulk to WebP all my product images (roughly 1,200), regenerated all my thumbnail sizes and cleared the cache.

Before, I checked in Lighthouse on mobile that the LCP of the product page was 3.9 seconds.

After all the changes, the new LCP of the same product page is now 2.1 seconds.

I only tested the product page so far, so this is what I have done so far.

Again, the result is amazing and unexpected since it's done with few steps...

dustyfalcon

Which tool was used?

sebastiao69

I use bulk image optimisation, all of the original images are stored on disk then optimized. I used quality level of 82 then just switched some of them back one-by-one because for some product images (those that were most affected by optimization) I thought the images lost some details.

Atif

sebastiao69 wrote
Before, I checked in Lighthouse on mobile that the LCP of the product page was 3.9 seconds.

For almost all images, it would seem, a significant chunk of the LCP saving will come from your choice to recreate thumbnails at the exact sizes required by the theme, rather then from WebP. Converting to WebP in and of itself usually reduces file sizes by about 25 to 30 percent not by half the LCP.

sebastiao69

Split testing for 5 different products confirmed the above. We created thumbnails again and the LCP was 2.6s and with WebP on top it's 2.1. Both were important. The most impact came from generating thumbnails.

Cheers!

John-Cohen

Could get a little bit more on top with AVIF using the same quality. But it take several times more time to encode on shared host which matters as there are 1,200 images.

Andrew

@sebastiao69 What was the state of your cache?

It can be a huge difference in LCP between a warm/cold page cache versus changing a format

sebastiao69

All runs are with a warm page cache and the CDN enabled.

I ran each scenario 3 times and reported the median.

Anyway have you encountered some other problems or unexpected consequences in the WebP implementation?

DYLAN

Encoding AVIFs on shared hosting -- that's where weekends go.

MaxLarsson

Also I just tried it on the category pages and the difference there was bigger than on the product pages.