Cumulative Layout Shift (CLS)

A Core Web Vital that measures how much page content unexpectedly moves during loading — good is ≤0.1.

CLS quantifies visual instability — the unexpected shifting of page elements as the page loads. A score of 0 means no shifting; higher is worse. Good is ≤0.1, needs improvement is 0.1–0.25, and poor is >0.25. It is calculated as the sum of all individual layout shift scores, where each score is the fraction of viewport area affected multiplied by the distance elements moved.

Common causes of high CLS: images without explicit width and height attributes (the browser doesn't know the space to reserve), ads or embeds that inject themselves after content loads, web fonts causing FOUT (Flash of Unstyled Text) that reflows text, and dynamically injected content (banners, notifications, cookie consent bars) that push existing content down.

Fixes: always set explicit width and height on images and iframes, use font-display: optional or preload critical fonts, reserve space for ads and embeds with min-height CSS, and avoid inserting content above existing content after page load.