CLS (Cumulative Layout Shift) is a Core Web Vitals metric that scores how much visible content shifts unexpectedly while a page is loading and being used. A good score is 0.1 or less; anything above 0.25 is considered poor.
Why it matters
Layout shifts cause misclicks, lost reading position, and a generally unstable feel that frustrates visitors. Because CLS is part of Google's user-experience signals, a poor score can also weaken ranking on competitive queries. Unlike pure load-time metrics, CLS captures real friction that visitors notice every time a button moves under their finger.
How to fix
- Always set explicit
widthandheight(oraspect-ratio) on images, videos, and iframes so the browser can reserve space. - Reserve space for ad slots, embeds, and dynamically injected banners with min-height containers.
- Avoid inserting new DOM above existing content unless it is in response to a user interaction.
- Preload critical fonts and use
font-display: optionalorswapcarefully to limit FOIT/FOUT shifts. - Animate layout with
transformandopacityrather than properties that trigger reflow. - Verify in the field with RUM and in the lab with Lighthouse. Web.dev publishes the current thresholds in its CLS guide.