How to reduce CLS issue on shopify store, tried lot of options but no success

[yuvrajjain]

It behaves very random, some days it was 300+ and some days it is 100+ some days 50+, how it actually calculate and how can we fix all these urls?

[yuvrajjain]

Can you guide some points here? we can connect on skype later.

[Adarsh2030]

Hello @yuvrajjain 

Hope you are doing well!

Improve CLS for my Shopify Store

To start optimizing your Shopify store’s CLS, first, figure out where the problem is the worst by checking your Core Web Vitals in Search Console.

Once you've identified which pages have the worst CLS, you can use PageSpeed Insights to figure out what elements on the page you're analyzing are causing layout shifts. Enter the URL of the page into the box and hit Analyze. When it loads, it should provide a large report for the page. Look for Avoid large layout shifts listed under the Diagnostics area (halfway down the page).

After you determine what's causing the layout shift, your next step will be to figure out why these elements are shifting content and how to prevent it.

Oftentimes, to improve CLS on your site we recommend: 

1. Ensuring that you specify the dimensions of images and other block items on your site. Including the dimensions for images, div tags, and other blocks of content allows the browser to plot the layout even if elements are slow to load into it.
   
   
2. Make sure there aren't any banners (like free shipping banners), alerts, or popups that move around on the visitor's screen. Even if these things don't shift content, we've found if they move, they will trigger layout shift.

For images, a simple trick we’ve found to solve CLS problems caused by them is to ensure the width and height attributes are set. For other things, like content that is loaded by JavaScript, we recommend giving the container that the content will show up in fixed dimensions, so it doesn't grow and cause content to shift around.

For example, let’s take product review stars. Review systems are common apps for Shopify, which load dynamically with JavaScript. When product stars load on the product page, they typically shift the page slightly. This can be fixed by simply giving a large enough width and height to whatever contains the stars so it doesn’t expand once the stars load.

Let me know if you have any queries.

Thank you