Cumulative Layout Shift (CLS)
Also known as: CLS
A Core Web Vitals metric that measures how much a page's visible content unexpectedly shifts position while loading. It is scored as the sum of unexpected layout movements, and a good score is 0.1 or less. It captures visual stability, a key part of perceived page quality.
Key Takeaways
- Cumulative Layout Shift measures how much visible content unexpectedly moves while a page loads.
- It is one of the three Core Web Vitals and captures visual stability.
- A good CLS score is 0.1 or less, measured from real-user field data.
- Images and ads without reserved space are the most common causes of layout shift.
- Setting explicit width and height on media prevents most shifts.
How It Works
CLS scores visual stability by adding up unexpected movements of visible elements during page load. Each shift is weighted by how much of the screen moved and how far it traveled, and those values accumulate into a single score. Lower is better, with 0.1 or less considered good.
Shifts usually happen when the browser does not know how much space an element needs until it arrives. An image without dimensions, a late-loading ad, or a web font swap can push content down after a user has already started reading or reaching for a button. Reserving space with explicit width and height, or using CSS aspect ratios, keeps the layout stable.
CLS is one pillar of Core Web Vitals, sitting beside Largest Contentful Paint, which measures loading, and Interaction to Next Paint, which measures responsiveness. All three are assessed together from real-user data to reflect true page quality.
Why It Matters
Layout shifts frustrate users, causing misclicks when buttons jump, and CLS is a confirmed ranking signal within Core Web Vitals. A stable layout improves both user experience and search performance.
Example
A news site loads its article text quickly, but a banner ad and a large hero image both arrive a moment later without reserved space, shoving the paragraph a reader started reading down the screen. The team sets explicit dimensions on the image and reserves a fixed slot for the ad. The Cumulative Layout Shift score drops into the good range.
Common Mistake
Loading images and ads without reserved width and height, or injecting banners and fonts above existing content after render. Both push the page around and inflate the score. Always set explicit dimensions.
Frequently Asked Questions
What is a good Cumulative Layout Shift score?
A CLS of 0.1 or less is considered good, between 0.1 and 0.25 needs improvement, and above 0.25 is poor. Scores come from real-user field data over the assessment window.
What causes a high CLS score?
Common causes include images and ads without reserved width and height, banners injected above existing content, and web fonts that swap after render. Each pushes content around and inflates the score.
How do I fix Cumulative Layout Shift?
Set explicit width and height or aspect-ratio on images and video, reserve space for ads and embeds, preload fonts to reduce swap, and avoid inserting content above what a user is already viewing.
Is CLS a ranking factor?
Yes. CLS is one of the three Core Web Vitals that feed Google's page experience signals. It is one input among many, so a stable layout helps rankings but does not guarantee them.