Cumulative Layout Shift (CLS)
CLS scores how much visible content moves unexpectedly while a page is open — the button that jumps just as you tap it. It's unitless; 0.1 or less is good.
Layout shift score, calculated
Impact fraction 0.44 area touched before + after (dotted)
× Distance fraction 0.19 move ÷ viewport height
= Shift score 0.082
CLS 0.082 good
Tip: even a small banner that pushes a tall block barely a quarter of the screen already scores around 0.1. Reserving its space up front makes the score 0.
How CLS works
Each unexpected layout shift gets a score: impact fraction × distance fraction. Impact fraction is how much of the viewport the moving element touches before and after the shift combined; distance fraction is how far it moved, relative to the viewport's larger dimension.
Shifts are grouped into "session windows": shifts less than 1 second apart, up to a 5-second window. CLS is the score of the worst window, not the sum over the whole visit.
Shifts within 500 ms of a tap, click or key press are expected and excluded. Scrolling and CSS transform animations do not count.
Common causes of a poor CLS
- Images and embeds without dimensions
- Without width/height (or aspect-ratio) the browser reserves no space, then pushes content down when the file arrives.
- Ads, banners and cookie bars inserted above content
- Anything injected at the top after first paint moves everything below it.
- Web fonts swapping
- A fallback font with different metrics reflows text when the web font loads.
- Late-loading content
- Recommendations, reviews or "related posts" that appear above existing content.
How to improve CLS
- Always set width and height attributes on <img> and <video>, or use CSS aspect-ratio.
- Reserve space for ads and embeds with a min-height container.
- Insert banners and notices as overlays or below the fold, not above existing content.
- Match fallback font metrics with size-adjust / ascent-override, or preload the web font.
- Animate with transform instead of top/left/height.
Our speed test counts <img> tags without width and height — the most common CLS cause you can spot in the HTML.
Enter your field numbers in the Core Web Vitals checker to see whether you pass.
CLS questions
What is a good CLS score?
0.1 or less is good, between 0.1 and 0.25 needs improvement and above 0.25 is poor, at the 75th percentile of page visits.
How is CLS calculated?
For each shift: layout shift score = impact fraction × distance fraction. Shifts are grouped into session windows (gaps under 1 s, maximum 5 s), and CLS is the largest window total.
Do layout shifts after a click count?
No. Shifts that happen within 500 milliseconds of a discrete user input (tap, click, key press) have hadRecentInput set and are excluded from CLS.
Why do I see CLS in the field but not in Lighthouse?
Lighthouse only measures during page load without scrolling or interacting. Real visitors scroll, which triggers lazy content, ads and infinite lists that can shift layout later in the visit.