What Is Cumulative Layout Shift (CLS) and How Do You Fix It?

Cumulative Layout Shift, or CLS, measures how much a page's layout unexpectedly moves while it is loading. You have almost certainly experienced a high-CLS page — you begin reading an article, an advert loads above the text and pushes everything down, and you lose your place. Or you go to tap a button and a banner appears at the last moment, sending your tap somewhere unintended.

Google introduced CLS as a Core Web Vital because layout instability is one of the most frustrating experiences on the web. It measures the total visual instability of a page throughout its load, assigning a score based on how much elements move and how large those elements are. A low CLS score is a requirement for a good page experience assessment.

How CLS Is Calculated

Each layout shift is scored by multiplying two factors: the impact fraction (the proportion of the viewport affected by the shift) and the distance fraction (how far the element moved as a proportion of the viewport). A large element shifting a small distance and a small element shifting a large distance can both produce significant CLS scores.

The Cumulative Layout Shift score is the sum of all individual layout shift scores that occur without 500 milliseconds of user input. Shifts caused directly by user interaction — such as expanding an accordion or clicking to reveal more content — are excluded from the score, as these are intentional. Only unexpected shifts that surprise the user are counted.

What Causes High CLS

The most common cause of CLS is images without explicit width and height attributes. When a browser encounters an img tag without dimensions, it cannot reserve space for it before the image downloads. Once the image arrives and the browser knows its size, the surrounding content is pushed out of the way. Always include width and height attributes on all images.

Web fonts cause CLS when they replace a fallback font and the two fonts have different metrics, causing text to reflow. Adverts and embeds with unknown dimensions shift content when they load. Late-loading banners, cookie consent notices that push content, and dynamically injected content are all common culprits. Animations that move elements outside the viewport do not cause CLS, but those that move content within the viewport do.

How to Fix CLS

Add explicit width and height attributes to every image and video element. Modern CSS with aspect-ratio can also help reserve space for responsive images. For adverts and embeds, pre-allocate space with a fixed-height container so that when the content loads it fills the reserved space rather than pushing other content.

For web fonts, use font-display: optional or font-display: swap with adjusted metrics to minimise the visual difference between fallback and loaded fonts. The CSS font-size-adjust property and tools like Font Style Matcher can help match your fallback font metrics to your chosen web font. Avoid injecting content above existing content after the initial load — if you must add a banner or notification, append it below the fold or overlay it without affecting document flow.