How can I reduce Cumulative Layout Shift?

[Theo_Bee]

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

[mageplaza-cs]

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.

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!