What is CLS (Cumulative Layout Shift) and how to eliminate layout jumps

CLS (Cumulative Layout Shift) is the Core Web Vitals metric for visual stability: how much page elements move on their own while the page loads. It is the number behind that moment when you go to click and the button jumps somewhere else.

What is a good CLS?

CLS has no unit — it is a score. Google's ranges, at the 75th percentile of visits, are:

• Good: up to 0.1.
• Needs improvement: between 0.1 and 0.25.
• Poor: above 0.25.

What causes layout shift

• Images and videos without declared width and height — the browser reserves no space, so content pushes the rest when it arrives.
• Ads, banners and embeds that load late and take up space that wasn't there.
• Fonts that change size on load (FOUT/FOIT).
• Content injected by JavaScript above what the user was already reading.

How to eliminate CLS

• Always set width and height (or aspect-ratio) on images, videos and iframes.
• Reserve space for banners and ads with a fixed-size container.
• Preload key fonts and use fallback metrics to avoid the size jump.
• Avoid inserting content above what is already visible; insert below or reserve the space first.

A high CLS costs conversions: forms submitted by mistake, the wrong product added to the cart, the feeling of a "broken" site. Visual stability is trust — and trust is what moves a visitor forward.

How to measure your site's CLS

First Class Dev's Speed X-Ray measures CLS alongside the other Core Web Vitals, for free and in seconds, using Google's official dataset.