What is CLS (Cumulative Layout Shift)?

Turkish: CLS

CLS measures how much unexpected layout movement disrupts visual stability while a page loads, as part of Core Web Vitals.

What is CLS?

CLS (Cumulative Layout Shift) is a Core Web Vitals metric that measures the impact of unexpected layout movement while a page loads. If a user is about to tap a button and a late ad or image pushes the page down, that movement contributes to CLS.

CLS considers not only that something moved, but also how much of the viewport was affected. A large section jumping suddenly creates a higher score than a small text adjustment. A good target is usually 0.1 or lower.

What Causes It?

Images without dimensions, late-loading ad slots, dynamic banners, font swaps, notifications inserted at the top, and embeds without reserved space are common causes. The problem often comes from not reserving layout space early enough, not from JavaScript alone.

Prevention includes setting image width-height or aspect-ratio values, reserving space for ads and iframes, tuning font loading, and avoiding components that push existing content down without user action.

Within Core Web Vitals, CLS represents visual stability. LCP measures how quickly the largest content element appears; together they describe different parts of page experience.