Guides

CLS, short for Cumulative Layout Shift, is one of Google's Core Web Vitals, the metrics Google uses to score how good a page feels to use. CLS measures visual stability: as a page loads, do the elements stay where they were placed, or do they jump around? A low CLS means the layout is steady and predictable; a high CLS means content shifts under your eyes while you are trying to read a line or tap a button, which is one of the most frustrating things a web page can do.

How CLS is measured and scored

The name describes what it captures. It is cumulative because it adds up the layout shifts that happen during the life of the page, and a layout shift is any time a visible element changes its position from one rendered frame to the next without you asking for it. Movement you triggered is not counted: clicking a link, expanding an accordion or opening a menu is expected and excluded. An image that loads late and pushes the paragraph you were reading down the screen is not expected, and that is exactly what CLS is built to catch.

CLS is one of three Core Web Vitals, alongside Largest Contentful Paint, which measures loading, and Interaction to Next Paint, which measures responsiveness. CLS is the one that covers visual stability. A page can load quickly and respond instantly and still score poorly on CLS if things move around after they first appear, so the three metrics really do measure different qualities and a page needs to pass all of them.

Unlike a time-based metric such as LCP or INP, CLS is a unitless score rather than a number of milliseconds. Each individual shift is scored by multiplying two fractions: the impact fraction, how much of the viewport the moving elements affected, and the distance fraction, how far they moved relative to the viewport. Those shift scores are combined into the value Google reports, so both how much moved and how far it moved contribute to the result.

Google's thresholds

Google's thresholds, measured at the 75th percentile of real page loads, are simple to remember. A CLS of 0.1 or less is Good. Between 0.1 and 0.25 is Needs improvement. Above 0.25 is Poor. Because the score is cumulative, several small shifts can add up to a failing grade even when no single jump feels dramatic, which is why stability has to be a habit across the whole page rather than a fix for one obvious element.

• What it is: Cumulative Layout Shift, one of the three Core Web Vitals, alongside Largest Contentful Paint and Interaction to Next Paint.
• What it measures: visual stability, how much visible content moves unexpectedly while a page loads.
• How it is scored: a unitless value from adding up shift scores, each the impact fraction multiplied by the distance fraction.
• Thresholds at the 75th percentile: Good is 0.1 or less, Needs improvement is 0.1 to 0.25, Poor is over 0.25.
• How to improve it: set dimensions or aspect-ratio on media, reserve space for late content like ads and banners, tune web fonts, and animate with transform.

What causes layout shifts

Most layout shifts come from a handful of familiar causes. Images, videos and iframes that are inserted without width and height attributes have no reserved space, so the browser has to reflow the page once they arrive and know their real size. Web fonts can cause a shift when a fallback font is swapped for the web font and the text reflows into a different size. And content injected above what you are already reading, such as ads, embeds or a late cookie or consent banner, pushes everything below it down the page.

How to fix and prevent layout shifts

The fixes follow directly from the causes. Always set width and height attributes on images and video, or reserve the space with the CSS aspect-ratio property, so the browser knows the size before the media loads. Reserve space for anything that arrives late, including ad slots and banners, rather than letting it appear on top of existing content. For web fonts, use the font-display property and match the fallback font metrics as closely as you can, so the swap moves the text as little as possible.

Animation matters too. If you need to move an element, animate it with the CSS transform property rather than by changing properties like top, left, width or height. Transforms are handled by the browser's compositor and do not trigger layout, so they move an element visually without counting as a layout shift, which lets you keep motion in your design without hurting the score.

How to measure CLS

CLS is best judged on field data, real users on real devices and connections, which you can see in the Chrome User Experience Report and in Google Search Console's Core Web Vitals report. For debugging in the lab, the Performance panel in Chrome DevTools highlights layout shifts and the elements responsible, Lighthouse reports a CLS figure, and the web-vitals JavaScript library measures it directly in the browser. On this site, our web vitals checker lets you enter your measured values and see instantly whether they pass Google's thresholds.

The bottom line

The bottom line: CLS rewards pages whose layout stays put. Most of the work is defensive, reserving space for images, media, fonts and anything injected late so nothing has to push existing content out of the way. Get that right and a page feels calm and stable instead of jumpy, which is exactly what the metric is designed to encourage.