Main issue: Embedded Shopify app shows <1s LCP (Largest Contentful Paint) via web-vitals, but Shopify’s program reports ~3s from real merchant usage.
Key question: Does Shopify measure LCP only on initial app load (opening from the admin menu), or also on each client-side route change in a React SPA (no hard refresh, URLs change)?
Observations: One participant suggests clicks on the Shopify app menu occur outside the app’s iframe, potentially altering what’s counted toward LCP. They note merchants often first click the menu, which may affect how LCP is captured.
Artifacts: An image was shared to illustrate the Shopify admin menu vs. the app iframe. A related GitHub issue (GoogleChrome/web-vitals #119) was linked, likely addressing LCP behavior in SPAs.
Actions/requests: A call for Shopify Dev Support to review and clarify where/when LCP is gathered for embedded apps, and how to align app-side measurements with Shopify’s.
Status: No resolution yet. The discussion remains open with unanswered measurement-scope questions and guidance needed on improving the reported LCP.
I’m having some challenges with my embedded apps LCP score.
I have the web-vitals package installed in our app, and the LCP scores that we are seeing look great (sub 1 sec) in most cases.
Shopify is reporting our LCP score around 3 seconds. I know that Shopify calculates the LCP score by looking at the app experience for real merchants using the app.
My question:
Does Shopify just look at the LCP when the app is first loaded, or do they calculate it every time the URL changes? We are ReactJS based so we don’t do hard refreshes, but the URL does change for each view.
I’m trying to figure out how to bring our score down, but its unclear on where / when Shopify Is gathering the LCP information.
I am on same problem and what I figure out. When user click on shopify app menu it’s out side app iframe then it’s not counting as LCP score. Most of user always first click on menu then other area.
