seo Question posted in
Some basic information to get you started with this can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search