Cumulative Layout Shift

A layout shift is recorded when a visible element changes position between two rendered frames without a user action having caused it.

Each shift scores the fraction of the viewport affected multiplied by the fraction of the viewport distance moved.

Shifts are grouped into session windows of at most five seconds, separated by gaps of a second. The reported value is the largest window's total, not the sum of everything.

Movement within 500 milliseconds of a user interaction is excluded, because a panel opening in response to a click is expected rather than surprising.

Images without width and height attributes. The browser cannot reserve space before the file arrives, so everything below jumps when it does.

Advertisements and embeds injected into the flow after the page has rendered, pushing content down.

Web fonts swapping from a fallback to the real face with different metrics, reflowing every line of text.

Content inserted above the current viewport position — a cookie banner, a notification bar, a lazily loaded section.

Animations of layout-affecting properties such as `height` or `top`, rather than of `transform`, which does not trigger layout.

An element whose dimensions are known before its content arrives occupies its final space from the start, so nothing below it moves.

For images, `width` and `height` attributes let the browser compute an aspect ratio and reserve the box, even when CSS makes the rendered size responsive.

For advertisement slots and embeds, a container with a minimum height reserves the space at the cost of some whitespace if the slot goes unfilled.

For fonts, `font-display: optional` avoids the swap entirely, and a fallback chosen with similar metrics minimises the reflow when a swap does occur.

For anything injected dynamically, inserting below the fold or overlaying rather than pushing avoids moving what the visitor is reading.

The browser's performance panel records each layout shift with the element responsible and the score it contributed.

PageSpeed Insights lists the largest shifts in its laboratory run, with the elements involved.

Field data catches what a laboratory run cannot: shifts caused by advertisements, consent banners and personalised content that only appear for real visitors.

Test at mobile width. A layout that is stable on a wide screen frequently is not when the same elements stack.