Cumulative Layout Shift (CLS) An In-Depth Look

If you have yet to get started with the Core Web Vitals, 2022 is the perfect time to do so. These vitals, which play an integral role in the new, all-important page experience ranking factor, have been growing in prevalence since they were introduced in May 2020.

There are 3 main Core Web Vitals:

• Largest Contentful Paint (LCP)The largest contentful paint is a measure of the render time taken for the largest visible contentful area of a page to load.
• First Input Delay (FID)First Input Delay measures the time between the user's initial input and when they see the result of that action on screen.
• Cumulative Layout Shift (CLS)Cumulative Layout Shift (CLS) is a Google Core Web Vitals performance issue that can be detected by Google PageSpeed Insights..

The following in-depth look will focus on the latter vital, Cumulative Layout Shift. As well as explaining what is Cumulative Layout Shift, we’ll describe how it impacts the user experience, its role in search engine optimization, how to improve CLS, and more.

What is CLS?

As the name hints at, Cumulative Layout Shift accounts for website elements that unexpectedly shift around a webpage’s layout. Have you ever been on a webpage, reading the article in front of you, and the text suddenly moves to a different area of the page? Or maybe you were about to click a button, but just as you do, it moves, and you click on a different link?

Instances like these are where a website’s CLS is faltering. Elements that can shift and dance around the page include images, videos, fonts, buttons, contact forms, and other types of content. Below is Google’s description of this Core Web Vital:

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

If your website is suffering from a poor CLS score, it’s essential you improve this aspect – otherwise your visitors are going to be left with a poor user experience.

How does CLS impact user experience?

As you would expect, CLS has the ability to significantly impact user experience. Simply having an element shift on a button can cause someone to click on the wrong link, sending them to the wrong webpage, and leading to a lot of unnecessary hassle on their end. It might not seem like much overall, but this frustration can seriously hamper their experience while on your site.

In this day and age, users don’t expect to wait around for a webpage to load and for all the elements to fall into the right place. They expect instant results. As a result, if your pages fail to achieve a high-quality CLS score, with elements shifting around before settling down, this will upset your visitors – and Google.

What is a good CLS score?

No guessing is required to know what a good CLS score entails. Below is a summary of Google’s guidelines for CLS score:

• Good = 0.1 score or less
• Needs improvement = Between 0.1 and 0.25 score
• Poor = Over 0.25 score

Note, you can use our  Core Web Vitals Checker tool to measure your website’s CLS score.

Below is how Google explains the calculation behind the CLS score:

To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction (both defined below): layout shift score = impact fraction * distance fraction

A “good” CLS score is the aim – with Google recommending you keep it below 0.1. It is possible to achieve a CLS score of 0 with pages that are fully static. If layout shifts are required, the score will naturally go up.

A “needs improvement” score is a solid sign you can ultimately reach the “good” grade, which is necessary for ultimately achieving Google’s approval. If your score is “poor”, however, and your CLS is over 0.25, you’ll need to take the necessary steps to improve your page’s layout shift – more on that below.

How is CLS measured?

As mentioned above, the following formula is used to measure CLS:

layout shift score = impact fraction * distance fraction

Let’s take a closer look at the 2 factors which come into play for CLS.

Impact fraction

For the impact fraction to be calculated, it is first necessary for the impact region to be calculated.

The impact region is the general area that layout shift affects. Google identifies each element that is impacted, combining the original area with its layout shifted counterpart, and ultimately distinguishing the impact region.

A rectangle is the typical shape of the impact region. However, the shape can be more complex if you use multiple layout shifts that are both vertical and horizontal.

Going back to the impact fraction, this is calculated with the following formula:

area of impact region / area of viewport = impact fraction

For clarification, the viewport represents the visible part of the page on the screen that doesn’t require any scrolling down.

Distance fraction

The first release of CLS only included the aforementioned impact fraction. Yet Google realized this single CLS calculation had a flaw: big movements are more disconcerting than small ones, and big elements may only make a slight movement as part of impact fraction.

The result: the creation of distance fraction.

For the distance fraction to be calculated, it’s necessary to first work out the move distance.

As for what the move distance is, this measures the layout shift’s distance before and after the act. Essentially, it supplies the answer to how much an element moved after it shifted.

The following calculation is how distance fraction is worked out:

max move distance / viewport height = distance fraction

How can CLS be improved?

You know what CLS is, what a good score is, and how this element is calculated. Now you might want an answer to the following question: How to improve my CLS Web Core Vital successfully?

The good news is that, if you need to fix Core Web Vitals, there are various steps you can take. This is also the case with CLS. With that in mind, here are a few important steps to improve your CLS score if required:

Add dimensions for images and videos

Dimensions, aka height and width elements, can help when it comes to your images and videos. While height/width elements used to be commonplace when this media was incorporated back in the day, the introduction of responsive web designResponsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience. changed up how images and videos were added to a website.

However, this approach has caused a problem with CLS: it causes unnecessary shifts due to the media having a dynamic approach, rather than a fixed one. If you include height and width attributes to your images/videos, this can prevent them from unnecessarily bouncing around the page.

Avoid adding content on top of existing content

It is highly recommended you avoid including content on top of any existing content on a webpage. The only reason for this to occur is if it’s done as a response to a user’s interactions.

When you avoid this situation, it ensures that any layout shifts made only happen when expected.

A caution with web-based fonts

Did you know that if you use downloaded web fonts, this can cause Flash of Invisible Text? For the uninitiated, FOIT can lead to blank space appearing before the downloaded font is displayed. Simply put, this isn’t good for your efforts to lower the impact of CLS.

Fortunately, it’s not too difficult to change the situation with web-based fonts. In the link used for the web font download, simply add a <link rel=preload> to preload the font files and download them as a priority asset.

How does CLS impact SEO?

With Google introducing the Core Web Vitals, and with user expectation in mind, it has never been more important for your website to function seamlessly. As for CLS, if you’ve got elements like text and images veering across the page before settling down, this creates a poor first impression. Not only will it displease users, but also the search engine giant – particularly with these new parameters in place.

In our informed opinion, any SEO auditing process should check Core Web Vitals in this day and age. However, what type of impact does CLS have on your site’s SEO ranking?

At this formative stage for Core Web Vitals and page experience, the impact is not clear. Certain data points to it having a minimal effect, while other data suggests it can cause a significant shift in a site’s search ranking.

What we do know, however, is you need to begin to take CLS seriously right now if you haven’t done so already. The signs point to Core Web Vitals playing a greater role in the near future, which means your site needs to be prepared. It’s not just about SEO, either. You want to deliver the best user experience for your site visitors and lowering layout shift is one small – yet valuable – way of accomplishing that goal.

In conclusion

CLS is already important, but this is only the start. Its importance is only going to grow from an SEO point of view – and you need to factor it into your plans as soon as possible. Are you intimidated by the technical side of CLS? If so, our managed SEO service can remove these worries, and our marketing experts can put together a full-service plan that covers all of the Core Web Vitals.

For an assortment of free resources, including in-depth guides like this one about the other Core Web Vitals, make sure you use our Knowledge Hub.