Hi All,
I have been looking at my page speed, and all is relatively okay. But the CLS desktop score is a consistent issue.
This is the page I am looking to improve.
My CLS score is 0.38 which is high.
I can see where this issue is, but am unsure what I need to do to fix this. Any help would be greatly appreciated!
Many thanks in advance
Hi @KrisG2 ,
Good speed scores are very important for better conversion and sales.
Cumulative Layout Shift (CLS) is an important part of the core web vitals. CLS occurs when there is a sudden shift in the layout of contents of the webpage that can be either due to advertisements or any content that is being injected through javascript files or app scripts.
To prevent CLS issues in the store what we can do is, assign** a certain min-height and min-width to the elements beforehand using CSS to the elements that are responsible for causing the layout shifting so that they have already occupied the space and no shifting can occur.
In Shopify, you have three sections: the header, the main content section, and the footer. In your store, the CLS issues occur on the main content of the webpage, which is shifted due to the change in the height of the header as you can see in the videos attached below.
CLS for mobile: https://cdn.shopify.com/s/files/1/0587/5531/7924/files/CLS-issue-Mobile.webm?v=1663143776
CLS for Desktop: https://cdn.shopify.com/s/files/1/0587/5531/7924/files/CLS-issue-Desktop.webm?v=1663143775
To resolve this, you can calculate the height taken by the header on both mobile and desktop and assign the same height to the header using CSS min-height property for both desktop and mobile.
For more information, you can refer to the below link to learn more about CLS issues.
In case you are not much aware of the CSS codes, you should hire a developer to work on this which will ensure that the overall design along with the responsiveness does not get affected while you fix the CLS issues.
All the best,
CedCommerce
