LCP score over 8s with/without SSR
I've had issues on LCP score(12+s) and optimized the app, restructure most of it, actually, I've modified some code in frontend because I had 4 api calls, and move 3 of them to the Gadget backend. Now having just 1 api call in the frontend, which takes about 2+ seconds. It is made through Gadget backend. I already set up a redis DB to rely on cache but my LCP average is 8.8s in the last 2 weeks. Could someone have some suggestions about where I could find some additional clues? For sure it's a critical issue there.
And what I don't understand is why the api call it’s started at 20s+. Looks like I'm doing to much stuff in the backend?
I tried another way by moving that one api call in a loader (SSR) because I’m using Remix, but still the same values for LCP. Even with a white blank page. It seems that I'm missing something, something big, because the difference is big.
12 Replies
Hello,
Could you please share the URL of your application?
The Gadget app URL please
I would recommend the following:
Update these packages:
-
@gadgetinc/react-shopify-app-bridge
- @gadgetinc/react
I would recommend moving to React 19 as well
You should not be calling to get Shop data from Shopify directly and instead use your Gadget database as a source of truth. This will reduce the amount of requests duration in your loader.
Also make sure that you're testing in production. Development is not a good indicator of LCP.
Take a look at these docs for some more info: https://docs.gadget.dev/guides/frontend/optimize-lcp#largest-contentful-paint-lcp-optimization
I would additionally suggest that you move all your callback functions to useCallbacks so that you don't recreate the functions on each re-render
Please also note that multiple API calls are being made in each of your components which can severely affect your LCP. For example, your getIp function/useEffect from the onboarding wizard componentThanks for your time spent on reviewing our app.
I'm using Mantle for subscription, and updated the UI based on that, until I found it to be a little bit laggy. That's why I have that getShopData function which gets data from Shopify directly. Would you suggest, to save the user subscription in Gadget database to be the single source of truth for all the data needed in the app? That way I have to use a webhook to update the subscriptions every time.
Yeah, that would probably be better
Cool. Back to work 😁 Thanks a lot Antoine
Do you like this answer?
It would be helpful if you activate that 'warm start' addon for us. As I understood from Harry it can be set immediately.
Are you aware that its a $20/month charge per app that you have the feature on? I just want to make sure that's known before we apply it to your application
Yep, that's fine