LCP issues using the Remix template

[mashkovtsevlx]

Issue summary

We have an app that is "Built for Shopify", and we use the Remix template + Heroku containers.
Our app is very close to stock. We don't have any additional logic / requests in our loaders, and app functions thanks to pretty simple JS code that runs only on user interaction.
Still, Our app shows 2.68s LCP in the Admin, and we may lose our "Built for Shopify" status.

Is there a good way to analyze the Core Web Vitals in the Remix app, and is someone experiencing the same issue?

[paulomarg]

Hey @mashkovtsevlx, thanks for your question!

Just so that we have a better picture of your scenario:

• Are you getting that 2.68s result in your Partners dashboard?
• Have you made any changes to your app's production environment in a way that could affect that result?
• Is this a pre-existing app that had a lower LCP before, and it recently got worse?

[mashkovtsevlx]

@paulomarg Thank you for your response.

• Yes, we're getting the 2.68s result in the Partners dashboard
• We recently added Sentry to our build, and it got us to the 2.68s result. We disabled it and now we have ~2.5s result, but it's still too high, and we don't have the room left for anything else (like Sentry)
• We were getting ~2.3-2.5s average LCP when the app was just developed. So the result was pretty high from the beginning.

[ninja-checkout]

We are also having similar problem.

Any solution for this

[paulomarg]

Hey folks! With the release of token exchange support in the remix template, we removed the need for the redirects we had as part of the login / authentication process, which makes it much faster.

You can find some guidance on how to use the new auth strategy in the template in our docs.

Please let me know if this helps!

[luizfaro]

Hi @paulomarg !

We are having the same high LCP issue on our app, which uses the shopify-app-express template...

I've enabled the Managed Installation feature and the app is indeed faster (we no longer see the redirects), but not enough to clear the 2.5s target...

Is there any other thing we can try? The majority of the LCP time is before our code even loads (meaning it is the template's code)...

All the best,

Luiz

[paulomarg]

Hey folks, sorry for the delay in following up here. We ran some tests on a fresh template app and we saw LCP values between 500ms - 1s while deployed to Heroku, with an average of ~700ms, which makes me think that the template itself isn't affecting the value that much.

There are a few important things to consider:

• While testing, I deployed it very close to me, which helps lower the LCP because it reduces network latency
• The times will be calculated based on responses to all users, so ideally apps should be hosted close to where most users are to improve the values

The team suggested a few articles that might help:

• https://web.dev/articles/lcp
• https://web.dev/articles/optimize-lcp

I've also forwarded this to the team to see if we can improve documentation around this value!

Hope this helps!

[mashkovtsevlx]

Thank you @paulomarg
We will migrate our app from Heroku to Fly.io to utilize the multi-region feature. I'm not too optimistic about this improving our app's performance dramatically, but definitely worth trying!
I will let you know about the results.

[mashkovtsevlx]

@paulomarg We deployed our app to Fly.io, and we created a few powerful machines across the regions with most traffic.
Our results just got worse, and now we're out of the "normal" threshold with our LCP again.
Any advice?
The most important question I have is: how do you measure LCP, considering that the app is embedded? We want to run some tests by ourselves, but not sure about the ideal strategy for it

[paulomarg]

I'm sorry to hear that! Currently, our recommendation for working on those values is to install web-vitals to debug the values Shopify will see (see documentation here) - they should match the results you get in the dashboard.

The team is also working on some bug fixes on these stats, and looking into adding some ease-of-use APIs to make it easier for apps to debug the results. I'll keep you posted as I hear more.

[SMAKSS]

Hello,

We are currently facing persistent issues with the LCP on our Shopify app since upgrading to Vite. Prior to this upgrade, our performance metrics were marginally below acceptable thresholds for some time. To address this, we've implemented several optimizations, including upgrading to the React Canary version to resolve hydration errors. Unfortunately, these measures have not been successful and did not show significant improvements yet.

Interestingly, our LCP measurements—taken using Web Vitals—appear to be within a normal range (900ms to 2.4s) on local, development and production servers when we testing it ourselves. This discrepancy has been challenging, especially as we are at risk of losing our "Built for Shopify" badge. Earlier, we also adopted a new authentication strategy, but this hasn't resolved the LCP issues.

We're eager to hear if others are experiencing similar problems and any potential solutions that might have worked.

Thank you.