How to reduce LCP for mobile in prestige theme

Shopify Discussion
1

RahaTech_0-1747048607018.png
RahaTech_0-1747048607018.png1391×656 40.5 KB

LCP is very high for mobile how to reduce it to get better performance , I’ve tried removing unnecessary code.

  1. Another doubt is right now my html to text content for website is found to be 5% which is very less how can I optimized my code to take it to above 25% in prestige theme.
2

store url: e81e39-94.myshopify.com

3

Hi @RahaTech ,

Have you tried preloading LCP?

4

How do we do that ?

5

You can manually preload this image so mobile browsers fetch it earlier and reduce your LCP time. Just paste this inside your (before ):

This should help improve your LCP score significantly on mobile devices.

Let me know you need further guidance, happy to help!

6

I tried this added in theme code but didnt made any difference

RahaTech_0-1747055912755.png
RahaTech_0-1747055912755.png1374×661 49 KB

any other solution ?

7

I see. I am not sure exact solution, but, we can try different solutions as well :slightly_smiling_face: Just noticed you’re using a slideshow component — but looks like you’re only displaying one image. If that’s the case, removing slideshow carousel and using and html tags will probably improve LCP, because carousel adds delays and some js logic. What do you think ?

8

okay I’ll try with image I added for slideshow as I needed a button to be precise

9

In prestige theme hero section is itself slideshow

10

Hey, this is a bit frustrating — I get it. Since Prestige treats the hero section as a slideshow by default, even with one image, it ends up delaying the LCP no matter what we preload.

One possible workaround is to hide the slideshow on mobile and instead render a lightweight + tag specifically for mobile users. That way, mobile browsers can paint the hero image immediately without waiting for the JS to kick in.

Other than that, I couldn’t find any magic bullet just by checking from the browser.

If you’re open to it, I’d be happy to take a closer look with collaborator access and see if I can optimize it directly in your theme — totally up to you, no pressure at all :slightly_smiling_face:

11

Hello @RahaTech , below is the solution that will address both of your issues – decreasing the mobile LCP and increasing the HTML-to-text ratio to improve performance and SEO metrics.

I reviewed your website using Google PageSpeed Insights, it was clear there was a very low score for LCP, especially on mobile devices, which shows that there are serious issues with loading speed as well as visual stability.

1. Reduce Critical Rendering Path

  • Minimize the number of critical resources (JS, CSS) needed to render above-the-fold content.
  • Split CSS into critical (above-the-fold) and non-critical (below-the-fold) using tools.

You can manually inline critical CSS .

2. Inline Key Fonts & Avoid Large Font Files

  • Avoid loading multiple font weights.
  • Use modern formats like woff2.
  • Also, ensure that you are preloading your main font:

Here are the steps you can follow to reduce the text to HTML ratio.

1. Reduce Inline CSS & JS

Move inline scripts/styles to external files and load them asynchronously.

2. Avoid Hidden or Visually-Heavy Sections Without Text

Banners, carousels, or large images with no accompanying text lower your ratio.

3. Remove Excessive Comments & Whitespace

Alternatively, if you’d rather not manage these optimizations manually, I recommend trying the Website Speedy Shopify app. It automates key performance improvements. It’s quick to set up—usually under 5 minutes—and comes with a 14-day free trial to test the results.