Glossary entry clsMetrics

CLS (Cumulative Layout Shift)

Sum of unexpected layout shifts during page lifetime. Under 0.1 is good.

Filed under: Metrics

Definition

Cumulative Layout Shift quantifies how much visible content jumps unexpectedly during page load. Each shift is scored by impact fraction × distance fraction; the cumulative score is the sum. Common causes: images without dimensions, late-loaded ads, font swap (FOUT/FOIT). Good < 0.1; needs improvement 0.1–0.25; poor > 0.25.

Example

A banner ad loading after 2s and pushing the article down by 200px = high CLS. Reserving the ad slot's height in CSS = zero CLS.

How to optimize

Always set width + height on images/videos. Reserve ad slot dimensions. Use font-display: optional or swap with size-adjust. Test in Chrome DevTools Performance panel.

Check a page against a real AI answer

Claude’s live answer to your buyer’s question, its sources, your readiness score and the fixes. Free, no signup, about half a minute.

Run a free audit