Google Releases Video on Improving Page Experience via Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a key metric of your Page Experience score. This video is a great introduction to CLS.
SIA Team
October 20, 2021

Yesterday, on Google’s Search Central YouTube channel, a video was published, titled, How to Improve Cumulative Layout Shift for a Better Page Experience.

Cumulative Layout Shift–or CLS, as I’ll refer to it from now on–is a part of Page Experience, which is an overall metric that underlies the Page Experience Update.

Basically, Google wants each page of your site to convey a good user experience, or Page Experience. 

(That said, user experience, as a concept, is broader than Page Experience, meaning that it can include things that are not part of Page Experience. But that’s beyond the scope of this news item.)

What Is CLS?

The best way to describe it, as described in the opening of the video, is to use an experience I’m sure you’ve had: 

You go to a web page (usually on a mobile device), and as you start reading (or viewing), elements of the page shift. 

This can be a bit jarring, because let’s suppose you were just about to click on something, but then…the link moves.

The layout shifted, and the cumulative shifting of the page’s layout is…yes…CLS.

CLS is a page-level metric, so each page on your site may have a different CLS score. 

Now, you may be wondering if the process of improving CLS can be tedious, because you may want to improve the CLS of more than one page.

Yes, that’s true, which is why I would think that the more time-efficient approach to this is to use a platform (like a well-coded, light WordPress theme if you’re using WordPress) that optimizes several technical aspects of your site. 

This way, each page’s CLS is as optimized as it can be (given what it has to work with).  

This video gives a number of helpful tips and procedures for minimizing (and hopefully, eliminating) CLS.

What’s A Good CLS Score? (0…Or, At Least Aim for 0.1)

Ideally, 0, but, as mentioned in the video, it’s 0.1: “…a great number to aim for is [for] 75% or more of the views a page has, has a CLS of 0.1 or less. If you’re below that, you’re doing great.” 

So, in other words, 0.1. 

Just aim for a consistent 0.1 or below, and that should (hopefully) be sufficient. 

How to Eliminate, or (More Likely, Reduce) CLS

Just to be sure, the video is a more detailed and comprehensive source of information on this, but I do have a bit of a technical understanding of HTML, so I’d like to offer a few tips:

First, Determine Your CLS Score

First, just as when you’re aiming for goals in life, you have to know where you are now if you want to get somewhere. 

Likewise, you have to know your current CLS score. 

CLS can be measured in the field, and in the lab. Field measurement tools are ones that measure according to a real user’s experience, whereas lab tools measure within a synthetic environment. 

The tools listed below were found at this URL: https://web.dev/cls/#how-to-measure-cls

Field Tools

Lab Tools

Second, Consider Your Options

Will you decide to get rid of any interstitial ads, banners, or other elements that may affect the layout of your page(s)? (These may cause the layout to shift, especially if they load after the layout is first loaded.)

Have you thought of the hints given in the video, and made a list of how you (and your team, if you have one) would like to approach this?

Third, Play! 

Maybe make a test page (you may want to no-index it, since it’s only a test page), and play around. Try certain things, and see what you find.  

Take iterative steps to see how you progress. 

Fourth, Take Action, and Decide

You made a list of options, and then did some experiments. Now, it’s time to take action.

Yes, this can seem intimidating, but if you have a site with many pages, just start by improving the ones that are most important. 

You can also improve your content creation process, so that, from now on, your new content will have better CLS scores.

I wish you success. 

Source: Google Search Central YouTube channel