Cumulative Layout Shift (CLS)

Cumulative Layout Shift is a metric that measures the amount of unexpected layout shifts of visual page content during the loading of a webpage. It is one of the Core Web Vitals, a set of metrics introduced by Google to evaluate the user experience of a website.

CLS is calculated by the sum of all individual layout shifts that occur during the loading of a page.

Importance in SEO

CLS is important for SEO because it directly impacts the user experience. Pages with a high CLS can lead to a poor user experience, as content may jump around while the page loads, making it difficult for users to interact with the page.

Google considers CLS as a ranking factor, meaning that websites with better CLS scores are more likely to rank higher in search results.


Imagine a user is trying to click on a button on a webpage, but before they can do so, the button shifts down due to an ad or a social media widget loading below it. This would be considered a layout shift and would contribute to the CLS score.


  • Optimize the loading order of page elements to minimize layout shifts.
  • Use the loading="lazy" attribute for images and iframes to ensure they don’t shift the content below them.
  • Prevent any new content from being added to the page that could cause a layout shift after the initial load.


  • Load large elements like ads or videos above the fold without using lazy loading.
  • Allow third-party content to cause unexpected layout shifts.
  • Ignore CLS in your development and testing processes; it should be part of your commitment to user experience.
  • Fail to monitor and improve CLS over time; it’s an ongoing process to maintain a good CLS score.