Cumulative Layout Shift (CLS)
A Core Web Vital metric that measures the total of all unexpected layout shifts that occur during a page's entire lifespan, quantifying how much visible content moves around unexpectedly.
CLS calculates a score based on the fraction of the viewport affected by layout shifts and the distance elements move. A score below 0.1 is considered 'good.' Layout shifts are only counted as unexpected if they are not triggered by user interaction (clicking, typing, etc.).
Common causes of poor CLS include: images or ads without explicit width and height dimensions, dynamically injected content above existing content (like cookie banners or notification bars), web fonts causing text reflow (FOIT/FOUT), and late-loading third-party embeds that push content down.
Why It Matters for QA Teams
Layout shifts cause users to click the wrong button, lose their reading position, or become frustrated. QA teams should monitor CLS because it directly measures a class of visual bugs that are easy to introduce and hard to catch manually.
Example
A user is about to click 'Add to Cart' when a late-loading promotional banner pushes the button down by 100 pixels. The user accidentally clicks 'Share on Facebook' instead. The CLS score for this page is 0.32, well above the 0.1 threshold. The fix: reserve space for the banner using a fixed-height container.