What is CLS (Cumulative Layout Shift)?
Answer
CLS (Cumulative Layout Shift) measures visual stability — the sum of all unexpected layout shift scores during a page's lifecycle. A layout shift occurs when a visible element changes position from one rendered frame to the next unexpectedly. Good: <0.1. Needs improvement: 0.1–0.25. Poor: >0.25. Layout shift score = impact fraction × distance fraction. Common causes: images and embeds without explicit width and height attributes (browser doesn't reserve space), ads and embeds injected above content, web fonts causing FOUT (Flash of Unstyled Text) that resizes text, content dynamically inserted above existing content. Fixes: always set width and height on images (or use CSS aspect-ratio), reserve space for ads with min-height, use font-display: optional to avoid layout shifts from font swapping, avoid inserting content above the fold after load. CLS is most noticed by users on mobile when they accidentally tap the wrong thing because the page shifted.