Cumulative Layout Shift (CLS)

Page content stays in place as the page loads.

On this page

    Impact

    ScanGov impact ratings

    About

    ​Cumulative Layout Shift (CLS) measures how much a webpage's content unexpectedly moves during loading, affecting user experience. A good CLS score is 0.1 or less. Common causes include images or ads without specified dimensions, dynamically added content, and late-loading fonts. To improve CLS, always set size attributes for media, reserve space for ads, and ensure fonts load properly. ​

    Risks

    Users click wrong buttons by mistake.

    Why it's important

    Minimizes unexpected page movements, improving user experience by keeping content stable while it loads.

    User stories

    As a user reading the page, I want the content to stay stable while loading so that I don't accidentally click the wrong thing or lose my place.

    Code

    Failing pattern:

    /* Fail: no dimensions causes layout shift when image loads */
img { max-width: 100%; }

    Passing pattern:

    /* Pass: reserve space with aspect-ratio or explicit dimensions */
img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

    Error

    ScanGov messaging when a site fails a standard:

    Unexpected layout shifts detected.

    Guidance

    Indicators

    On this page