What Is CLS? Cumulative Layout Shift Explained
DICTIONARY · SEO

What Is CLS?

CLS, Cumulative Layout Shift, measures how much the content of a page moves around unexpectedly while it loads.

In plain English

It is the metric for the experience of reaching for a button and having the page jump so you tap something else. Every unexpected shift adds to the score.

The causes are almost always the same three: images without dimensions, fonts swapping, and content injected above what is already rendered.

What to know

What is measured
How much visible content moves, weighted by how much of the screen it affects.
Target
Under 0.1.
Causes
Images and iframes with no width and height, late-loading fonts, injected banners and ads.
Fixes
Set dimensions on every media element, reserve space for anything injected.

Why it matters

CLS is usually the cheapest vital to fix and the most annoying to users. Setting width and height attributes on images often resolves most of it in an afternoon.

Common mistakes

×Images and embeds without explicit dimensions.
×Cookie banners and promo bars injected above existing content.
×Web fonts loading without a size-adjusted fallback.
×Assuming a shift below the fold does not count. It counts if the user scrolls to it.

FAQs

What is a good CLS?

Under 0.1 for most visits.

Do banners always cause shift?

Only if they push content. Overlaying or reserving space avoids it.

WRITTEN BY TARIQ SALLAM
Marketing Consultant. Entrepreneur. Content Creator.

I'm a marketing consultant, entrepreneur and content creator. I help businesses grow through practical marketing, websites, SEO, content and AI.

More About Tariq →