Cumulative Layout ShiftCLS

Cumulative Layout Shift quantifies how much visible content moves unexpectedly while a page loads. It is a unitless score derived from how large a shifting element is and how far it moves. The good threshold is 0.1 or less. High CLS is the experience of trying to tap a button that jumps as an ad or image loads above it.

The most common causes are images and embeds without reserved dimensions, ads and iframes that inject layout late, web fonts that cause a flash of restyled text, and content inserted above existing content after load. The fixes are concrete: always set width and height (or aspect-ratio) on images and video, reserve space for ads and embeds, preload key fonts and use size-adjust descriptors to match fallback metrics, and avoid inserting content above what the user is already reading.

CLS is the cheapest Core Web Vital to fix well, because the remediations are mostly markup and CSS discipline rather than deep performance engineering. It is also the one most likely to regress silently when a new component or third-party script lands, so it belongs in regression monitoring, not just a one-time pass.