Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS)Cumulative Layout Shift (CLS) measures how much visible elements shift unexpectedly during loading and represents the visual stability of a page.Open glossary entry → is one of the Core Web VitalsCore Web Vitals are a set of Google metrics that measure real-world user experience in the areas of loading performance, interactivity and visual stability.Open glossary entry → and measures how much visible elements move unexpectedly while a page loads. Such jumps disrupt the user experience, for example when a button shifts at the last moment. A good CLS value is no more than 0.1.

A poor CLS is often caused by images without width and height attributes, ad slots without reserved space, embedded videos without placeholders, banners that load late, cookie banners or web fonts. You can improve CLS by:

• specifying width and height on images so the browser can reserve space,
• reserving space for ads and embeds,
• positioning cookie banners in a stable way,
• optimising font loading and using placeholders (skeletons),
• not inserting late-loading content above already visible content.

What causes layout shift #

The usual suspects are images without width/height attributes, late-loading web fonts that swap in with different metrics, ads and embeds that reserve no space, and banners injected above existing content. Each shift moves what the user was about to read or click.

How to fix it #

• Always declare image and video dimensions (or use CSSCascading Style Sheets (CSS) is the language used to define the layout and design of web pages. CSS controls colours, fonts, spacing and arrangement, among other things.Open glossary entry → aspect-ratio)
• Reserve space for ads, embeds and consent banners
• Preload critical fonts and use font-display: swap with metric-compatible fallbacks
• Never insert content above the viewport after load

Good CLS stays at 0.1 or below at the 75th percentileThe 75th percentile is the threshold at which at least 75 % of page views reach the good value. Core Web Vitals are assessed at this point, not at the average.Open glossary entry → of real users.