Definition

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that quantifies unexpected movement of visible page content, summed as a unitless score from individual layout-shift events not preceded by a user interaction.

CLS is calculated from the largest burst of layout shifts that occur within a five-second session window during the page's lifetime. Google's thresholds at the 75th percentile of field data are "good" ≤0.1, "needs improvement" ≤0.25, and "poor" >0.25. Common causes include images and ads without explicit dimensions, dynamically injected content above existing elements, and web fonts that swap once loaded.

Examples

• Late-loading ad pushes content down

  A blog page injects an ad after 800ms, pushing the article body down by 150 pixels. Each visit logs a layout shift contributing roughly 0.18 to CLS — over the "good" threshold. Reserving the ad slot's height in CSS removes the shift and CLS falls to 0.04.

Sources

• web.dev — Cumulative Layout Shift (CLS)

Related terms

• Core Web Vitals
  A set of three Google metrics that measure real-world page experience: loading speed, interactivity and visual stability.
• Largest Contentful Paint
  A Core Web Vitals metric measuring how long the largest visible content element on a page takes to render after loading begins.

Where QueryCatch uses this

• Page Optimisation