Core Web Vitals & SpeedCLS

Cumulative Layout Shift

Definition

Cumulative Layout Shift (CLS) measures visual stability by aggregating the unexpected layout shifts that occur across a page's entire lifecycle during user viewing and navigation.

Why It Matters

Sudden content jumping frustrates users, causes accidental clicks on unintended links or buttons, and degrades user trust. In e-commerce, layout instability during checkout directly harms conversion rates. It is an official Google ranking signal evaluated across a 5-second maximum session window.

Google Core Web Vitals CLS Thresholds (75th Percentile)

Criterion / State	Requirement / Target	Status
Good (Pass)	≤ 0.10	Optimal
Needs Improvement	0.10 – 0.25	Needs Work
Poor (Fail)	> 0.25	Avoid / Fail

Practical Implementation Example

Setting aspect-ratio and min-height ensures the browser reserves geometric space in the layout before third-party banners, embeds, or async content resolve.

src/styles/components.css

/* Reserve layout aspect ratios for dynamic slots and ads */
.ad-banner-slot {
  min-height: 250px;
  width: 100%;
  max-width: 970px;
  aspect-ratio: 970 / 250;
  background: var(--color-brand-panel);
  contain: layout style;
}

Automated Verification

How to Audit CLS in ScanWise

ScanWise monitors DOM mutations, recording every unstable node, shift score, and layout bounding box change to highlight exactly which components cause visual instability.

Audit layout shifts across mobile viewports in ScanWise

Common CLS Mistakes & How to Fix Them

Common CLS Mistakes & How to Fix Them
Mistake	Why It Hurts	The Fix
Injecting cookie consent banners or promotional modals without fixed or absolute positioning.	Pushing the entire DOM tree down by 80px after JavaScript execution incurs a massive 0.35+ CLS penalty.	Position floating banners with fixed or absolute coordinates, or reserve header space with CSS variables.
Rendering responsive <img> elements without width, height, or aspect-ratio attributes.	Until the image binary downloads, the browser defaults height to 0px, causing the text below to jump down abruptly.	Always supply explicit width and height attributes or use Next.js <Image /> with fill and aspect-ratio styling.