How can I reduce Cumulative Layout Shift?

Store Design
,
1

Hi! I have recently been having issues with Cumulative Layout Shift on my product pages (https://nuvocollection.com/products/antonella-flower-claw-in-burgundy-bliss)

I have looking at Google Page Speed Insights in order to determine what the problems are, which lead me to define the image sizes in my code. However, the changes I have made seem to have had no impact on my CLS score.

I would really appreciate any help with this as I have no idea what to do know.

If I can provide any additional details that would help in finding an answer please let me know!

Kind regards

Theo

2

Hi @Theo_Bee

I am from Mageplaza - Shopify solution expert.

I noticed that the CLS score on your mobile site needs improvement. Please take a look at the screenshot below.

2025-04-26_09-12.png
2025-04-26_09-12.png1898×993 166 KB

As shown in the analysis image, the element rich-text__wrapper rich-text__wrapper–left doesn’t have a fixed height. Therefore, please set a height for this element.

Open the base.css file and add the following code:

@media only screen and (max-width: 480px){
    .rich-text__wrapper.rich-text__wrapper--left{
        height: 50px;
    }
}

Save the file and check the result.

Please let me know if it works as expected!

Best regards!

3

Hello @Theo_Bee , I analyzed your website using Google PageSpeed Insights, and the report indicates your CLS score is good but your LCP and performance score are the worst. This is a common challenge on product pages due to render-blocking resources, Unoptimized Images and excessive JavaScript execution time.

1. Remove Unused JavaScript

go to Online Store > Edit Code, and clean up:

  • theme.liquid (look for scripts inside or before )
  • snippets/ or sections/ folders for leftover app logic

2. Load Scripts Asynchronously

Ensure that non-critical scripts don’t block the page rendering. Use the async attribute for any third-party scripts to ensure they load in parallel without delaying the page load:

  1. Reserve Space for Dynamic Content
  • Widgets like reviews, delivery date messages, or product tabs often load after the initial page paint and cause layout shifts.
    Here is how you can fix this:- Wrap such widgets inside a container with a min-height.

.reviews-widget {

min-height: 100px;

}

4. Minimize Render-Blocking Resources

  • Large CSS or JavaScript files that block rendering slow down LCP.

    • Embed Critical CSS
    • Inline essential CSS for above-the-fold content in theme.liquid:

    .product-hero {

    display: flex;

    align-items: center;

    max-width: 800px;

    }

After making these changes, I recommend rechecking your website’s performance using Google PageSpeed Insights. and get more actionable suggestions.

Alternatively, if you do not want to invest much time on optimizing yourself, you can try our speed optimization shopify app called Website Speedy, a Shopify app that automates minimizing JavaScript execution, optimizing font delivery and your Core Web Vitals scores .
It takes 5 minutes to set up with 14-day free trial.

(Disclaimer: We are the developer of this tool and are happy to answer any questions you may have.)