Search code examples
performanceweblayoutseocls

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

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.

Solution

  • 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.