Could someone help me understand why I’m scoring so poorly on Cumulative Layout Shift (CLS)? I’ve checked my app’s UI and don’t see any layout shifts. If anyone can take a look at my app and let me know what might be causing the issue, I’d really appreciate it. I’m currently on a free trial, so there won’t be any charges. Please help!
I suspect it is this, where you show a stubbed out UI but thats in a different layout to when you finish loading.
If you use a skeleton loading page thats in the same format might be easier.
But you can also use the app bridge debugging to check this Config
![Recording 2025-07-17 161253.mp4 [video-to-gif output image]](https://global.discourse-cdn.com/shopifycommunity/original/2X/7/77f1fa213f74c6fdc7f5891be2f3b1d36694b138.gif)
I’m rendering the onboarding component after the first render, based on data fetched from the database that tells me whether the user has completed onboarding. In this case, I want to conditionally show or hide the onboarding component.
If I render a skeleton on the first render and then show the actual onboarding component afterward, will that negatively impact my performance score?
Or, if I render a skeleton initially, and once the data is fetched it turns out the user is already onboarded (so I remove the onboarding component), will that lead to a poor CLS (Cumulative Layout Shift) score?
I think if you can make the layout the same across the onboarding or normal experience that would help in the first instance.
But turn on the web vitals debugging in app bridge and try out your app and the changes and you’ll see the CLS logged out so can try changes ![]()
Hi there, I also facing with the same issue. I hope someone can give a help to improve CLS score.
As @JordanFinners mentioned, how can we do the same layout while we only know after request to database result?
If your page layout doesn’t change dramatically from the database results e.g. the database fills out a list of items for example or some metrics at the top.
You can use the skeleton states components that Shopify provide, you can make these look approximately like the final loaded page and that will help reduce the layout shift to start with Skeleton page — Shopify Polaris React
I’d also check any redirects or similar effects happening in your app. If a normal homepage loads and then its content switches to be onboarding thats going to impact your layout shift.
