Core Web Vitals field debugging for SEO

Start with a field-first triage

1. Pick one URL: the page with the biggest organic opportunity or the clearest reader drop-off.
2. Confirm the canonical: debug the exact URL Google indexes and readers land on.
3. Decide the goal: help more readers stay engaged or improve time-to-interaction, not just Lighthouse score.
4. Ship one fix: measure, then move to the next bottleneck.

LCP: the page feels loaded late

LCP is usually a hero image, large heading, or above-the-fold block. Fix the biggest rendering blocker first.

• Preload the hero image or font that becomes the LCP element.
• Serve responsive images with explicit dimensions and compressed formats.
• Reduce render-blocking CSS and avoid heavy JS on first paint.
• Watch server time-to-first-byte and cache aggressively for static content.

INP: the page reacts slowly to interaction

INP gets worse when the main thread is busy during clicks, typing, or taps. The fastest fix is often deleting or deferring work.

• Remove heavy client-side scripts, widgets, or hydration work that runs on load.
• Split long tasks and avoid synchronous work inside click handlers.
• Prefer CSS for animations and transitions; avoid layout-thrashing JS.
• Measure which interactions are slow before optimizing everything.

CLS: the page shifts while loading

CLS is almost always missing space reservations: images without dimensions, injected content, or fonts swapping without a stable fallback.

• Add explicit width/height (or stable aspect ratio) for images, iframes, and embeds.
• Reserve space for banners, notices, and late-loading components.
• Keep above-the-fold layout stable; avoid inserting content above existing text.
• Use font loading strategies that minimize reflow for headings.

Copy a one-page diagnosis template

Use this as the minimal note for a Core Web Vitals fix. Record one change, one metric, one outcome.

# Core Web Vitals diagnosis

## URL
- Canonical URL:
- Device focus: mobile / desktop

## Current signals
- LCP (target: <= 2500ms):
- INP (target: <= 200ms):
- CLS (target: <= 0.1):

## Hypothesis
- What is likely causing the regression:

## Change
- Exactly what we will ship:

## Validation (before deploy)
- Repro in dev tools:
- Confirm the LCP element:
- Confirm shifts are reserved:

## Measurement (after deploy)
- Compare the metric to the previous snapshot:
- Check follow-up clicks to the next page: