---
title: CLS Explained: Cumulative Layout Shift (and how to fix it)
description: CLS measures the most annoying thing on the web: the page jumping around as it loads. Here's what it is, what counts as good, and how to stop your layout from dancing.
canonical: https://watchfor.io/blog/cls-explained
---

[All posts](/blog) [Performance](/blog/category/performance) Jan 27, 2026 · 3 min read · WatchFor Team

# CLS Explained: Cumulative Layout Shift (and how to fix it)

CLS measures the most annoying thing on the web: the page jumping around as it loads. Here's what it is, what counts as good, and how to stop your layout from dancing.

You've felt it: you go to tap a button, an ad or image loads above it, everything jumps down, and your tap lands on the wrong thing. That maddening jumpiness has a name and a number — CLS — and it's one of the three [Core Web Vitals](/blog/core-web-vitals-explained). Here's how to tame it.

## What CLS measures

CLS (Cumulative Layout Shift) measures how much the page's content unexpectedly moves around while it loads. Every time something already on screen shifts position, that's a layout shift, and CLS adds them up into a score.

Unlike the other vitals, CLS isn't measured in seconds — it's a unitless score. Lower is better; zero means nothing moved.

## What counts as good

CLS Verdict

≤ 0.1 Good

0.1 – 0.25 Needs improvement

Over 0.25 Poor

Aim for 0.1 or below . Above that, users start noticing the jumpiness.

## What causes layout shift

CLS almost always comes from elements that take up space after the page has already started rendering:

Cause The shift it creates

Images without dimensions The image loads and shoves content down

Ads / embeds An ad slot fills in and pushes everything around

Web fonts Text re-flows when a custom font swaps in

Injected banners A cookie/notification bar appears at the top

Dynamic content Content inserted above what the user is reading

## How to fix it

The golden rule: reserve the space before the content arrives.

- Always set width and height on images and video (or use aspect-ratio ). Then the browser reserves the right space, and the image fills it without shoving anything.

- Reserve space for ads and embeds. Give ad slots a fixed size up front so filling them doesn't move the page.

- Handle fonts carefully. Use font-display settings and size-matched fallbacks so swapping to a custom font doesn't re-flow text. (See [web font performance](/blog/web-font-performance).)

- Insert dynamic content below the fold or in reserved space — never shove it above what someone's already reading.

- Avoid banners that push content. If you must show one, overlay it or reserve its space.

The one-line fix for most CLS: give everything that loads late a reserved size . Images, ads, embeds — if the browser knows how big they'll be, nothing jumps when they arrive.

## Why it matters beyond annoyance

CLS isn't just irritating — it causes real mistakes (tapping the wrong button, mis-clicks on the wrong link) and it's a [Google ranking signal](/blog/core-web-vitals-explained). A jumpy page frustrates users and hurts SEO.

## The bottom line

In one line

What How much the layout unexpectedly moves while loading.

Good 0.1 or below.

Cause Elements that take space after render — images, ads, fonts.

Fix Reserve space up front (dimensions, aspect-ratio , sized slots).

CLS is the web's most fixable annoyance: reserve space for anything that loads late, and the page stops dancing. Your users stop mis-tapping, and your Core Web Vitals go green.

Related: [Core Web Vitals explained](/blog/core-web-vitals-explained), [web font performance](/blog/web-font-performance); test with the free [Core Web Vitals checker](/core-web-vitals-checker).

[#performance](/blog/tag/performance)[#core-web-vitals](/blog/tag/core-web-vitals)[#seo](/blog/tag/seo)

## Monitor your Core Web Vitals

Run real-browser audits on a schedule and catch LCP, CLS and TBT regressions before they cost you rankings and conversions.

[Learn more](/core-web-vitals-monitoring)[Start free](/auth/sign-up)

Share this article

---

Canonical page: https://watchfor.io/blog/cls-explained · Site guide: https://watchfor.io/llms.txt