Performance
PerformanceHigh

CLS (Cumulative Layout Shift)

Checks Cumulative Layout Shift — how much the page jumps during load. Target under 0.1.

What this check measures

We query CrUX for p75 CLS. Target: under 0.1. Values over 0.25 fail. Usually caused by images without dimensions, late-loading fonts, or ads injected above content.

Why it matters

CLS means content jumping. Users click the wrong button mid-shift; that is a terrible experience and Google penalizes it. Easy to fix: explicit dimensions on every media element.

search

How our audit detects it

CrUX p75 CLS over 28 days. Lab CLS from PageSpeed as fallback.

Typical findings

  • error_outlineImages without width/height attributes.
  • error_outlineFont-display: swap causing text shift on font load.
  • error_outlineCookie banner injected above fold after initial paint.

How to fix

Add width and height to every image, video, iframe. Use font-display: optional or preload critical fonts. Reserve space for cookie banners or ads with min-height.

Copy-paste fix prompt for your stack

Lovable · Cursor · Bolt · v0 · Replit · Windsurf · Claude Code · Base44

View the fix prompt →

Frequently asked questions

How to fix font-swap CLS?expand_more
Use font-display: optional (never swaps), or preload the font + use fallback with matching metrics (size-adjust).

Want this checked on your site?

Pantra runs the full audit (SEO, Security, GEO, Performance, Schema, Technical, Images) in 10 seconds and generates stack-specific fix prompts.

Scan my site

Related checks