Cumulative Layout Shift
Data & TrackingAlso: CLS · Layout Shift
Quick definition
Cumulative Layout Shift (CLS) is a Google Core Web Vital that measures how much a page's visible content unexpectedly shifts during loading — when elements move around and disrupt the reading or interaction experience.
Where it shows up in the data
When visible content moves from its initial position during page load. Common causes: images without dimensions, dynamic content injection, web fonts loading late, ads.
Google's three key page experience metrics: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS).
The portion of the viewport affected by a layout shift. A larger shift across more of the screen scores higher (worse).
How far elements move relative to the viewport. Combined with impact fraction to calculate the shift score.
What it actually means
CLS measures visual instability. It captures all the moments during page load where content jumps around unexpectedly — text that shifts down when an image loads, buttons that move when a banner appears, content that repositions when a font loads.
It's scored as a number (lower is better). A score of 0 means nothing moves. Above 0.1 is 'Needs Improvement'. Above 0.25 is 'Poor' and Google treats it as a negative ranking signal.
The user experience impact is real: when content moves mid-interaction, users tap the wrong things, lose their reading position and form a subconscious impression of poor quality. On mobile, this is particularly disruptive.
Every unexpected layout shift is a micro-friction event. Enough of them and you're training users to not trust your page.
How to calculate it
CLS = Sum of (Impact Fraction × Distance Fraction) for all unexpected layout shifts
Worked example. A layout shift affects 50% of the viewport (impact fraction = 0.5) and elements move 10% of the viewport height (distance fraction = 0.1). That shift contributes 0.05 to the CLS score. If this happens multiple times, scores add up.
The Australian context
Australian news sites and content publishers are among the worst CLS offenders due to heavy ad loads. E-commerce sites commonly fail due to lazy-loaded product images. Fixing CLS is a high-leverage improvement for any site with significant organic traffic.
Where people get this wrong
Related terms
Common questions
How do I check my CLS score?
Use Google PageSpeed Insights (pagespeed.web.dev), Lighthouse in Chrome DevTools, or Google Search Console's Core Web Vitals report. The Search Console report shows real user data (field data), which is more representative than lab measurements.
What causes high CLS?
Most commonly: images without width/height attributes, ads or embeds loaded without reserved space, dynamically injected content above existing content, web fonts causing text to reflow (FOUT), and animations that change layout properties.
Does CLS affect my Google ranking?
Yes. CLS is a Core Web Vital and one of Google's Page Experience signals. Poor CLS (above 0.25) can negatively affect organic ranking, particularly in competitive queries where other signals are similar between competing pages.
How do I fix CLS on images?
Always declare explicit width and height attributes on img elements. This lets the browser reserve the correct space before the image loads. Also use CSS aspect-ratio to maintain proportions responsively.
Keep exploring
About New Rebellion
New Rebellion is a marketing intelligence consultancy. We build tools, score Australian businesses on how their marketing actually performs, and publish Debrief every day. This dictionary is part of how we work in the open.
How we think →