Cumulative Layout Shift (CLS)
TL;DR
CLS measures how much page content unexpectedly jumps around during loading. A score under 0.1 is good — nobody likes clicking a button that suddenly moves.
Explain Simply
Imagine reading a book and every few seconds the paragraphs rearrange themselves. That's CLS — when images, ads, and text shift around on screen while the page loads.
CLS measures total unexpected layout shift throughout a page's lifetime. Layout shift occurs when elements change position without user interaction. Good threshold: ≤0.1, needs improvement: 0.1-0.25, poor: >0.25.
Common causes: images without explicit width/height attributes, dynamically injected ads or banners, web fonts causing FOIT/FOUT (flash of invisible/unstyled text), dynamically loaded content above existing content, and iframes without reserved space.
Fixes: always set width and height on images and videos (or use CSS aspect-ratio), reserve space for ad slots, use font-display: swap with size-adjust, load dynamic content below the viewport or with placeholder space, and use contain-intrinsic-size for lazy-loaded content.
⚡Why It Matters
Layout shifts frustrate users — especially when reading or clicking. Images without dimensions, injected ads, and late-loading fonts are common causes. Google data shows that reducing CLS from poor to good increases pages-per-session by 15%.
🔍How AiSEO Checks
AiSEO measures CLS via PageSpeed and CrUX, identifies elements causing the largest layout shifts, and suggests adding width/height to images and reserving ad space.
AiSEO Score Impact
Up to 2 points in the Performance category (15% of total score)
Fix Difficulty
Editor: N/A | Developer: Easy | AI Agent: Easy