CLS (Cumulative Layout Shift)

Definition

Cumulative Layout Shift (CLS) measures the total of all unexpected layout shifts that occur during the entire lifespan of a page. A layout shift happens when a visible element changes its position from one rendered frame to the next without user interaction — for example, when an ad loads and pushes content down. A good CLS score is 0.1 or less. Common causes include images without dimensions, dynamically injected content, web fonts causing FOIT/FOUT, and ads or embeds without reserved space. Fix CLS by always setting width/height attributes on images and videos, reserving space for dynamic content, and preloading fonts.