Skip to main content
Performance

Cumulative Layout Shift

CLS

Portrait of Robert Klimant, co-founder of Roelu Studio
Robert KlimantCo-founder

What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) is the Core Web Vital that measures how much visible content moves around the screen as a page loads. Each unexpected shift contributes to a score. Google's passing threshold is under 0.1. Between 0.1 and 0.25 needs improvement; over 0.25 is poor. CLS is unitless — it's a calculated value based on the percentage of the viewport that shifts and the distance the content moves.

Why it matters

CLS is the metric most people feel and few people can name. You go to tap a button, the page shifts, you tap an ad instead. That is CLS. The causes are almost always avoidable: an image without dimensions, a font that swaps after load, a cookie banner that drops in late, an ad slot that resizes. Every one of those is a developer choice — usually a lazy one. A CLS over 0.1 means your team shipped the site without measuring it. On checkout pages or contact forms, even a tiny shift kills conversion. Fix it before you spend another dollar on traffic.

How it works

The browser watches every visible element and records each unexpected position change as a layout shift. The score is the sum of those shifts, weighted by how much of the viewport moved. To fix CLS, you reserve space for every asset before it loads: set explicit width and height on images and videos, define dimensions for embeds and ads, preload web fonts so they don't swap, and avoid injecting content above existing content after the page renders. Modern frameworks like Next.js handle most of this automatically when images are used correctly. A well-built site lands at 0.00 — yes, zero — for CLS on most pages.

Related terms

  • Core Web Vitals

    Performance

    Google's three benchmark metrics that measure how fast a page loads, how quickly it responds to clicks, and how stable the layout feels as it renders — used in…

  • Interaction to Next Paint

    Performance

    The Core Web Vital that measures how quickly a page responds when a visitor clicks, taps, or types — Google's official replacement for the older First Input…

  • Largest Contentful Paint

    Performance

    The Core Web Vital that measures how long it takes for the biggest visible element on a page — usually the hero image or main headline — to finish loading in…

  • Page Speed

    Performance

    How quickly a web page loads and becomes usable for a visitor — measured in seconds and milliseconds, and treated by Google as a confirmed ranking signal…

  • PageSpeed Insights

    Performance

    Google's free tool for measuring how fast a page loads on mobile and desktop, combining real-user field data with lab tests and offering specific, actionable…

  • Image Optimization

    Performance

    Compressing, resizing, and serving images in modern formats so pages load faster without losing visible quality — usually the single biggest performance win…

  • Responsive Design

    Design & UX

    Designing a website so it adapts to every screen size — phone, tablet, laptop, ultrawide monitor — instead of forcing one fixed layout that breaks the moment a…