Cumulative Layout Shift | Calibre Documentation

Available in:

SyntheticCrUXRUM

Cumulative Layout Shift (CLS) quantifies visual stability by measuring how much elements within the viewport move around unexpectedly while a page is open. It helps pinpoint how often unexpected movement occurs on your pages. CLS is a Core Web Vital metric.

How to measure Cumulative Layout Shift?#

The quickest and easiest way to see Cumulative Layout Shift performance for your site is to use our free Core Web Vitals test tool, or use the form below.

Check your Cumulative Layout Shift

How is Cumulative Layout Shift calculated?#

Cumulative Layout Shift is the largest burst of unexpected layout shift scores recorded during the life of a page. Shifts that land less than a second apart are grouped into a session window, which closes after a second passes with no further shift, or once the window reaches five seconds. Your CLS is the score of the single highest-scoring window, not the total of every shift on the page.

Individual layout shift scores are reported via the Layout Instability API and are a product of:

distance fraction: the distance any unstable element has moved in the frame
impact fraction: the surface area of the viewport that's affected by unstable elements between two frames

Learn more in Cumulative Layout Shift: Measure and Avoid Visual Instability and web.dev guide to Cumulative Layout Shift calculation.

What Cumulative Layout Shift measurement is fast?#

Pages with Cumulative Layout Shift lower or equal than 0.1 can be considered as fast, and recordings above 0.25 are considered slow.

Cumulative Layout Shift desired values showing anything under 0.1 as good, between 0.1 and 0.25 as needs improvement, and above 0.25 as poor.

How to improve Cumulative Layout Shift?#

Most layout shifts come from content that loads late or resizes after the page has started rendering. Work through these steps:

1. Reserve space for images, video and embeds#

Set dimensions: Always set width and height attributes (or a CSS aspect-ratio) on <img>, <video> and <iframe> elements so the browser reserves space before they load.
Size ad and embed slots up front: Give third-party embeds, ads and widgets a reserved container so they do not push content when they arrive.

2. Avoid inserting content above existing content#

Don't inject content above the fold: Avoid adding banners, notices or promos above content already on screen, unless it is in response to a user interaction.
Reserve space for late content: Cookie bars, promo strips and dynamically injected UI should have space reserved so they do not shift the page.

3. Make font loading stable#

Preload key fonts: Preload critical web fonts so they are available sooner.
Reduce reflow on swap: Use font-display thoughtfully, and size-adjust or fallback font metrics, to limit the reflow when a web font replaces its fallback.

4. Use transform for animations, and monitor over time#

Animate without layout: Animate with transform and opacity rather than properties that trigger layout, such as top, left, width or height.
Monitor with Calibre: Track CLS with Real User Monitoring, the CrUX Dashboard and synthetic tests, set a CLS performance budget, and compare CLS across pages on the Pages Leaderboard.
Compare against thresholds: CLS is good at 0.1 or less and poor above 0.25. See Core Web Vitals thresholds.