LCP issue when using starter

[bakura10]

Hi,

We are using Shopify template structure for a small Instagram app, and while I tried to apply for "Built for Shopify", I found to my surprise that the app has a LCP score above the 2.5s recommended to apply to the program (about 3.5s).

This app uses online-access token to authenticate users (this could be removed, but we did it this way as we might add features to edit products in the future, and we wanted to have this done from the start), so when users first authenticate, there is several redirections:

App => OAuth callback (for offline token) => Redirect => OAuth callback (for online token) => Redirect

The app itself is barely optimizable. The app itself just does one Ajax request to render (I've checked the API timing and it is fast). It is using a placeholder while loading. It uses Polaris and App Bridge, with no extra dependencies. Everything is minified. Static resources have a long cache control value, and served through a CDN (CloudFront).

In other words, I've exhausted all the possible optimizations at our level, which just leave the starter.

The issue with this app is that it is a "install and forget" app. Merchant will typically install it, have the long initial double OAuth dance, set it up, and leave it. And will likely never open the app ever once setup, as everything else happens through app blocks.

My only intuition though is that Shopify calculates the LCP by also taking the whole OAuth dance time (which indeed take 2-4s the first time), which would heavily penalize apps like ours.

It is a bit odd though that following the Shopify starter and the best security practices (by using online access token) is actually preventing to apply to the Built for Shopify program due to those performance penalties.

I wonder if there are some plans to either:

Improve how LCP is calculated for apps. Provides a way to ask both offline AND online token in one request to limit the time spent on authentication. Or eventually modify the way the starter is structured to optimize it for Shopify performance recommendations ? Thanks!

[felixmpaulus]

Same issue here. Backend is based on the node template. App is super optimized, but LCP is hovering around 3s. App is install and forget.

I have spend days on this now, even forking and modifying Shopify's libraries (without success). It seems I have exhausted all possibilities.

[luizfaro]

Same here: LCP ~3s, regardless of the app's queries.

It seems the standard template is already too heavy for Shopify's 2.5s target...

[myworks-peter]

Same issue here - we're also suspecting that a one-time oAuth connection to an outside platform is a possible factor here. It would be really helpful to have guidance from Shopify with more detail on how LCP is determined and/or a way to more specifically tell what is impacting their LCP calculations.

[luizfaro]

Update:

Following this comment: https://github.com/Shopify/shopify-app-template-remix/issues/429#issuecomment-1927235746

We implemented https://shopify.dev/docs/api/shopify-app-remix#embedded-auth-strategy on our app, which uses shopify-app-express. The app is indeed faster (we no longer see the redirects), but not enough to clear the 2.5s LCP target...

[paulomarg]

Hi folks, I was testing the template and when running on development mode, and I did see it goes over the limit because it makes a lot of requests for individual asset files (which is how vite server works so it can do HMR).

However, running it in production mode (i.e. using npm run build && npm run serve), I saw LCP times that were well within the limit, around 700-800ms, since the assets are bundled and we have way fewer requests.

I added some resources on how this score might be improved on the Remix template repo as well: https://github.com/Shopify/shopify-app-template-remix/issues/429#issuecomment-1969166646

I've also forwarded the feedback to the team to see what we can improve in terms of documentation.

Hope this helps!

[Nedomas]

@paulomarg I believe the way you tested it (locally and in prod on your own browser) is not the way Shopify LCP is registered in Shopify admin insights. I also do get great scores on my local browser (local + prod), but when Shopify measures the LCP it is around 2-5x larger.

Its all happening on a pretty much empty app and is confirmed by many people. What could be a workaround?