Your page jumps about while it loads

Applies to

every page

Typical severity

medium

Effect on conversions

medium

Effort to fix

Quick to fix

What to look for

Cumulative Layout Shift over 0.1.

Why it matters

Cumulative Layout Shift measures how much the page moves around while it loads. You start reading, then an image or banner loads above and pushes everything down. Or you go to tap a button and it jumps just as your finger lands, so you tap something else.

It makes a site feel unreliable, and it causes real mis-clicks. CLS is one of Google's Core Web Vitals.

What good looks like

Google rates a CLS score of 0.1 or less as good. We measure CLS on both mobile and desktop and take the worse of the two. The page fails when the score is over 0.1. Over 0.25 is marked as high severity.

How to check it yourself

1. Go to PageSpeed Insights (pagespeed.web.dev) and enter your page address. Look for Cumulative Layout Shift in both the real-visitor and lab sections.
2. The diagnostics list the elements that moved the most.
3. In Chrome developer tools, open the Rendering panel (from the three-dot menu, More tools) and tick Layout Shift Regions. Reload the page and shifting areas flash blue.
4. Load the page on a phone on mobile data and watch the first few seconds closely.

How to fix it

• Give every image and video a width and height, or a CSS aspect-ratio, so the browser reserves the space before it loads.
• Reserve space for embeds, ads, maps and review widgets that load late.
• Don't insert banners, cookie notices or promotions above existing content after the page has started showing. Overlay them or place them at the bottom.
• Load web fonts with font-display: swap and pick a fallback font of similar size, so the text doesn't reflow much when the font arrives.

<!-- Space is reserved before the image loads -->
<img src="/team.jpg" width="800" height="533" alt="...">

<style>
  img { max-width: 100%; height: auto; }
  .map-embed { aspect-ratio: 16 / 9; }
  .review-widget { min-height: 240px; }
</style>

Common mistakes

• Removing width and height attributes from images to make them responsive. Keep them and add height: auto in CSS.
• Announcement bars injected at the top by a script after load.
• Third-party widgets with no reserved space.

AgoraScan measures this automatically on every page it audits, on desktop and mobile.

Based on

• Google Core Web Vitals