Core Web Vitals: What is Cumulative Layout Shift?

Google has started judging your website based on a new set of metrics. Core Web Vitals are the way Google measures user experience on your page as it loads.

These are now ranking factors and are used to determine which sites should rank higher than others.

In this article we will explain CLS or Cumulative Layout Shift.

You can take a look at previous articles for FID & LCP

What is Cumulative Layout Shift?

This is the Core Web Vital metric that measures the visual stability and loading behaviour of the elements on the page.

CLS measures the summary of the unexpected shifts or movements on your website with or without the actual interaction of the user doing things like clicking or scrolling.

The intention is to reduce the annoying experience of trying to read something on a page while it keeps shifting or jumping around the page. Or going to click on a button only to have it move at the last moment and you end up on the wrong page or clicking on an ad un-intentionally! This can be bloody frustrating as a user!

What is a good CLS Score?

The ideal score for CLS is Less Than 0.1 (And remember that the mobile score is the one that really matters)

This score is not a speed or time related score, it is based on how far elements move on the screen as it loads and how much of the screen-space the moving elements take up.

Having a score of 0.25+ means that your page is moving around way too much as it loads and causing a poor user experience.

You can check the score for your website on Search Console or Pagespeed Insights to see if you need to improve your score.

What Affects Your CLS?

• Structure of CSS
• Scripts that take longer to load than other elements on the page
• Design and Layout

How to fix your CLS issues?

You can improve your CLS in several ways:

• Keep your website simple, less elements and less moving parts mean less shifting as they load.
• Avoid using themes and page builders with a poor CSS structure that may load things in a messy order.
• Avoid using more than a couple of fonts on the page and stick to web-safe fonts.
• Make sure the dimensions of all elements are defined so they load in the space allowed for them, rather than pushing things around as they load.

If you have trouble with a high CLS score, get us to do a Conversion Audit of your website. We will check every aspect of your website including Speed, Security, Design, etc with corresponding recommendations on how to fix the issues found.