Avoiding large content layout shifts - Impulse Theme

Technical Q&A

Topic summary

Major issue: High Cumulative Layout Shift (CLS) on Shopify’s Impulse theme product pages. About 140 of ~700 pages show CLS ≈0.5 (>0.25 threshold), flagged as “Poor” in Google Search Console, risking SEO. A PageSpeed Insights screenshot points to the element .grid__item.medium-up–one-half as a key contributor.

Key guidance:

  • Reduce layout shifts by avoiding multi-column layouts that collapse/stack on mobile.
  • Diagnose whether the problematic div is populated dynamically via JavaScript or contains large, late-loading images; sharing a page link/HTML is requested for precise analysis.
  • Reserve space for content: set explicit width/height or min-width/min-height in CSS for images and other elements (including app-injected content/ads) to prevent shifts.

Resources shared:

  • Smashing Magazine guide on fixing CLS.
  • Google’s web.dev/cls documentation.

Decisions/next steps:

  • No fix yet. Suggested actions are to provide a URL for review, verify dynamic content or large images, and implement CSS to pre-allocate space while maintaining responsiveness (potentially with developer help).

Status: Open/ongoing; resolution pending further diagnostics and CSS adjustments.

Summarized with AI on February 13. AI used: gpt-5.
1

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:

Chrayley_0-1657536288138.png
Chrayley_0-1657536288138.png930×704 177 KB

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.

2

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%20Width%20And%20Heights%20On,attributes%20set%20on%20your%20images.

3

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

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?

4

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.

1 Like