Cumulative Layout Shift (CLS) - What It Is & How to Improve It On Your Website

Have you ever been just about to click a link on a website, when everything on the page shifts and you click on an ad instead? This is called a layout shift, or when an element on your page changes its position or size, thus affecting the content around it. Let’s figure out how these shifts impact the user experience, and how we can improve them!

The Rundown

Cumulative Layout Shift (CLS) is a metric to quantify how many times webpage users experience layout shifts as a page loads or is interacted with. Google doesn’t like unexpected layout shifts either, so they created this as one of three Core Web Vitals introduced by Google Search to improve user experiences. Layout shifts happen for a variety of reasons; the content on your page may be loading asynchronously, or a third-party widget may be resizing itself as the page loads. As you may already be understanding, the lower your CLS score, the better the user experience is. 

You should aim to have CLS scores of 0.1 or less. Anything above 0.25 is considered poor, and you should strongly consider optimizing these web pages that underperform.

For mobile users, layout shifts on a smaller screen create bigger movements. Thus, there are separate CLS scores for both mobile and desktop views to ensure both are working at a high performance level. 

How Do We Measure CLS?

The formula for a layout shift score is:

Layout Shift Score = Impact Fraction x Distance Fraction 

Instead of calculating these elements yourself, simply diagnose your site using Google’s Core Web Vitals report in Google Search Console. You will be able to see what mobile and desktop URLs are poor, needs improvement, or good.

How Can We Improve It?

Now that you understand the basis behind CLS, let’s explore the number of factors that may drastically affect your score.

Dimensionless Images

Dimensionless images have no specific width or height, so the browser does not hold any space for these images on the page. After the images load, they may affect the format of the page and cause those bad layout shifts that move contents from their original positions. The simple fix to this issue? Always use images with a specified width and height! 

Fonts

Websites most often use custom fonts rather than default browser fonts. In doing this, significant layout shifts can occur throughout the page as the custom font loads. Try preloading your fonts so that font assets will have a higher priority in page rendering. Among other tactics, you can also make sure to host fonts from your own domain to avoid the delay from third-party domains. Unfortunately, custom fonts are essential for branding and design, so this specific layout shift may not be able to be completely eliminated. 

Embedded Content

Embedding content on your page allows you to import and display content from other sites, like Instagram Posts, Youtube videos, and more. However, like dimensionless images and ads, a lot of these widgets do not include accurate dimensions in advance. Try using the same method we outlined when reserving space for ads, but in reverse. Load your embed content on your web page and inspect it to get the final height and width. Then, make sure you allocate space for these dimensions to minimize or eliminate any layout shifts. 

What Does This All Mean for SEO?

Cumulative Layout Shift does impact SEO, as Google wants users to visit the sites that have good user experience. If your web page doesn’t have a good CLS score, it may influence keyword rankings and lower the performance of your overall SEO. In fact, higher CLS scores are correlated with higher bounce rates and shorter session lengths, limiting the potential for users to return to your site in the future. 

CLS accounts for 5% of the weighted metrics in Google Lighthouse scoring. While it is not nearly as important as other factors that impact optimization, you still want to create pages that promote positive, stable, and smooth user experience. Make sure to keep this key metric in mind as you develop and reconfigure your website for best SEO performance!