Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much visible page content unexpectedly moves while a page is loading or being used. A good CLS score is 0.1 or less. A score between 0.1 and 0.25 needs improvement, and anything above 0.25 is considered poor.
Why Cumulative Layout Shift matters for SEO and conversions
CLS matters because unexpected movement creates a frustrating user experience. When buttons, forms, product images, or navigation links shift position, visitors can click the wrong thing, lose their place, or abandon the page entirely. For SEO, CLS is important because Google uses page experience signals, including Core Web Vitals, to help evaluate usability. While CLS alone will not determine rankings, poor layout stability can hurt engagement, trust, and conversion rates.
For businesses, the commercial impact is often more immediate than the ranking impact. On service pages, a shifting contact form can reduce leads. On ecommerce pages, moving “Add to Cart” buttons can cause misclicks and lost sales. On content sites, unstable ads and images can increase bounce rates.
What causes CLS
Images, videos, and embeds without set dimensions
If media loads after the surrounding text, the page can suddenly expand and push content down. Setting width and height attributes or reserving space with CSS helps prevent this.
Ads, banners, and popups injected above content
Promotional elements that appear late in the load process often force the page to reflow. This is a common cause of poor CLS on publisher and lead generation sites.
Web fonts and dynamic content
When a custom font replaces a fallback font, text can resize and shift. Personalized modules, cookie notices, and chat widgets can also move visible elements if space is not reserved in advance.
Practical example and how to improve CLS
Imagine a product page where the main image loads slowly and no image dimensions are defined. The product title and price appear first, then jump downward when the image finally loads. A shopper tries to click the buy button but hits another link because the layout moved. That is a CLS problem.
To fix it, define image dimensions in the HTML, reserve space for reviews and promotional banners, avoid inserting new elements above existing content, and preload important assets carefully. If you use third-party tools, test how they affect layout on mobile and desktop.
Simple improvement checklist
Set explicit size attributes for images and video, reserve space for ads and embeds, keep banners from pushing content after load, use stable font loading strategies, and review templates in PageSpeed Insights or Lighthouse to spot shifting elements quickly.