How to Decrease CLS (Cumulative Layout Shifts) on a live website?

Question

as we all know Google is rolling out new Core Web Vitals Update next month, I am worried about my website WishesPlus which is having a CLS of 0.33 in Red, which is bad for rankings on Search Engine. Please help me solve this issue as soon as possible.

Answer 1

Cumulative layout shift (CLS) is how much content on the page moves about during the load.

layout shift score = impact fraction * distance fraction

You will see this type of error in PageSpeed Insights

Solution to reduce CLS:

Simply include width and height attributes in image tags.

<img src="banner.png" width="256" height="256" alt="verz banner" />

You can also specify your hight & width dimension on CSS.

img{ width: 100% height: auto; }

Note: Allow the browser to select what size each image is If you use srcset attribute to define images.

You can also use CSS property object-fit: contain for a feasible solution with no layout shift.

Answer 2

That's true Cumulative layout shift (CLS) is how much content on the page try to adjust itself till the load complete (Includes HTML, CSS and Javascript).

Tips:

You can block the javascript files which manage your content layout from the browser and see what's the difference between having that and blocking that. Whatever difference you find can lead you an increase in CLS.

Use transform property instead of changing the height, width, top, right, bottom, or left properties to adjust the content or move elements around the port.

If your CLS is below 0.1 it's good and if it's above 0.25 is very bad.