Cumulative Layout Shift (CLS)
TL;DR
CLS measures how much a page's visual layout unexpectedly shifts during load — a score safeguarding visual stability.
Cumulative Layout Shift measures unexpected element shifts during load. Everyone knows it: you try to click a button, an ad loads in, you miss. CLS < 0.1 is good, > 0.25 poor. CLS directly affects conversion and user satisfaction.
Example
A blog has CLS 0.38 because the hero image loads without width/height. Adding width="800" height="400" on all img tags brings CLS to 0.04.
Frequently asked questions
What are the biggest causes of CLS?
Images without dimensions, dynamically loaded ads, webfonts restacking text (FOIT/FOUT), and iframes without reserved space.
Related terms
Further reading
- → Our service: SEO