Cumulative Layout Shift (CLS) measures visual stability by tracking how much page content moves around unexpectedly while loading. High CLS means elements jump around, causing users to click wrong buttons or lose their reading position.
What is CLS?
CLS quantifies unexpected layout shifts that occur during a page's entire lifespan. A layout shift happens when a visible element changes its position from one frame to the next without user interaction.
Common causes of layout shifts:
- Images without width and height attributes
- Ads, embeds, or iframes without reserved space
- Web fonts loading and swapping (FOUT/FOIT)
- injected above existing content
- Late-loading
Google considers CLS part of because layout shifts directly frustrate users. Someone about to click a link might accidentally click an ad that just loaded above it.
How CLS is Calculated
CLS uses a unitless score combining two factors:
Layout Shift Score = Impact Fraction × Distance Fraction
Impact Fraction: Percentage of the viewport affected by the shift. Distance Fraction: How far elements moved relative to the viewport.
The final CLS is the sum of all individual layout shift scores that occur without user input.
CLS Thresholds
- Good: under 0.1
- Needs improvement: 0.1-0.25
- Poor: over 0.25
How to Interpret CLS
CLS only counts unexpected shifts. Shifts triggered by user actions (clicking, typing) don't count. This means:
- Accordion opening after click: doesn't count
- Image carousel sliding: doesn't count
- Ad banner pushing content down on load: counts
- Font swap causing text reflow: counts
Check different page types. Product pages with many images might have different CLS than your homepage. Category pages with lazy-loaded products need special attention.
Mobile vs desktop matters. Smaller viewports mean the same absolute shift creates a larger relative score.
Fixing Common CLS Issues
- Always specify width and height on images and videos
- Reserve space for ads and embeds with aspect-ratio or min-height
- Use font-display: swap with preloaded fonts
- Avoid inserting content above existing content
- Use CSS transforms instead of properties that trigger layout
