Let’s connect
SEO Library Technical SEO 1 min read

Cumulative Layout Shift (CLS)

In short

Cumulative Layout Shift (CLS) is a Core Web Vital that measures how much visible content unexpectedly moves while a page is in use. A good CLS score is 0.1 or less.

Last reviewed · Iftikhar Qureshi

On this page

What CLS measures#

You’ve probably tried to tap a button just as an ad loaded and pushed it down. That jump is a layout shift. CLS adds up the size of unexpected shifts (how much of the screen moved and how far) during the largest burst of shifting on the page. Shifts that happen within 500 ms of a user’s tap or keypress don’t count, because the user expected a change.

Thresholds#

Good Needs improvement Poor
≤ 0.1 0.1 – 0.25 > 0.25

Common causes#

  • Images, videos and iframes without width and height (or aspect-ratio).
  • Ads, embeds and cookie banners injected above existing content.
  • Web fonts swapping in with very different sizes from the fallback font.
  • Content loaded by JavaScript that pushes the page down (e.g. “related posts” inserted at the top).

How to fix CLS#

  • Always set width and height attributes on images; WordPress does this automatically for media-library images.
  • Reserve space with CSS (min-height or aspect-ratio) for ads and embeds.
  • Show banners as overlays instead of pushing content down.
  • Use font-display: swap with a metric-compatible fallback font, or size-adjust.
  • Animate with transform and opacity, never top, height or margin.

Debug with the Performance panel in Chrome DevTools (look for “Layout shift” entries) and confirm with field data in Search Console. Related: Core Web Vitals, fixing Core Web Vitals on WordPress.

Share this term
SEO Library Technical SEO 1 min read

Cumulative Layout Shift (CLS)

In short

Cumulative Layout Shift (CLS) is a Core Web Vital that measures how much visible content unexpectedly moves while a page is in use. A good CLS score is 0.1 or less.

Last reviewed · Iftikhar Qureshi

On this page

What CLS measures#

You’ve probably tried to tap a button just as an ad loaded and pushed it down. That jump is a layout shift. CLS adds up the size of unexpected shifts (how much of the screen moved and how far) during the largest burst of shifting on the page. Shifts that happen within 500 ms of a user’s tap or keypress don’t count, because the user expected a change.

Thresholds#

Good Needs improvement Poor
≤ 0.1 0.1 – 0.25 > 0.25

Common causes#

  • Images, videos and iframes without width and height (or aspect-ratio).
  • Ads, embeds and cookie banners injected above existing content.
  • Web fonts swapping in with very different sizes from the fallback font.
  • Content loaded by JavaScript that pushes the page down (e.g. “related posts” inserted at the top).

How to fix CLS#

  • Always set width and height attributes on images; WordPress does this automatically for media-library images.
  • Reserve space with CSS (min-height or aspect-ratio) for ads and embeds.
  • Show banners as overlays instead of pushing content down.
  • Use font-display: swap with a metric-compatible fallback font, or size-adjust.
  • Animate with transform and opacity, never top, height or margin.

Debug with the Performance panel in Chrome DevTools (look for “Layout shift” entries) and confirm with field data in Search Console. Related: Core Web Vitals, fixing Core Web Vitals on WordPress.

Share this term