Glossary
What is cumulative layout shift (CLS)?
Loading demo...
Cumulative Layout Shift (CLS) measures visual stability - how much content unexpectedly moves during loading. It's one of Google's three Core Web Vitals and affects both UX and search rankings.
Thresholds
| Score | Rating |
|---|---|
| ≤ 0.1 | Good |
| 0.1 - 0.25 | Needs Improvement |
| > 0.25 | Poor |
Aim for a score of 0.1 or less at the 75th percentile of page loads to pass the Google threshold.
How Lighthouse calculates CLS
CLS quantifies unexpected shifts by multiplying impact fraction (viewport affected) by distance fraction (how far elements moved). User-initiated shifts within 500ms of interaction don't count.
Why it matters
Layout shifts cause accidental clicks and lost reading position. 79% of mobile sites pass CLS - it's the best-performing Core Web Vital. Redbus reduced CLS to 0 and saw 80-100% higher conversions.
Common issues
- Images without width/height dimensions
- Ads and embeds without reserved space
- Web fonts causing text reflow
- Dynamically injected content
Measure CLS
- Core Web Vitals Checker - test any page
- Chrome DevTools Performance panel
- Lighthouse audit
- PageSpeed Insights (field data)
- Web Vitals Chrome extension
Did this page help you?
Anything that could be done better? :)
Help us improve this page. You can edit this page on GitHub or provide anonymous feedback below.