What Is Cumulative Layout Shift
What a Layout Shift Is
Cumulative Layout Shift (CLS) measures how much visible content moves unexpectedly while a page loads or is used. A layout shift happens when an element already on screen changes position, for example when a banner appears above the text you are reading and pushes it down.
Not every movement counts. Changes that follow a user action, such as a click that opens a menu, are excluded because they are expected. The aim is to capture surprising movement, which causes misclicks and lost reading position. The Core Web Vitals include CLS as one of their three measures.
How the CLS Score Is Calculated
Each layout shift has two parts. The impact fraction is the share of the viewport affected by the moving content. The distance fraction is how far that content moves, relative to the viewport. Multiplying the two gives the score for that shift.
Shifts are grouped into session windows: bursts of shifts that happen close together, with each window lasting at most five seconds. The page's CLS is the score of the largest session window in the visit. Taking the largest burst rather than adding every shift means a long visit is not penalised for many small movements spread across time, while a cluster of shifts still counts heavily.
Common Causes of Layout Shifts
- Images and videos without dimensions, where the browser reserves no space until the file arrives.
- Ads and embeds that load late and push content aside, often because their slot size was not reserved in advance.
- Content inserted above existing text, such as a notice bar, a cookie banner or late-loaded comments.
- Web fonts that swap in with different sizing, changing line lengths and heights.
The fix for each cause differs, but the principle is the same: reserve space before the content arrives. Font effects are described in the web fonts topic, and image sizing in the responsive images topic.
Frequently asked questions
What is a good CLS score?
A CLS score of 0.1 or less is good. Between 0.1 and 0.25 it needs improvement, and above 0.25 it is poor. It is judged at the 75th percentile of page views in field data, so most visits need to be stable, not just the average visit.
Can an animation cause a layout shift?
Animations that move elements with transform properties do not cause layout shifts, because they do not change the page layout. Animations of properties such as top, left, width or height do change layout and can be counted. Using transform-based movement keeps the page stable while still looking lively.