Cumulative Layout Shift (CLS)
A Core Web Vitals metric that scores how much visible content moves unexpectedly while a page is loading and in use.
Content that jumps while loading causes misclicks on links, ads and buttons and makes a site feel unreliable, so CLS is a practical check on whether layouts, ads and embeds are built with reserved space.
A news page scores 0.28 because ad slots and images load without set dimensions. The team adds width and height attributes, reserves a 250 px minimum height for each ad slot and preloads the web font, lowering CLS to 0.06.
CLS does not capture shifts users find helpful or that follow their own input within 500 ms. It can be hard to reproduce in lab tests because many shifts happen after load or depend on scrolling, ads and personalization.
Each layout shift score equals the impact fraction, the share of the viewport affected by unstable elements, multiplied by the distance fraction, the largest move divided by the viewport's largest dimension. Shifts are grouped into session windows with gaps under 1 second and a 5 second maximum, and CLS is the highest window total. Good is 0.1 or less and poor is above 0.25 at the 75th percentile. It is one of the Core Web Vitals.
Experience Design, Systems Architecture
web.dev — Cumulative Layout Shift (CLS) — https://web.dev/articles/cls; MDN Web Docs — CLS (Glossary) — https://developer.mozilla.org/en-US/docs/Glossary/CLS