CLS

Cumulative Layout Shift

ChromeFirefoxSafari
Core Web Vital

Measures the total amount of unexpected layout shifts that occur during the entire lifespan of a webpage.Learn more

How CLS is Calculated
  1. 1
    Layout Shift Detection

    Browser monitors when visible elements change position between frames

  2. 2
    Impact Fraction

    Measures portion of viewport affected by unstable elements

  3. 3
    Distance Fraction

    Measures distance elements moved relative to viewport

  4. 4
    Session Windows

    Groups shifts into sessions, reports maximum window value

CLS Formula: Impact Fraction × Distance Fraction

Good≤ 0.1
Needs Improvement0.1 - 0.25
Poor> 0.25
Layout Shift Demo

Watch content blocks appear and cause major page layout shifts. Each block pushes the entire page content down.

Blocks added: 0/5

Note: Large content blocks are appearing above this section, causing this entire page to shift down significantly.

Real-world impact

Unexpected layout shifts frustrate users and can cause accidental clicks. Good visual stability is crucial for user experience.

CLS Demo - Cumulative Layout Shift | WebVitals