CLS Optimization Tactics

Fix cumulative layout shift: dimensions, font metrics, reserved slots, and stable late-loading UI.

intermediate3 min readUpdated Aug 4, 2026

performance
cls
web-vitals
fonts
images

CLS ≤ 0.1 (good, p75) means visible content mostly stays put. This page is tactics — metric definition lives in Core Web Vitals and the API in Layout Instability.

Docs: Optimize CLS — web.dev, CLS.

Tactic 1 — Always size media

<img src="/card.avif" width="640" height="360" alt="" loading="lazy" />

.card-media {
  aspect-ratio: 16 / 9;
  background: var(--color-muted);
}

Iframes and embeds need reserved boxes too (min-height or aspect-ratio wrappers).

Tactic 2 — Fonts without jump

font-display: swap shows fallback then webfont — metrics mismatch shifts text.

@font-face {
  font-family: 'InterVar';
  src: url('/inter.woff2') format('woff2');
  font-display: optional; /* or swap + metric overrides */
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 20%;
}

Tools like fontaine / capsize help generate overrides. Preload only critical faces — Font loading.

Tactic 3 — Don’t inject above existing content

Banners, cookie consent, and “offline” strips should occupy reserved space or overlay without pushing.

.consent {
  position: fixed; /* overlay instead of flow push when acceptable */
  inset-inline: 0;
  bottom: 0;
}

If product requires flow push, reserve the slot from first paint.

Tactic 4 — Skeletons that match final layout

Skeleton widths that don’t match final text cause secondary shifts. Match approximate line counts and media ratios.

Tactic 5 — Ads and third parties

Insist on fixed slots from ad ops. Collapse-to-zero empty slots still shift — keep min-height even when no fill, or accept CLS debt consciously.

Tactic 6 — Animate with transform

Animating height/top shifts siblings. Prefer transform for motion; use layout animations only when necessary.

Measure

import { onCLS } from 'web-vitals';
onCLS(console.log);

Lab: Performance → layout shift regions. Field: segment by template (PDP vs home).

Interview out-loud

“CLS fixes are size attributes and aspect-ratio, font metric matching, reserved slots for late UI, and avoiding injecting content above existing flow. I verify with layout-shift entries and onCLS attribution.”

How this shows up in interviews

Be ready to define the metric or technique in one sentence, name one measurement approach (DevTools panel, web-vitals, or headers), and cite a concrete fix you would try first. Walk through a before/after: what the waterfall or flame chart showed, what you changed, and which percentile moved. Mention a tradeoff (complexity, caching correctness, or third-party business constraints) so the answer doesn’t sound like a blog checklist.

Production guardrails

Ship behind a flag when the change is risky, watch field p75 for the affected template for at least a few days, and keep a rollback path. Pair lab verification (throttled Performance/Network) with RUM so you don’t celebrate a Lighthouse-only win. Document the owner of any ongoing budget or third-party exception.

Further depth

Teams often under-invest in this topic until an incident or CWV regression. Schedule a one-hour drill: reproduce the failure mode in DevTools, list the top three mitigations for your stack, and file tickets with owners. Revisit after the next major feature that touches networking, rendering, auth, or third parties — those are the moments regressions land. Keep primary documentation links in the runbook so on-call is not searching chat history at 2am.

Concrete artifacts to leave behind: a short architecture note, a CI assertion or header snapshot, and a dashboard panel (lab or field) that would have caught the last bug. Teaching the rest of the team the mental model matters as much as the one-line fix.