How can I improve the Largest Contentful Paint (LCP) on my site?

[Mavi90]

Hi,

I'm working on increasing my site speed and have a question; one of the things I need to fix is the LCP(Largest Contentful Paint) shown below. My question is how do I fix it?

Would only using data-bgset help?

A little background about my site, I had someone redo my site last summer. This is how they designed it.

Site: https://feedmomandme.com/

Thanks

[Cedcommerce]

Hi @Mavi90, 

The largest Contentful Paint Element is the largest content on the whole page.

This is the largest image on the whole page .

There are a number of factors that can affect how quickly the browser is able to load and render a web page, and blockage or delays across any of them can have a significant impact on LCP.

This can slow down the speed by 2-3 points on pageinsight and GTmetrics

Solution :

The image can be optimized.

The image can be compressed.

The Image can be converted to jpeg/png to web format which is the google page insight-friendly format.

If the image is not on the first look we can also implement lazyloading to the image.

Hope this will work

All the best,
CedCommerce

[Mavi90]

Can I do that even though the image has multiple sources(see image below)?

[oreoorbitz]

That's the srcset, Shopify takes the image you upload, and creates multiple versions of the image for diferent sizes, according to the theme code.

None of the suggestions by Cedcommerce will help, the image is already reasonably opitmized by Shopify's CDN once you upload the image, and the theme is probably (though some themes are bad about this) serving the image at a reasonable size, using the srcset.

The only thing that will have a noticable impact for LCP will be preloading the image/s.