dotvitals

The page jumps around while it loads for real visitors

MediumConfirmedperf.crux.cls-poor

What this check looks for

Content on ‹scope› moves after it has already appeared, scoring ‹value› for a quarter of real visits. Google's threshold for a good experience is 0.1.

Why it matters

This is what makes a visitor click the wrong thing: they reach for a link and an ad or an image loads above it, pushing it out from under their finger. It is a Core Web Vital and it feeds Google's page experience signals.

When the check passes, your report says: “The layout stays put for real visitors while the page loads”.

What it costs your score

When this check fails it removes 10 points from your Performance score, before the status, confidence and repeat multipliers are applied. Performance carries a weight of 8 in the overall score.

It shares the performance.field family ceiling of 35 points: however many findings that family produces, together they cannot remove more than that from Performance. One underlying problem showing up in several places is still one problem.

Severity
medium
Default confidence
confirmed
Status when triggered
fail
Deduction
10 points
Family cap
performance.field · 35
Category
Performance
Module
Perf crux
Fix owned by
user
In the ruleset since
2026.09

How the whole score is calculated

How to fix it

Reserve space for everything that arrives late, so nothing already on screen moves.

Visitors are currently having content shift under them on a quarter of visits, which causes mis-clicks and lost reading position.

  1. Give every <img>, <video> and <iframe> explicit width and height attributes, or a CSS aspect-ratio. The browser then reserves the right box before the file arrives.

  2. Reserve the exact dimensions of every ad slot in the layout — a fixed-height container that is empty until the ad loads causes no shift, while an ad that expands the page causes a large one.

  3. Load fonts with font-display: optional or swap plus a size-adjust-matched fallback, so the text does not re-flow when the web font arrives.

  4. Never insert content above existing content after load. Put cookie banners and notification bars in an overlay, or reserve their height from the first paint.

  5. Animate with transform and opacity rather than with properties that trigger layout (top, height, margin).

How to confirm it worked

  • Re-run this scan after the change has been live for several weeks — field data uses a trailing 28-day window.

  • In Chrome DevTools, Performance → enable 'Layout Shift Regions' and reload; no region should flash after the first paint.

A named slot like ‹domain› — and the braces left in the configuration below — is filled in with your own values when this rule appears on a report.

Remediation by platform

Page HTML
<!-- Dimensions reserve the box before the bytes arrive. -->
<img src="/photo.avif" alt="" width="800" height="450">

<!-- An ad slot whose height is reserved cannot shift the page. -->
<div class="ad-slot" style="min-height: 250px; contain: layout;"></div>

<style>
	/* Or reserve by ratio, which survives responsive resizing. */
	.media { aspect-ratio: 16 / 9; width: 100%; }
</style>
  • width and height on an image are not overridden by responsive CSS: with img { max-width: 100%; height: auto; } the browser uses the attributes only to compute the aspect ratio, which is exactly what reserves the space.

Technical detail

Cumulative Layout Shift at the 75th percentile: **‹value›** (‹band›).

This is **field data**: the experience of real Chrome users who visited ‹scope› over the trailing 28-day collection window, not a measurement we took ourselves. The number quoted is the **75th percentile** — Google's own choice of statistic, meaning three visits in four were at least this good. A site with a fast median can still fail here, and that is the point: the quarter of visits that are worst are real people on real networks and devices.

Field data also lags. A fix you deployed yesterday will not move this number until it has been in front of users for most of the window, so use the lab measurements alongside it to confirm the change landed.

Google's published thresholds: **good at or below 0.1**, needs improvement up to 0.25, **poor above 0.25**. CLS is unitless — it is the largest burst of unexpected layout shift during the visit, where each shift is scored by how much of the viewport moved and how far.

The causes are a short list and they repeat across nearly every site: images and videos with no declared dimensions, ads and embeds injected into a space that was not reserved, web fonts that swap and re-flow the text, and content inserted above existing content (cookie banners, notification bars, late-arriving personalisation). ‹detail›

Standards and references

Test this on your domain

Run the check that produces this finding, on its own, against any domain.

Open the perf crux checker

Other perf crux checks