A Shopify app developer is experiencing inconsistent Largest Contentful Paint (LCP) metrics that spike above the 2.5-second threshold required for “Built for Shopify” status, then drop the next day. A screenshot shows these fluctuations.
Potential causes identified:
Recommended solutions:
The issue remains unresolved, with the developer seeking others who may have experienced similar problems.
I’ve created Shopify app and its live but to get built for shopify status the LCP should be below 2.5s,
Don’t know why my app is getting a sudden spike and the next day it goes down for LCP,
This is the Screenshot :
Please does anyone facing this issue ?
Hey @weebySagar
Regarding the Built for Shopify status — you’re absolutely right that one of the key performance requirements is keeping the Largest Contentful Paint (LCP) consistently below 2.5 seconds.
If you’re seeing sudden spikes in LCP, here are a few things you might want to check:
If your app is hosted on a server (Node, Laravel, etc.), make sure:
You’re using server-side caching for repeated requests
CDN (like Cloudflare or Vercel edge) is enabled
There are no cold starts if you’re using serverless functions
Check for:
Large images, hero banners, or fonts loading above the fold
Lazy-loading not being used properly
Any third-party scripts blocking the render
Try using PageSpeed Insights or Lighthouse to pinpoint the specific element contributing to the high LCP.
Sometimes bots or automated test pings can distort LCP metrics.
Use real-user monitoring tools (like SpeedCurve, Cloudflare Analytics, or LogRocket) to distinguish between real user spikes and anomalies.
If you’re using App Bridge or have assets injected into Shopify themes, check if LCP is higher on some themes/pages than others
Please Note:
To get consistent LCP scores:
Inline critical CSS
Use preload for web fonts
Defer or async non-critical JS
Minimize layout shift
You can also try running your app through Shopify’s App Performance Tool in your Partner Dashboard to simulate different environments.
Hello @weebySagar , Sudden spikes in the LCP are dangerous for the site’s performance. If you make any change in
Images like converting the image into non-WebP format or an unoptimized format that is the main cause for a sudden hike in the LCP, so make sure if you made any changes in the website, especially regarding images, you should try to check that any action is performed or not.
If you do not perform any of these actions, then you should follow the suggestions below to optimize LCP -
Optimize Critical CSS
Loading unnecessary CSS files or too many styles can delay the rendering of above-the-fold content. Extract and inline critical CSS to reduce the time it takes for the page to be displayed. First, try to do inline critical CSS by including the styles required for above-the-fold content directly in the tag to prevent a delay in rendering. Additionally, you can do minification of CSS
Example -
Before Minification
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
After Minification
body{font-family:Arial,sans-serif;background-color:#f4f4f4;color:#333;line-height:1.6}
Use Efficient Server Response Times (Reduce TTFB)
A slow TTFB can delay the rendering of the largest contentful element. Optimize your server to respond quickly. You can try delivering content closer to the user by using a Content Delivery Network (CDN), which reduces latency. Additionally, reduce the number of API calls needed for the LCP element and ensure API responses are fast.
