Site Speed & Core Web Vitals: Simple Steps to Go Green

Core Web Vitals reflect real user experience: how fast the main content appears (LCP), how stable the layout is (CLS), and how responsive interactions feel (INP). Below is a practical checklist to turn them green without a full rewrite.

Targets (mobile first)

• LCP ≤ 2.5s — the main content shows up fast.
• CLS ≤ 0.1 — minimal unexpected layout shifts.
• INP ≤ 200ms — interactions feel snappy.

Measure first

• PageSpeed Insights: check both lab and field data.
• Chrome UX Report / Web Vitals extension for real-time visibility.
• Send web-vitals to GA4 or your backend to segment by page/device.

LCP: speed up the hero

• Hero image: AVIF/WebP, correct sizing, no lazy-load above the fold.
• In Next.js: `<Image priority fetchPriority="high" sizes="...">` with accurate `sizes`.
• Critical text/styles: inline critical CSS; fonts with `font-display: swap` and preload primary face.
• Server & TTFB: prefer SSG/ISR for stable pages, CDN caching, avoid heavy middlewares.
• Scripts: defer/async anything not needed for first render.

CLS: remove layout jumps

• Reserve space: images/videos with fixed dimensions or `aspect-ratio`.
• No top injections: use placeholders; append below the fold when possible.
• Fonts: `next/font` or `font-display: swap`; preload woff2 to avoid swaps.
• Animate `transform/opacity` only; avoid layout-affecting properties.
• Ads/widgets: fixed-height containers and skeletons.

INP: responsiveness & long tasks

• Cut long tasks: code-splitting, lazy imports, heavy work in Web Workers/`requestIdleCallback`.
• Less JS overall: remove unused libs, coalesce listeners, use `passive` for scroll.
• Forms: instant visual feedback, inline validation, no main-thread blockers.
• Third-parties: load after first interaction or with low priority; audit regularly.
• React hygiene: memoization, avoid unnecessary re-renders, keep contexts small.

Media & fonts: quick wins

• Images: multiple sizes, realistic `sizes`, strict CSS bounds.
• Progressive loading: `loading="lazy"` off the hero; video poster & `preload=metadata`.
• Fonts: 1–2 weights, subset, preload critical, `display: swap`.

Static, caching & architecture

• Static assets: `Cache-Control: public, max-age=31536000, immutable` for hashed files.
• HTML: short TTL + `stale-while-revalidate` (ISR) for fast yet fresh responses.
• CDN: serve media/fonts from nearest POP; preconnect to static domains.
• Use SSR only when needed; prefer SSG/ISR to stabilize TTFB/LCP.

Execution plan

1. Baseline 5–10 top pages.
2. Fix LCP (hero, fonts, critical CSS) → verify in field data.
3. Fix CLS (dimensions, fonts, banners) → verify.
4. Fix INP (long tasks, 3P scripts) → verify.
5. Introduce performance budgets in CI to prevent regressions.

Pre-release checklist

• Hero image not lazy, `priority` set.
• No top-of-page injections without placeholders.
• No long tasks > 200ms on key interactions.
• Stable TTFB; critical content server-rendered.
• PSI mobile shows green LCP/CLS/INP for key pages.

Wrap-up

Green CWV is a chain of small choices: right dimensions, lean JS, predictable layout and sane architecture. Start with your key pages, bake practices into the pipeline, and the metrics will stay green across releases.