Cumulative Layout Shift (CLS) poor perfomance, how to fix

Cumulative Layout Shift (CLS) poor perfomance, how to fix

Joujou
Visitor
3 0 1

Hi,

How to fix the Cumulative Layout Shift (CLS) poor performance. 

I've got the canopy theme and I can't quiet understand it. i've got little coding knowledge but can follow instructions. anyone can help please? 

Replies 3 (3)

JohnE10
Shopify Partner
112 14 19

Hi,

 

Hard to tell for sure without looking at code, but the culprit in CLS is usually an image (or multiple images) that doesn't have specified width and height attributes.

 

This causes the browser to not account for the image space while it loads the page, until it eventually gets to the image and finds out about its size, by then the browser has to shift things around a bit to fit the image in.

When you run the performance test, the report might include the images that are missing widht and height attributes. If that's the case try adding those values and see if you CLS gets better.

 

You can find instructions for doing this on YouTube, just do a little digging.

 

Hope that helps.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
Joujou
Visitor
3 0 1

I couldn't find information how to add the attributes to the Canopy code. can you give me an example please?

 

JohnE10
Shopify Partner
112 14 19

Run this search in Youtube: cls add width height

 

Adding the width and height attibutes is universal not specific to the Canopy theme. So when you're searching, don't look for results that are specific to the Canopy theme, otherwise, you might not find a whole lot.

 

If you'd rather not deal with code, look into hiring someone to do it for you if you can. Look in Fiverr, you can get it done pretty cheap.

 

Hope that helps.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com