Definition
CLS (Cumulative Layout Shift) measures the sum of all unexpected layout shifts that occur during the entire lifespan of a page. A shift occurs when a visible element changes position without user action -- for example, when an image loads late and pushes text downward. Google recommends a CLS below 0.1 for a good user experience. Common causes include images without reserved dimensions, late-loading web fonts, dynamically injected ads or banners, and iframes without specified dimensions. To fix a high CLS, set width and height attributes on images, use font-display: swap for fonts, and reserve space for dynamically loaded elements using fixed-size CSS containers.
Key Points
- Google's recommended threshold: below 0.1
- Main causes: images, ads, or fonts loaded without reserved space
- Fixable by setting media dimensions and reserving space for dynamic elements
Practical Examples
Images without dimensions
An article with images lacking width/height attributes generates a CLS of 0.45. Adding the dimensions brings CLS down to 0.02.
Ad banner
A banner ad inserted at the top of the page after 2 seconds causes a CLS of 0.35. Reserving a fixed space eliminates this shift.
Frequently Asked Questions
Use the Performance tab in Chrome DevTools, the Web Vitals extension, or the Experience report in Search Console.
Animations using transform and opacity do not cause CLS. Animating top, left, width, or height can generate layout shifts.
Go Further with LemmiLink
Discover how LemmiLink can help you put these SEO concepts into practice.
Last updated: 2026-02-07