React App Performance Optimisation Checklist

14 items · Technical · Hard difficulty · 2 hours

Speed up your React app with audits, code-splitting, caching, and Core Web Vitals checks.

• 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.

Printed from TickYouOff — the interactive version tracks your progress and can be shared with others.