Avoiding large content layout shifts - Impulse Theme

[Chrayley]

Hi, I have recently moved to using the Impulse theme for my jewellery store. Google Search Console is reporting that c140 of my c700 product pages have a CLS of more than 0.25s - actually around 0.5s. Google classifies these pages as Poor and their search performance may therefore be affected.

PageSpeed Insights reports the following for CLS:

<div class="grid__item medium-up--one-half"> appears to be contributing to the bulk of the CLS time. I'm not a proficient coder so I wondered if anyone has experienced this before and has a suggestion to fix?

Please dont respond with offers of paid help - I already have a preferred developer but wanted to attempt fixing this myself.

[WoodyDev]

The only real solution to most CLS issues is to avoid using multi-columns that stack when it switches to mobile etc, It doesn't massively affect your times from the look of your screenshot. As long as the page loads quickly on desktop and mobile and is responsive I wouldn't be too worried.

Found this guide online which may help if you find any other CLS issues:

https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/#:~:text=Set%20Wi....

[Dynasort]

It's tough to say exactly what's driving the CLS issue on this element without being about to see the whole HTML document (drop a link, happy to take a quick look).
Is the content of the <div> dynamically generated like being filled in by javascript, or does it have a large image that would be fully loaded after most of the HTML content has already rendered?

[Cedcommerce]

Hello @Chrayley,

As you are aware that good speed scores are important for better conversion and sales.
Cumulative Layout Shift (CLS) is an important part of the core web vitals. CLS happens when there is a sudden shift in the layout of contents of the webpage that can be either due to promotional advertisements or any content that is being injected through javascript files or app scripts.

To prevent CLS issues in the store you can “assign” a certain min-height and min-width to the elements beforehand using CSS  to the elements that are responsible for causing the layout shift so that they already occupy the space and stop it from further shifting.

For more information, you can refer to the below link to learn more about CLS issues. 

https://web.dev/cls/

Note - In case you are not much aware of the CSS codes, you should tell your 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. 

Let us know if need more help with your Shopify store.

Thanks & Regards,
Team CedCommerce.