Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a Core Web Vital metric that quantifies how much visible content unexpectedly shifts during the page lifecycle, measuring visual stability.
CLS captures the frustrating experience of content jumping around as a page loads — clicking a button only to have an ad push it down, or trying to read text that shifts because an image loaded above it. Google targets CLS under 0.1.
Common CLS causes: images without explicit dimensions, dynamically injected content above existing content, web fonts causing a flash of unstyled text (FOUT), and ads or embeds without reserved space.
In Next.js, the `<Image>` component automatically reserves space (preventing CLS) when you provide `width` and `height`. Use `next/font` with `display: "swap"` for font loading. Always set explicit dimensions on iframes and ad containers. Indxel flags missing image dimensions during page audits.
Example
// Next.js Image prevents CLS by reserving space
import Image from "next/image";
// Good: width and height reserve space
<Image src="/logo.png" alt="Logo" width={200} height={50} />
// Also good: fill mode with sized container
<div className="relative h-[400px] w-full">
<Image src="/hero.jpg" alt="Hero" fill className="object-cover" />
</div>Related terms
Core Web Vitals
Core Web Vitals are a set of three Google metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — that measure real-world user experience.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the time from when the page starts loading to when the largest text block or image element is rendered in the viewport.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is a Core Web Vital metric that measures the latency of all user interactions (clicks, taps, key presses) throughout the page lifecycle, reporting the worst interaction minus outliers.
Page Speed
Page speed is the measurement of how quickly a web page's content loads and becomes interactive, typically measured by metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP).
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.