In today’s blog post, you’ll learn more about Cumulative Layout Shift (also known as CLS) and why this is important for SEO. Let’s dive into what CLS means, how to identify CLS issues, and how to improve your results to achieve a better user experience, higher rankings, and increased organic traffic.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is one of the three Core Web Vitals that Google uses to assess a website’s performance and user experience. CLS measures how much content on a webpage shifts around while the page is loading, which can cause unwanted effects like users accidentally clicking the wrong button or losing their place in a block of text.
Why is CLS Important?
To provide users with a smooth and positive browsing experience, Google wants to ensure that web pages load quickly and are easy to navigate. CLS is one of the key metrics used to determine whether a website meets these expectations.
A high CLS can lead to a frustrating user experience and, as a result, a high bounce rate. In the long run, poor CLS scores can negatively impact a site’s or page’s ability to rank for relevant keywords—something that can be detrimental to its organic visibility.
How to easily identify pages with high CLS
An easy way to detect pages with CLS issues—that is, pages with a high CLS score—is to log in to Google Search Console and click on “Core Web Vitals” in the left-hand menu. If any pages on your site are flagged by Google (on desktop, mobile, or both), click through the reports to check whether the issue is related to CLS.
If you don’t have access to Google Search Console, another great option is to use the free tool PageSpeed Insights, which allows you to analyze individual pages on your site.
How can you improve your CLS?
There are several ways to optimize for better CLS. The goal is always the same: to minimize unexpected shifts in a page’s layout.
One of the most effective actions is to define dimensions for images and other media elements in your code. This prevents the layout from adjusting as the elements load. In other words, it’s about reserving space on the page for an image (for example) before it actually starts loading.
The same applies to loading items like ad banners, embedded videos, and other common sources of unwanted layout shifts.
You can read more in-depth about optimizing CLS here: https://web.dev/optimize-cls/
Martin Ek
SEO specialist
Martin works as an SEO specialist at our Örnsköldsvik office