Overview
This page is the atomic definition. The deep-dive lives at core-web-vitals.
Definition
CLS (Cumulative Layout Shift) is the Core Web Vital that measures unexpected movement of visible page elements during load and session. It sums the largest layout-shift bursts and reports the 75th percentile across real users. The “good” threshold is under 0.1; “needs improvement” is 0.1 to 0.25; “poor” is 0.25 or more. A shift counts only when the user did not trigger it.
When it applies
Use CLS as the layout-stability budget for any page that loads images, ads, embeds, or web fonts. It is the metric most sensitive to missing width/height attributes and late-inserted content.
Example
A blog post measures CLS 0.32 because images load without dimensions and an ad slot pushes the text down. Adding width="800" height="400" to every <img> and reserving a fixed-height container for the ad drops CLS to 0.04.
Related concepts
- core-web-vitals - the umbrella metric set CLS belongs to.
- html - the image and iframe rules that fix most CLS regressions.
- css -
aspect-ratioandcontent-visibilitypatterns that prevent shifts. - lcp - the loading metric, scored on a separate budget.
- inp - the responsiveness metric, scored on a separate budget.
Citing this term
See CLS (Cumulative Layout Shift) (llmbestpractices.com/glossary/cls).