Often the website experience becomes frustrating for the users for so many reasons. Cumulative Layout Shift (CLS) is one of the root causes of poor user experience. This metric measures the sudden and annoying layout shifts causing negative impact on the user experiences. 

Have you ever lost the spot while reading an article because of a sudden loading of an image – shifting the text or you accidentally added more items in the cart – resulting in placing the wrong order because you end up clicking on the wrong button due to an unexpected layout shift.

As a customer, you can quit right away and find some other vendor online. But, as a website owner, you cannot afford losing potential customers. 

So, for a good user experience, you should strive to maintain your CLS score less than 0.1. Going beyond this limit for your page performance, you cannot get good rankings in search engine pages. 

What does that mean? The answer rests in Google guidelines and the most critical of these is Core Web Vitals. 

Core Web Vitals : 

Google has recently integrated some new Ranking Factors to provide users a safer and improved website experience. Evolving the future of SEO, especially for mobile platforms, these factors collectively named as Core Web Vitals and includes;

  • Page Loading: Largest Contentful Paint (LCP)
  • Visual stability: Cumulative Layout Shift (CLS)
  • Interactivity: First Input Delay (FID)
    LCP

In this article, we will discuss the technical aspects of CLS, how it impacts SEO, and how to measure, fix and optimize it for a successful website. 

What is CLS? 

CLS is an essential element of Core Web Vitals that measures visual stability of a website. 

Now, what is visual stability?  

It refers to how stable your website appears and denotes the number of unexpected layout changes that happen as the user scrolls through the content.

CLS Score Range: 

Your website’s CLS score should be 0.1 or less to be categorized as “fast and good” by Google.

CLS Score Range

Good CLS Score: 

Good CLS Score

Result of Arhamsoft.com

Poor CLS Score: 

Poor CLS Score

Result of Codastory.com

CLS Affecting SEO : 

Call it layout shift or unstable web layout that moves randomly while the page is loading will not bring any benefit to your search engine rankings. 

In the example below, the user misses the call-to-action button because of the unexpected appearance of an Ad, moving the content downward.

CLS Affecting SEO

 

CLS is a score that quantifies the number of times a web user experiences a sudden shift in the content. Lower the CLS, the better is the user experience and hence improved page performance – resulting in top search page rankings. It’s all because of maintaining a good user experience. 

According to Screaming Frog Research

“47% of the web and 46% of mobile websites have shown good CLS scores.”

Elements Causing CLS : 

Primarily, there are 3 reasons that can cause unexpected movements on a web page. 

Elements Causing CLS

  • Images without Dimensions 
      • Visual content lacking height and width attributes   
  • Dynamically Injected Content
      • Ads
      • Videos 
      • iFrames 
      • Embeds, etc. 
  • Late Loading Web Fonts 
    • FOUT (flash of unstyled text) 
    • FOIT (flash of invisible text)

Late Loading Web Fonts

Tools to Measure CLS 

Two types of tools are used to measure CLS. 

Lab Tools (Synthetic Monitoring) 

  • WebPageTest
  • Lighthouse Audit 
  • Chrome DevTools

Field Tools (Real User Monitoring)  

  • PageSpeed Insights
  • Search Console (Core Web Vitals report)

Advanced Tools : 

  • JavaScript API
  • Web-Vitals Library

The most commonly used tool for CLS detection is Webpage Test. 

Let’s run this synthetic test to get a more clearer view about CLS. 

  • Insert Target URL 
  • Click on Start Test 

Wait for a few seconds and you will get a detailed report.

Webpage Test

  • Go to Web Vitals tab 
  • Click on View as Filmstrip 

Web Vitals tab

  • Select Highlight Layout Shifts
    Highlight Layout Shifts

How to Optimize CLS ? 

  • Add appropriate size attributes to visual content (images, videos, etc.) 
  • Reserve space for slow-loading dynamic content (ads, banners, embeds, etc.) 
  • Apply a text rendering and quick font loading strategy (use CSS descriptors)    

For more details about CLS optimization, check out Google’s Guide

Conclusion: 

Cumulative Layout Shift is a user-centric web performance metric used to determine the visual stability score of a website. Website builders and business owners cannot afford a poor CLS score because it negatively affects the user experience and thereby search engine page rankings of the target web page(s). Multiple tools and strategies are available to measure and optimize CLS, which is necessary to boost SEO. Your website will be marked ‘good’ by Google when its CLS score will be .1 or less.     

ArhamSoft (Pvt) Ltd. is an ISO-certified software development company that helps businesses protect and improve their website’s search ranking signals by fixing all design- and development-related CLS issues.