Web Performance Checklist 2025 for React/Next.js (with Practical Examples)

Performance isn’t optional anymore—it impacts SEO, conversion, and UX. This condensed guide gives you an actionable list to optimize Core Web Vitals (LCP, CLS, INP) in React/Next.js projects without rewriting your architecture.

Baselines to target: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms.

1) Measure first (and in CI)

Before touching code, measure. Set up Lighthouse CI to prevent regressions.

Minimal .lighthouserc.json:

Tip: pair PageSpeed Insights for field data with WebPageTest for network diagnostics.

2) Images: LCP first

Use next/image with proper sizes, placeholders, and priority only on the hero.

Images checklist

• Prefer AVIF/WebP where possible
• Define sizes and dimensions to avoid CLS
• Use priority only on the image affecting LCP
• Defer offscreen images

3) Fonts: fast and stable

Reduce FOUT/CLS and font payload with next/font.

Fonts checklist

• display: swap
• Minimal subsets (latin, latin-ext if needed)
• CSS variables for stable rendering
• Only necessary weights/styles

4) JavaScript: less is more

Defer, split, and favor Server Components by default.

JS checklist

• Prefer Server Components to reduce shipped JS
• dynamic() for heavy client-only libraries
• Avoid use client unless required
• Inspect bundles with next build and ANALYZE=true

5) Data & cache: stable and revalidatable

Avoid recomputing on every request. Use ISR and revalidate.

Tag invalidation in a mutation route:

Data checklist

• Use revalidate and tags for granular caching
• Avoid duplicate fetches (per-request memoization)
• For critical content, prefer CDN stale-while-revalidate

6) HTTP headers & connection hints

Improve TTFB and reduce latency with hints and caching.

In Route Handlers, set resource cache headers:

7) INP: snappy interactions

Keep handlers short and deferred.

INP checklist

• Avoid long tasks (>50ms) on the main thread
• Use useTransition for non-urgent updates
• Debounce/throttle intensive inputs
• Measure INP with the Web Vitals API in production

8) CLS: zero visual jumps

Golden rules

• Reserve space for images (width/height or fill + sizes)
• Don’t inject banners above content without reserved space
• Use consistent placeholders (skeletons)
• Control line-height and font swaps

9) Third-parties: control and defer

Load third-party scripts with next/script and appropriate strategies.

Third-party checklist

• Evaluate real cost (ms/KB) and remove what you don’t need
• Use strategy="lazyOnload" where possible
• Self-host and reduce cross-domain requests when applicable

10) Performance budgets

Prevent regressions with size and timing limits.

Wire validation into CI (e.g., Lighthouse CI plus a step that checks budgets).

11) Quick pre-publish list

• LCP optimized: hero with next/image, sizes, priority
• CLS stable: reserved space and fonts with swap
• INP low: short handlers, useTransition
• JS minimal: Server Components, dynamic() for heavy bits
• Cache: revalidate, tags, proper headers
• Third-parties: next/script strategies and auditing
• CI: Lighthouse CI + budgets
• Monitoring: PSI + your own RUM in production

Conclusion

You don’t need a rewrite to improve Core Web Vitals. Apply this checklist in layers: measure → fix → automate in CI. You’ll see real gains in SEO, conversion, and—most importantly—user satisfaction.