Profile and Audit React Performance

Intermediate15 minTrending

Use Lighthouse, React DevTools Profiler, and Chrome Performance tab to identify and fix rendering bottlenecks.

Prerequisites

-React application running locally
-Chrome browser
-React DevTools extension

Steps

Run a Lighthouse audit from the CLI

Generate a full Lighthouse report including performance, accessibility, and SEO scores.

$ npx lighthouse http://localhost:3000 --output=html --output-path=./lighthouse-report.html --chrome-flags='--headless=new'

Run against a production build (pnpm build && pnpm start) for accurate scores.

Analyze Core Web Vitals

Check Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift.

$ npx lighthouse http://localhost:3000 --only-categories=performance --output=json | npx -y jq '.audits | {"LCP": .["largest-contentful-paint"].displayValue, "INP": .["experimental-interaction-to-next-paint"].displayValue, "CLS": .["cumulative-layout-shift"].displayValue}'

Profile React renders with why-did-you-render

Install why-did-you-render to log unnecessary re-renders to the console.

$ pnpm add -D @welldone-software/why-did-you-render

Only enable in development. Import it before React in your entry file.

Measure component render time with React Profiler

Wrap components in React.Profiler to log render durations programmatically.

$ echo '<Profiler id="MyComponent" onRender={(id, phase, duration) => console.log(id, phase, duration)}>...</ Profiler>'

Run multiple Lighthouse audits for stable results

Use lighthouse-ci to run multiple audits and get median scores.

$ npx @lhci/cli@latest autorun --collect.numberOfRuns=3 --collect.url=http://localhost:3000

Full Script

full-script.sh

#!/bin/bash
# React Performance Audit
set -euo pipefail

URL=${1:-http://localhost:3000}

echo "=== Running Lighthouse Performance Audit ==="
npx lighthouse "$URL" \
  --output=html \
  --output-path=./lighthouse-report.html \
  --chrome-flags='--headless=new' \
  --only-categories=performance,accessibility

echo ""
echo "=== Report saved to lighthouse-report.html ==="

echo ""
echo "=== Quick Performance Tips ==="
echo "1. Use React.lazy() for code splitting"
echo "2. Memoize expensive computations with useMemo"
echo "3. Virtualize long lists with @tanstack/react-virtual"
echo "4. Optimize images with next/image or sharp"
echo "5. Preload critical assets with <link rel='preload'>"

FAQ

Discussion

Loading comments...

#!/bin/bash # React Performance Audit set -euo pipefail URL=${1:-http://localhost:3000} echo "=== Running Lighthouse Performance Audit ===" npx lighthouse "$URL" \ --output=html \ --output-path=./lighthouse-report.html \ --chrome-flags='--headless=new' \ --only-categories=performance,accessibility echo "" echo "=== Report saved to lighthouse-report.html ===" echo "" echo "=== Quick Performance Tips ===" echo "1. Use React.lazy() for code splitting" echo "2. Memoize expensive computations with useMemo" echo "3. Virtualize long lists with @tanstack/react-virtual" echo "4. Optimize images with next/image or sharp" echo "5. Preload critical assets with <link rel='preload'>"