What is CLS (Cumulative Layout Shift)?
A Core Web Vital measuring unexpected layout shifts during page load. Target: under 0.1 for a 'good' score. Affects everything from ad placement to image dimensions.
Cumulative Layout Shift (CLS) measures the sum of all unexpected layout shifts that happen while a page is loading. Layout shifts feel like content jumps around — you go to click a button, but an ad loads above it and your tap hits the wrong thing. Google's thresholds: Good ≤ 0.1, Needs Improvement 0.1-0.25, Poor > 0.25. The score is calculated as the impact fraction (how much of the viewport shifted) times the distance fraction (how far it moved). Top causes: images without width/height attributes (browser doesn't know how much space to reserve), ads or embeds loaded after page render, fonts that load late and shift text, dynamically injected DOM elements above existing content. Fixes: always set width and height on images and iframes, reserve space for ads with min-height, use font-display: optional, avoid injecting content above the fold dynamically.