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

Mavi90
Excursionist
31 0 4

Screenshot 2022-12-08 at 7.56.09 PM.pngScreenshot 2022-12-08 at 7.56.49 PM.pngHi,

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

Replies 3 (3)

Cedcommerce
Shopify Expert
718 76 112

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
Mavi90
Excursionist
31 0 4

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

Screenshot 2022-12-08 at 7.56.49 PM.png

 

oreoorbitz
Shopify Partner
244 29 129

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.