Cumulative Layout Shift (CLS)

CLS measures visual stability during load. A high score means things move under the user. They miss buttons. They lose trust. They bounce.

For a small site, one shaky template hurts many pages. Fix it once, help every key page like /, /pricing, and /guides/getting-started.

As of 2026, a good CLS is 0.1 or less. Above 0.25 is poor. Aim for quiet pages that do not jump while content and ads load.

Use field data first. The Chrome User Experience Report aggregates real Chrome users over 28 days. The assessment uses the 75th percentile, per URL or per origin.

Open PageSpeed Insights. If there is enough traffic, you will see field data with CLS by device. Below that, you get one Lighthouse lab run.

Lighthouse is lab data. It runs a simulation on a mid-range phone over throttled 4G. Its score weights CLS at 25 percent. Scores vary between runs.

• Check origin and URL level field CLS. If origin is bad, fix shared layout parts.
• Compare mobile and desktop. Mobile often shifts more.
• Use the Lighthouse trace to spot which elements moved.
• Record a slow 4G video on your phone. Watch what jumps.

• Images without width and height, or no aspect-ratio.
• Custom fonts swapping late, changing text metrics.
• Ads, promo bars, and consent banners that push content down.
• Embeds and iframes without a reserved box.
• Lazy loading above the fold without a placeholder.
• Dynamically injected content before the main content.

Example: your /pricing images load without size. The bullets slide down twice. After adding width and height, the grid locks in place from the first paint.

1. 1

   Reserve space for media

   Add width and height to img tags. Or set aspect-ratio in CSS. For responsive images, use intrinsic sizes so the browser can reserve space.

2. 2

   Stabilise fonts

   Use font-display swap or optional. Preload key font files. Adjust fallback font metrics to reduce reflow when the webfont loads.

3. 3

   Pre-allocate ad and banner slots

   Give ads, promo bars, and consent banners a fixed height from the start. Do not insert them above content after load.

4. 4

   Size embeds and iframes

   Wrap iframes and videos in a container with a fixed aspect ratio. Load the player inside that box.

5. 5

   Use placeholders for lazy content

   For images or components near the top, show a skeleton or reserved box. Avoid layout shifts when the content appears.

6. 6

   Avoid injecting content before the main content

   Append below the fold, or overlay without moving the layout. If you must insert, reserve the space beforehand.

Re-test in PageSpeed Insights and in the browser with throttling. Confirm your 75th percentile CLS is 0.1 or below for mobile.

• A sticky header that appears late will push content down. Show it from first paint or reserve its space.
• Cookie and consent banners often ship without a fixed height. Set it and avoid reflow.
• Font preloading without correct cross-origin headers can fail silently. Check the network panel.
• SPA route changes can shift content too. Treat each route as a page and stabilise components.