Hello,
My name is Axel, and I run PlusSales Shopify App.
For the past couple of months, we have been trying to achieve “Built For Shopify” Status, however our main issue is reducing our CLS(Cumulatics Layout Shift) as well as our LCP(Largest Contentful Paint). As you can see from the provided screenshots, our testing sources which vary from Chrome Dev Console to PageSpeed, tell us that both on mobile and desktop, our CLS is well under 0.1s and our LCP is under 2.5s.
However our Shopify Partner Dashboard seems to say otherwise, which is creating a problematic obstacle for us to reach the “Built For Shopify” Status.
We would love any help on understanding why there seems to be such a huge gap in CLS and LCP from Shopify and our own testing tools.
Hi Axel, have you tried to debug with the tools provided? See below.
I would not compare scores from Dev Console or PageSpeed as they are not indicative of real world usage data.
Q12: Why do the metrics I capture not match what Shopify records?
A: Metrics differences between your data and Shopify’s often result from variations in where and how data is captured. Shopify’s metrics typically reflect a wide range of real-world conditions, while your setup may differ in network speed, caching, or device performance. We know this has been a frustration for many developers, which is why we created debugging tools for Web Vitals. Learn how to enable debugging.
Hey benji,
Thanks for the help and response, I was made aware of this a couple weeks ago when I did my post and some extra research.
However I now have another issue with shopify partner web vitals.
It doesn’t update consistently anymore, the graph for CLS AND LCP is broken, it shows values for 14 dec then 19 dec, and its been stuck like this for a couple days again it just doesn’t update, this also means the value of the CLS and LCP for my app doesn’t update either further increasing the difficulty to achiever the built for shopify status.
Any help would be appreciated thanks.
Axe
Hi @Benji_Yang ,
I’m using the Web Vitals debugging tools to capture LCP metrics. I’ve followed the documentation and successfully retrieved the LCP value. However, I couldn’t identify which element is being considered as the LCP. Could you advise on how we can reliably capture the specific element on each page load? This would help developers focus on improving the LCP more effectively.
Here’s an example of the data I’m receiving:
{
“element”: “null”,
“name”: “”,
“entryType”: “largest-contentful-paint”,
“startTime”: 1078.2000000476837,
“duration”: 0,
“size”: 30415,
“renderTime”: 1078.2000000476837,
“loadTime”: 0,
“firstAnimatedFrameTime”: 0,
“id”: “”,
“url”: “”
}
Thank you!
You have to clean your cache to get accurate measures, try reloading with Ctrl+R or Cmd+R on mac and you get more accurate measures.
Also try using a different device sizes, if your app is translated, the LCP might change depending on your language, since the size of elements will vary according to each language.
Keep in mind that LCP is not an accurate measure of how fast your app actually loads for the user.