What Is Cumulative Layout Shift (CLS)

Short answer

Cumulative Layout Shift measures unexpected movement of visible page elements. It quantifies visual stability by tracking how much content shifts during loading.

How it works

The browser calculates a layout shift score based on the impact fraction and distance fraction. Ads, images without dimensions, and late-loading fonts commonly cause shifts.

Example

A user clicks a button, but an ad banner loads above it, pushing the button down. The user accidentally clicks the ad. This contributes to a poor CLS score.

Why it matters

Visual stability is crucial for user trust. A good CLS score is under 0.1. High CLS leads to mis-clicks and a perceived lack of polish.