Pass Core Web Vitals

Keep LCP under 2.5 s, INP under 200 ms and CLS under 0.1.

LCP
< 2.5 s
INP
< 200 ms
CLS
< 0.1

From seo-audit, Technical SEO: Site Speed & Core Web Vitals.

CLS: a late ad moves Checkout

Press Load page, then try to click Checkout.

No reserved spaceBad

Trail Runner 3

$129
CLS–

 

.ad-slot { }
Reserved slotGood

Trail Runner 3

$129
CLS–

 

.ad-slot { min-height: 90px }
.ad-slot { min-height: 90px; }
.embed   { aspect-ratio: 16 / 9; }

<img src="hero.avif" width="1200" height="675" alt="Trail Runner 3">

INP: feedback before the work

Click Add to cart or type in each filter.

Work, then paintBad

5,000 products

Last interaction–
INP (worst)–
heavyWork(); render();
Paint, yield, workGood

5,000 products

Last interaction–
INP (worst)–
render(); await yieldToMain(); heavyWork();
const yieldToMain = () =>
  globalThis.scheduler?.yield?.() ?? new Promise((r) => setTimeout(r, 0));

button.addEventListener("click", async () => {
  button.textContent = "Adding…";
  await yieldToMain();
  for (const slice of work) {
    slice();
    await yieldToMain();
  }
  button.textContent = "Added";
});

LCP: where the 2.5 s goes

Load Common mistake, then change one setting at a time.

Hero image load
LCP–
TTFB
–
Load delay
–
Load duration
–
Render delay
–

<img src="/hero-1200.avif"
     srcset="/hero-800.avif 800w, /hero-1200.avif 1200w"
     sizes="100vw" width="1200" height="675"
     fetchpriority="high" alt="Trail Runner 3">

Why it matters, pros and cons

Why it matters

Each metric is something visitors feel: waiting, a dead tap, a jumping page.

Pros

  • Pass or fail per URL group.
  • Most fixes are mechanical.
  • Same fixes lift conversion.

Cons

  • A tiebreaker: relevance still outranks speed.
  • Lab scores are not field data.
  • Past the thresholds, a perfect score buys little.