Hello, I’m implementing complementary products block in my theme and I notice that it takes a second when pages loads before complementary products are loaded and rendered, which causes layout to shift which worsen my CWV scores, so I’m trying to do any workaround, I checked dawn theme but even in dawn theme layout shifting happens when it renders after page load… this can’t be accepted in my site, do you have any idea how to solve this or any workaround to at least know if we have complementary products for current product so I can render a placeholder until request is finished?
Topic summary
Issue: The “Pairs well with” (complementary products) block in a Shopify theme loads via JavaScript after initial page render, causing a noticeable delay (~1s) and a significant layout shift, which harms Core Web Vitals (CWV), specifically Cumulative Layout Shift (CLS).
Context: The problem occurs even in Shopify’s Dawn theme, indicating it’s not theme-specific. Google Search Console flags the CLS as an SEO issue.
Requests:
- A method to prevent or minimize CLS, ideally by reserving space or using a placeholder/skeleton.
- A way to detect in advance whether complementary products exist for the current product so a placeholder can be rendered while the request completes.
Status: No solution provided yet; the thread is seeking workarounds or fixes and remains open.
Hi! I have the same issue. The complimentary block will be populated by JS after page load, which results in a huge CLS shift. Google shows this as an issue in the search console. Anybody knows how to solve this?