React App Performance Optimisation Checklist

Run Lighthouse audit and record baseline metrics

Run in Chrome DevTools (Incognito), take 3 runs and note scores.

Save Lighthouse report and note LCP, CLS, FCP, TBT/INP

Export JSON, capture the key metric values and timestamps.

Identify top render-blocking resources from the audit

Look for blocking CSS/JS and long tasks that delay LCP or TBT.

Analyze bundle with a bundle-analyzer and enable prod source maps

Use webpack-bundle-analyzer or source-map-explorer to inspect chunks.

Identify largest modules and mark candidates for splitting

List modules >50 KB and trace their import origins.

Implement code-splitting and lazy-load routes/components

Prioritise route-level and heavy component splitting to shrink main bundle.

Use React.lazy, Suspense and dynamic imports for non-critical code

Provide lightweight fallbacks and load non-essential UI on demand.

Memoize expensive computations and callbacks with useMemo/useCallback

Apply to costly derivations and stable handlers to avoid rework.

Wrap pure components with React.memo and measure impact

Avoid over-memoising; benchmark before and after changes.

Optimize images: resize, compress, convert to WebP, and lazy-load

Generate multiple sizes, compress, and prefer modern formats.

Serve responsive images with srcset/picture and loading=lazy

Provide appropriate sizes per breakpoint to reduce bytes sent.

Serve static assets from a CDN with long cache headers and versioning

Set Cache-Control, use immutable when possible and include file hashing.

Set up service worker caching strategy (assets cache-first, API network-first)

Use Workbox; avoid excessively long caching of API responses.

Monitor Core Web Vitals in production and set performance budgets

Use web-vitals RUM, throttled lab tests, and alert on regressions.