How To Decrease CLS (Cumulative Layout Shifts) On A Live Website?

- 1 answer

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.



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

enter image description here

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.