How does Shopify calculate the Largest Contentful Paint (LCP) score of my app?

[KhoiPham]

Hi bros, 

We are developing software called Navi+, to create advanced bottom menu bars for Shopify websites. We are trying to overcome the high Largest Contentful Paint (LCP) score, currently at 6.92s. This prevents us from getting the "Built for Shopify" tag, even though our app runs very fast. We do not understand how Shopify measures this score because we have three pages in total:

1. Registration Page: This page initiates callbacks to several pages, checks tokens, and initializes information into the database, so it may run a bit slow.
2. List Page: This page includes lists of menu bars created by users, and when measured independently (not within an iframe), it takes only about 1.7s for a list of 30 menus.
3. Configuration Page: This page is the slowest due to the integration of various libraries for user configuration, UI settings, and menu bar design.

So, which page among these three did Shopify use to calculate the score of 6.92s as listed? We sincerely hope for your assistance in clarifying this so that we can optimize accordingly.

Link to our App: Navi+ | Bottom & Tab Bar, Menu

[KhoiPham]

And here is the detail page: 

[silverlinestudi]

Here's my thoughts:

• Defer Non-Critical JS/CSS: Load only what's needed upfront. Defer or async load heavier JS and CSS files that aren't critical for the initial load.

• Optimize Critical CSS: Inline the critical CSS needed for above-the-fold content. This can speed up rendering time.

• Replace Heavy Elements with Lighter Ones: If possible, replace heavy UI elements with lighter alternatives. This can drastically reduce load time.

• Watch for CLS (Cumulative Layout Shift): When making changes, ensure they don't cause layout shifts, affecting user experience and SEO.

• Optimize Images and Libraries: Compress images and minimize the use of heavy libraries.

Remember, Shopify's LCP measurement might not just be about raw speed but also how quickly the main content becomes visible and interactive to the user.

If you need more help with this, feel free to reach out.

[KhoiPham]

Thank Silverlinestudi very much, 

But my question is which page does Shopify calculate the score of LCP. In case I know which page, I can optimize this better, if not, it's very difficult. 

[JoshHighland]

In my experience no one has been able to answer this question. Its a guessing game at best. Follow best practices and hope your shopify LCP score drops.

[TonyNguyen80]

I see you finnaly got the badge "Build for Shopify" for your app. How did you improve the LCP?

[DinhDuyThanh]

Finally, I see you got the badge "Build for Shopify" for your app. How did you improve the LCP?, and which page need optimize ?. Thanks a lot