What is Cumulative Layout Shift (CLS)? Understanding Google’s Core Web Vital Elementary.

This image show CLS measurement thresholds.

One of Google’s newest ranking factors is Core Web Vitals. Core Web Vitals represents three different metrics that look at and analyze your website’s user experience. In this article let’s talk about one of those three metrics Cumulative Layout Shift or CLS. Cumulative Layout Shift is the amount that the page layout shifts during the loading phase. The score is rated from 0-1, where zero means no shifting at all happening and 1 means that almost around the page everything is moving, The real key idea within the cumulative layout shift is that we’re trying to measure visual stability,

So the real key question to address is if elements on a page shift or move around in a way that presents a problem for users? and the key phrase there is a problem for the users

Is Movement Or Shifting Always Bad? 

Shifting is fine if it happens in response to a user’s actions, let’s say that somebody clicks on a menu button on your WordPress Website and a Flyout menu appears listing more options well, that’s okay that doesn’t factor into the CLS score because that layout shift was expected cumulative layout shift is really trying to look at and understand unexpected layout shift that occurs especially unexpected layout shift that could really disrupt something about how people are using that website.

So let’s go to an example and really see what a layout shift looks like?

This image show screen by screen layout shift.

you can see on this page the ad appears at the top of the screen pushing everything down but the ad goes away causing everything to shift back up you see this shifting more clearly if we take that video screen by screen and you can really see that image moves up and down quite a bit while the page is loading and as a result so does the text and everything else on the page and that kind of shifting is a problem if you were actually trying to read that article while all that shifting was going on you would have a hard time doing so and that’s the kind of shifting that we want to avoid and that’s the kind of shifting that CLS is really trying to measure. 

CLS Measurement Thresholds

CLS breaks out into three different buckets 

  1. Good: A good CLS Score is less than0. 1
  2. Needs Improvement: Need Improvement score is somewhere between0. 1 to 0.25
  3. Poor: A Poor CLS Score is more than 0.25

So a lower CLS Score is always better for your visitors. Now that’s easy enough to understand that we’re aiming to get this metric closer to Zero, But what does this metric tell us the other core web vital metrics are measured in milliseconds or seconds something that we can more easily understand so I want to give you just a little detail about the formula that calculates the cumulative layout shift score so that you can have a little bit intuition around what this number really means.

Two things that go into the CLS Score.

  1. Impact Fraction: the impact fraction measures how much space a shifting element uses on the screen. So if you have a 300-pixel item that’s shifting around the screen that’s going to cause a bigger impact than a 100-pixel item shifting around the screen. So if you have a higher CLS Score that probably means you have a big item moving around the screen.
  2. Distance Fraction: The distance fraction measures how much that shifting element moves, If something only moves one or two pixels that are not such a big deal, if something moves 50 pixels or 100 pixels that causes a lot of other elements to move quite a bit on the screen as well presenting a bigger problem

How Do you know if you have a CLS Issue?

  1.  Visually to watch your website as it loads, do you see any movement or shifting happen? One of the best ways to tell is visually to watch your website as it loads, as your website is loading do you see items moving around the page do you see some shifting occurring I would recommend you check this is different connection speeds, sometimes you won’t see the sifting on a higher connection but you will see it on a slower connection speed if you see that shifting occurring then you know have a problem to fix. 
  2. Test your website using Page Speed Insights: Along with visually watching our website, we can also test our website out using page speed insights, We can also check Google Search Console under Core Web Vitals report, and we can also use Google Chrome dev tools

How to fix CLS?

This image show how to fix CLS.

So now we’ve run the reports and we know that we have a CLS issue present. What do we do? How do we fix CLS Problems?

  1. Can you adjust the load order to avoid shifting?  The first thing that you can do is you can try to adjust the load order to avoid shifting. Think back to that example we were looking where the ad loaded in and it caused everything to move down the page that happened because the ad loaded last when that ad loaded in it needed room so it made room by pushing everything else out of the way instead we can try and get that ad to load first that way it shows up then everything else below it shows up that way it doesn’t have anything to push down the page when that ad shows up, of course, it’s not always an option especially something like an ad that’s coming from a third party you don’t have a lot of control over when that loads in if you can’t adjust the load order to avoid shifting 
  2. Can you change so the shifting occurs in response to a visitor’s action? You can also look to see if you can change the shifting so that way it occurs in response to a visitor’s action for example if you have a large image that shows up on your website and that’s causing shifting to occur and you can’t change something about the load order to make that image load up faster maybe you can put that image behind a show hide functionality for your visitors if they click on the show button they see the image if they hide it they don’t see the image and when they click to show and hide sure things might shift around the page but now that’s in response to a visitor’s actions which makes the shifting expected instead of unexpected reducing your CLS Score.
  3. Can you remove the shifting element altogether?  The other thing you might want to do is remove the shifting element altogether of course removing the shifting element altogether isn’t an option if that shifting element is something like an ad chance are you need that ad in order to generate revenue for your business.
  4. Placeholders: Given all that one of the best ways to fix CLS issues is to put in placeholders and we can see this in this example page that we’ve been looking at yeah the ad of the top cause shifting to occur but the ad on the side did not and we can see why when the page initially loads in there’s already space reserved for that ad and because that space is already reserved for the ad nothing else is there when the ad shows up it simply fills in that empty space doesn’t cause anything else to shift around the page and likely the same thing can be done for the ad at the top of the page as well create that empty space and then fill it instead of allowing that element to load in and cause shifting to occur on your website

Main Takeaway

You want to reduce unexpected shifting as much as possible on your website you want to create a website design that’s more visually stable and on that CLS measurement you want to aim for a score of 0.1 or less

You can also read about: How to Fix LCP Score?

1 Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s