How to reduce LCP on mobile phone downloading

How to reduce LCP on mobile phone downloading

Dana54321
New Member
9 0 0

Hi, I have a site on PageSpeed where the desktop is 96% performance and the mobile is 75% performance and it shows the LCP as being 5.8s, I have reduced the picture sizes with TinyPNG and gone through manual modification. On reading and watching various videos, it shows that you can add smaller pictures and assign them to the mobile only is this possible on Shopify? The site is www.thewelshproducestall.co.uk

Replies 2 (2)

VamJam
Visitor
1 0 0

You'll see a benefit from adding `fetchpriority="high"` to the first few images that load visibly on screen, along with removing `loading="lazy"` from those images.


As for different sizes based on display, It's possible, I would read the following: https://performance.shopify.com/blogs/blog/responsive-images-on-shopify-with-liquid  and https://stackoverflow.com/questions/30460681/changing-image-src-depending-on-screen-size Getting it to integrate cleanly with your theme is possible.

Keshan97
Shopify Partner
63 9 22

You don't have to render smaller pictures for mobile manually in Shopify, Most of the Shopify themes come with an image secret option (the option you asked for)

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com