We respect your privacy.

We use strictly necessary cookies to keep you signed in and to protect against CSRF. With your permission we also use a small amount of first-party analytics to improve the product. We do not sell your data and we do not use third-party advertising trackers. See our cookie policy and privacy policy .

Crawlmind
← All learn topics

Rule page.performance.cls-high

Reduce Cumulative Layout Shift (CLS)

page.performance.cls-high is a check in Crawlmind's site audit that grades medium-impact issues of this kind. This page explains why the rule matters and the exact fix.

Impact: mediumEffort: medium

Why it matters

CLS measures unexpected layout shifts during page load: content jumping as images, ads, or late-loading fonts arrive. Google's "good" threshold is under 0.1. Past it, users mis-tap, abandon, and Google's ranking signal kicks in. The fix is almost always "reserve the space upfront".

The fix

Three most common CLS causes + fixes:

**1. Images without dimensions**: set `width` + `height`:

```html
<img src="hero.jpg" width="1200" height="630" alt="…">
```

**2. Web fonts swapping (FOIT/FOUT)**: preload + size-adjust:

```html
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
```

```css
@font-face {
  font-family: Brand;
  src: url(/fonts/brand.woff2) format("woff2");
  font-display: swap;
  size-adjust: 95%;  /* match metrics to fallback so layout doesn't reflow */
}
```

**3. Late-injected banners / cookie notices**: reserve a `min-height` for the container so the inject doesn't push content.

References