CLS (Cumulative Layout Shift) is one of the fun ones inside Core Web Vitals (CWV), and can sometimes be a bit annoying to find exact causes.
Or even exact locations it happens on, as Google can be a little light on the examples sometimes.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift is a score assigned to a page based upon how much the page changes/moves around between the initial render and the final load.
It’s about assets loading in, and then whilst the page continues loading, others load in and push the original content around.
Long story short, it’s when a website will annoying shift just as you’re about to click a button, and then you end up clicking the wrong thing because everything moved.
Does CLS affect SEO?
Yes, CLS very much affects SEO.
It is one of the main elements that make up the Core Web Vitals, which Google is now taking into account as a ranking factor.
Yeah, its one of hundreds of different ranking factors, but when you’re talking about an apples-to-apples comparison with a competitor, I would very much rather know that I have ticked as many boxes as possible to help me rank a site.
Identifying that you have CLS issues
Your first point of call to check for CLS issues, or where you might have spotted them initially, would be in Google Search Console.
On the “Core Web Vitals” tab in GSC, you’ll see some pretty charts that show how you’re doing across your URLs, for both desktop and mobile.
If you then click through to one of the reports, you’ll get a list of the issues that make up the Yellow or Red lines.
If one of them looks like the one below, you’ve got CLS issues;
Clicking on this, Google might give you a couple of URLs examples. Chances are though, it’ll just be a single one, even for hundreds or thousands of URLs.
Google might be saying they’re “Similar” pages, but sometimes they will group completely separate page types in here so don’t fall for their trap.
Now that you’ve identified you’ve got an issue, you need to actually find the root causes of this.
Isolating specific CLS issues by testing CLS
There are a couple of ways of isolating the CLS issues so that you can make a specific request with developers for a patch.
If you just go to them saying “fix CLS” they’ll either go in circles or call you crazy because “everything works fine”.
Testing CLS with GTMetrix
The first method I use is with GTMetrix. A super quick test, and it’s normally something I am running anyway, so can give a good initial overview.
Run your test, and then you’ll get a web vitals to score like the below;
CLS will flag on the right. For this one, green is fine, but it’s enough to use as this example.
This score will probably be different to what Google is flagging, but it’s not about the actual score. It’s about what’s causing that score, so that you can isolate and patch.
If you go to the ‘structure’ tab, you can then expand the ‘avoid large layout shifts’ section, and GTMetrix will break down the main causes for your CLS score.
GTMetrics flags the main offender here, which contributes 99% of the CLS issue.
Funnily enough, this test was run on a webpage talking about CLS here as I was looking for an example site. Definitely a case of, “do what I say and not what I do”. The post is still worth a read though.
In saying that, we can break down this CLS further by just loading the page.
Click that page above, and see if anything loads and then shifts around.
If your internet is fast, you might not notice it.
I used the GTMetrix video reports, so that I can show devs step-by-step what is happening in the load, and help them troubleshoot.
They are loading in the entire content, which pauses for 0.2 of a second, and then loads the image. This image load pushes all the content down.
Google is seeing this massive shift, and would be assigning it a rather high CLS score because of it.
Super easy to fix though!
Testing CLS with the CLS Checker Chrome extension
Firstly, just download the CLS Checker Chrome extension from here.
Using the same site as the GTMetrix test, you just need to load the page, then click the extension and click ‘check the page’.
It flags 2, with the first one possibly being related to the bigger one anyway;
If you click on toggle, it will make everything white, red and green.
White hasn’t moved, red is the original location, and green is the new location.
Sometimes a few different CLS issues will get grouped together here, so just be careful that a score the tool flags isn’t an aggregate view of about 3-4 different issues.
So this chrome extension is flagging that something has happened in that big red zone, which has pushed all the content down.
Safe to assume what has caused this based on the screenshot, but combine this with the GTMetrics video and you can really drill into what’s going on with CLS.
Testing CLS tester with Webvitals.Dev
This one is a tool I discovered recently, and whilst it’s useful to add to the mix it’s not really anything that GTMetrics or the chrome extension don’t cover.
It does bits from both of them, in the single tool though, so might be useful if you’re after a more consolidated view that you can send directly to the development team.
They do include a cool little GIF of what’s moving around on mobile though! Worth checking out, as it might be what you’re after.
Testing CLS with WebPageTest
If your preference is webpagetest, then you can also check CLS issues in there.
Once you’ve run the test, click on the “view” drop-down and navigate to ‘web vitals’.
You can then scroll down and you will see the CLS issues.
Here you can also view a filmstrip, but more importantly, also view the video that’s now included.
The same as how gtmetrix helps with the video, webpagetest can now help you with your CLS issues with their video report too.
How to fix cumulative layout shift
You normally need a dev team to fix CLS issues, so if that’s not the answer you’re expecting – this is awkward…
In saying that, CLS issues are pretty easy to get fixed, once you’ve identified them.
All the developers need to do is make sure that elements don’t move. They get them to not move, but ensure they load in their final position.
This means they need to set fixed heights for elements that have delayed loading, like images.
If an image is going to be 300px high, then make sure there’s a blank space of 300px (plus padding) to fix that image when it loads.
This ensures nothing will move when the image finally loads in.
Steps to fixing CLS issues
- Break down every individual item that you think is attributing to the CLS score based on the CLS testing above
- Show the issues to developers, along with with some pretty pictures, so they better understand
- Politely ask them to fix it
- Deliver cake in the hope it speeds up delivery
It really is that simple.
Your CLS issues should now be gone!
