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

[Joujou]

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? 

[JohnE10]

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.

[Joujou]

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

[JohnE10]

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.