Scan a site
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Performance

Cumulative Layout Shift (CLS)

Published: · Updated:

Cumulative Layout Shift (CLS) measures the visual stability of a page: how much elements move around during the page lifecycle without user interaction. Each unexpected shift gets a score based on how large a portion of the screen moved and how far; CLS is the largest sum of shifts within a short time window.

Typical symptoms of high CLS are text "jumping" after a banner loads, buttons escaping from under the cursor, or ads pushing content down. A good score is at most 0.1 at the 75th percentile of real visits.

Most common causes

  • Images and iframes without declared dimensions (width/height or aspect-ratio).
  • Ads, embeds and banners loading above existing content.
  • Web fonts causing text reflow (FOIT/FOUT).
  • Content injected dynamically by JavaScript without reserved space.

How to improve CLS

Always reserve space for media and dynamic content, load web fonts with font-display: optional or swap plus preload, and animate with transform instead of layout-affecting properties. Shifts within 500 ms of a user interaction do not count toward CLS.

Example

An image without dimensions causes layout shift after loading. width, height or aspect-ratio reserve space upfront.

Causes CLS — no dimensions
HTML 
<img src="/summer-promo.jpg" alt="Summer promotion">
Stable layout — reserved space
HTML 
<img src="/summer-promo.jpg" alt="Summer promotion"
     width="1200" height="400" style="aspect-ratio: 3 / 1;">

Sources & further reading

Related terms

Core Web Vitals A set of three Google metrics (LCP, INP, CLS) measuring loading speed, interaction responsiveness and visual stability of a page under real-world conditions.Largest Contentful Paint (LCP) A Core Web Vitals metric measuring the time from page load start until the largest content element is rendered. A good score is ≤ 2.5 s.Interaction to Next Paint (INP) A Core Web Vitals metric measuring the latency between a user interaction (click, tap, key press) and the next screen paint. A good score is ≤ 200 ms.
Back to glossary

Check your site performance

Insight measures Core Web Vitals and ranks bottlenecks by impact.

Scan a site free View a sample report
No credit card Report with date and sources No account required