Cumulative Layout Shift checker
Free for 3 URLs.
Cumulative Layout Shift measures how much visible content moves around unexpectedly while a page is open. It is the reason you tap a link and hit an ad instead, or lose your place in an article. This checker shows CLS from real users and a lab test, and lists the elements that shifted.
The target
A good CLS is 0.1 or less at the 75th percentile. From 0.1 to 0.25 needs improvement. Above 0.25 is poor.
CLS is a unitless score. Each shift is scored by how much of the screen moved and how far it moved. Shifts that happen within 500 ms of a user interaction, such as opening a menu after a tap, do not count, because the user expected them.
Field CLS covers the whole life of the page, including scrolling. Lab CLS only covers the initial load, so it can miss shifts caused by content that loads as you scroll. That is why field CLS is often higher than lab CLS.
The usual causes
Images and video without dimensions
If the browser does not know an image's size, it reserves no space. When the image arrives, everything below jumps. Add width and height attributes, or use CSS aspect-ratio, so the space is held in advance.
Ads, embeds and iframes
Ad slots that collapse or expand, social embeds and video players are frequent offenders. Reserve a fixed minimum height for each slot. If an ad does not fill, keep the space rather than collapsing it, or place ads where a shift does not move the main content.
Late banners and notices
Cookie consent bars, promo bars and app install prompts that push the page down cause large shifts. Overlay them at the bottom of the screen instead of inserting them at the top, or render them with the initial HTML so they are present from the start.
Web fonts
When a web font replaces a fallback font with different metrics, text reflows. Preload key fonts, use font-display optional where suitable, and pick a fallback font with similar size adjustments to reduce the jump.
Content injected by JavaScript
Recommendations, reviews and "related products" blocks inserted above existing content push everything down. Insert them below the fold, or reserve their space.
Animations that change layout
Animating height, width, top or margin forces layout changes. Use transform and opacity for animation instead.
Reading the results
The checker lists shifting elements with their contribution. Fix the largest first. A single unsized hero image or a top banner often accounts for most of the score.
If field CLS is poor but lab CLS is fine, the shifts probably happen after load or during scrolling. Scroll through the page on a phone and watch for content that jumps, especially near ads, lazy-loaded images and infinite scroll.
Why CLS regresses so often
CLS is fragile. A marketing team adds a promo bar. An ad network changes its formats. A plugin update adds a review widget. None of these touch your core code, so they slip past code review. Vitals Clock checks CLS daily and alerts you when it crosses 0.1 or gets worse than its recent median.
Questions
Does CLS affect desktop and mobile differently?
Yes. Layouts differ, and ads or banners are often sized differently on each. Check both.
Is a CLS of 0 realistic?
For many pages, yes. Static content pages with sized images often score 0. Pages with ads usually have a small score even when well built.