Cumulative Layout Shift

Cumulative Layout Shift (CLS) measures how much a page moves after it has appeared. Google publishes 0.1 as the threshold, from web.dev, checked on 3 August 2026. The internal target used on this site’s own builds is 0.05. Unlike the other two Core Web Vitals it is not measured in time; it is a unitless figure that accumulates every unexpected movement of visible content across the life of the page.

Everyone has experienced it and nobody has a word for it. You start reading, and the paragraph slides down because an image finally loaded above it. You reach for a button and the page shuffles a quarter-second before your thumb lands, so you tap the wrong thing. You are halfway through a sentence and the whole article jumps because a banner was injected at the top.

It is the most irritating of the three metrics and usually the cheapest to fix, which is a rare combination.

How a cumulative layout shift (CLS) score and each shift score are calculated: impact fraction, distance fraction and viewport height

Each individual shift’s score is the impact fraction multiplied by the distance fraction. The impact fraction is how much of the viewport was affected by the moving content; the distance fraction is how far that content moved, relative to the viewport’s height. Every shift score across the life of the page is summed to produce the cumulative layout shift figure — which is why one large, late shift can do as much damage to the score as several small early ones.

Why unstable, unexpected layout shifts are treated as a serious problem

Because the failure is not aesthetic. A tap that lands on the wrong element because the page moved is a genuine misfire, and on a commercial page the wrong element is often a link away from the thing the person wanted. On a checkout or a booking form it can be worse than that.

It is also a fairness issue. Layout that moves under the pointer is hardest on people who take longer to aim. That includes anyone with a motor impairment, anyone with low vision tracking a magnified region of the screen, and anyone using a device one-handed on a bus. This is one of the places where a performance metric and an accessibility obligation describe the same defect, which is why website accessibility in Australia is a companion to this page rather than a separate subject.

Movement the visitor caused is not counted. Opening an accordion, expanding a menu, revealing more results — expected movement in response to an interaction is excluded. The metric is about movement nobody asked for.

The four usual causes, and what fixes each

Images and video without dimensions. This is the most common cause by a wide margin. When the browser encounters an image with no declared width and height, it does not know how much room to reserve. So it lays the page out as though the image occupies nothing, then re-lays it out when the file arrives. Everything below is pushed down.

The fix is to declare intrinsic width and height attributes on every image and video, or to reserve the space with a CSS aspect ratio. Modern browsers use the declared dimensions to reserve correctly proportioned space even in a responsive layout, so this does not conflict with images that scale. It is a markup change, not a redesign.

Content injected above existing content. Cookie and consent banners, promotional strips, shipping-threshold notices, app-install prompts and alert bars. These are typically added by JavaScript after the page has rendered, and they push everything down when they arrive.

The fix is to reserve the space before the content loads, or to overlay rather than insert — a banner that floats above the page shifts nothing. If the banner is conditional, reserve the space for the condition where it will show.

Fonts that load late. A custom web font arrives after the initial render, and the browser re-draws the text in the new font. Because the two fonts have different letter widths and line heights, the text reflows and everything around it moves. Two variants of this exist: text that is invisible until the font arrives, and text shown in a fallback and then swapped. The second is better for perceived speed and worse for layout stability if the fallback is poorly matched.

The fixes are to preload the fonts actually used above the fold, to subset them so they carry only the characters needed, and to choose a fallback with similar metrics so the swap moves as little as possible. Reduce the number of weights and styles loaded as well. Most sites load several font files they never visibly use.

Third-party embeds. Ad slots, map embeds, social feeds, review carousels, video players and booking widgets. These are iframes whose final height is decided by someone else’s code after it loads, and they routinely arrive at a different size than the space left for them.

The fix is to reserve a fixed container of known height, sized against the largest the embed is likely to be, and to accept some empty space rather than allowing the page to jump. For ad slots in particular, an empty reserved box is a better outcome than a collapsing one. Where an embed refuses to behave, moving it below the main content limits the damage to content nobody is reading yet.

How to find it

Layout shift is difficult to see in a normal load, because it happens quickly and your eye is not expecting it. Three ways to catch it:

Load the page on a throttled connection in browser developer tools, which slows everything down enough to watch the movement happen. Use the Performance panel to record a load and step through the frames. Or use PageSpeed Insights, which reports the specific elements that shifted, by name, in its diagnostics — usually the fastest route to an answer.

Then check the field data in the Core Web Vitals report in Google Search Console. Layout shift is highly dependent on connection speed and device, and a page that is stable on your machine can be unstable for a visitor whose images arrive later. The step-by-step is in how to test your own site.

What to ask a supplier

Ask whether every image and video in the templates has declared dimensions, and treat “the theme handles it” as an answer to verify rather than accept. Ask what reserves space for the consent banner. Ask which fonts are loaded, how many weights, and which are preloaded. Ask which third-party embeds have fixed containers.

None of that is expensive work, and all of it is markedly cheaper before launch than after, because after launch it means editing templates that have already been styled and re-testing every page type. That asymmetry — structural fixes cost more the later they happen — is the same argument that runs through what moves the figure in a quote.