SEO Core Web Vitals (LCP, INP, CLS)

Core Web Vitals are a Google ranking signal. Each public page must pass on mobile (the harder threshold).

Companion skills: performance-budget, seo-ssr-and-prerendering, dashboard-charts-recharts, accessibility-pass.

Measure first

• PageSpeed Insights — field (CrUX) + lab (Lighthouse).
• Chrome DevTools → Performance → record on mobile throttling.
• web-vitals package + your analytics for real-user monitoring.

import { onLCP, onINP, onCLS } from "web-vitals";
onLCP((m) => track("web_vital", { name: "LCP", value: m.value }));
onINP((m) => track("web_vital", { name: "INP", value: m.value }));
onCLS((m) => track("web_vital", { name: "CLS", value: m.value }));

LCP — biggest fix is the hero image

Almost always: the hero image is the LCP element on marketing pages.

• Preload it: <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">.
• Use <img fetchpriority="high" loading="eager" decoding="async">, never loading="lazy".
• Serve WebP/AVIF; use srcset for responsive sizes.
• Explicit width/height attributes — avoids CLS too.
• Inline critical CSS for the hero region; defer the rest.

<img
  src="/hero-960.webp"
  srcSet="/hero-480.webp 480w, /hero-960.webp 960w, /hero-1440.webp 1440w"
  sizes="(max-width: 768px) 100vw, 960px"
  width={960}
  height={540}
  alt="Acme dashboard preview"
  fetchPriority="high"
  decoding="async"
/>

Other LCP wins:

• Prerender the public route (seo-ssr-and-prerendering) — kills "white screen until JS".
• Use system fonts or font-display: swap + preconnect to Google Fonts.
• Avoid client-side fetch for above-the-fold copy; ship as HTML.

INP — keep the main thread free

Common culprits:

• Heavy JSON parsing on render.
• Mega-renders triggered by uncontrolled state updates.
• Third-party tags (chat widgets, analytics) blocking input.

Fixes:

• Defer third-party scripts: async or defer, load chat widgets after user intent.
• Code-split routes (React.lazy + Suspense).
• Break large lists with virtualization (tanstack-infinite-queries).
• Memoize expensive renders (useMemo, React.memo) only after profiling.
• Use startTransition for non-urgent updates (search filtering, tab switches).

const [pending, startTransition] = useTransition();
const onFilter = (v: string) => startTransition(() => setQuery(v));

CLS — reserve space for every dynamic element

• Always set width/height (or aspect-ratio) on images, video, iframes, ads.
• Web fonts: font-display: swap + size-adjust or matching fallback metrics.
• Skeleton loaders sized to match real content.
• Avoid injecting banners (cookie, "subscribe!") above existing content after load.

@font-face {
  font-family: "Inter";
  src: url(/Inter.woff2) format("woff2");
  font-display: swap;
  size-adjust: 107%; /* match fallback metrics */
}

For shadcn projects, the default next/font or local font setup typically handles this — verify with Lighthouse.

Third-party tags audit

Most SPAs ship with: PostHog, GA4, Stripe.js, Sentry, Intercom, Hotjar, Crisp. Each blocks the main thread.

• Load only on routes that need them (Stripe.js only on /checkout).
• Use Partytown to move analytics to a worker if you can't remove.
• Audit your <head>: every <script> should justify its bytes.

Mobile reality check

PageSpeed runs on a throttled 4G mobile. Your dev MacBook is not the customer.

• Test in DevTools with Mobile + Slow 4G + 4× CPU throttling.
• Open the site on a real mid-range Android once per release.

Avoid

• loading="lazy" on the hero image (it's the LCP element, must load immediately).
• Hundreds of useMemo/useCallback "for safety" — they cost too.
• Hydrating a giant initial state on every route.
• Cookie banners that move all the content down 100 px after 2 seconds.
• Ignoring INP — it replaced FID in 2024 and trips up many SPAs.

Checklist

• LCP image preloaded + sized + WebP/AVIF.
• No loading="lazy" on LCP element.
• Fonts use font-display: swap.
• All images, embeds have explicit dimensions.
• Third-party scripts deferred or route-scoped.
• PageSpeed Mobile shows green for LCP, INP, CLS.