CLS

ELI5 — The Vibe Check

CLS measures how much your page randomly jumps around while loading. You know when you're about to click a button and suddenly an ad loads above it and you click the wrong thing? That's a CLS nightmare. Good CLS is basically zero jumping.

Real Talk

Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual instability — the sum of all unexpected layout shift scores during the page's lifecycle. Each shift is scored based on the fraction of the viewport affected and the distance elements move. A 'Good' CLS score is ≤0.1. Common causes: images without dimensions, late-loading ads, dynamically injected content.

Show Me The Code

/* Fix CLS: always define image dimensions */
img {
  width: 100%;
  aspect-ratio: 16 / 9; /* prevents layout shift */
}

When You'll Hear This

The late-loading banner ad was causing our CLS to spike.,Always set width and height on images to prevent CLS.,Our CLS score went from 0.45 to 0.03 after reserving space for ads.