performance-optimization

Performance Optimization

Overview

Measure first, then optimize. Never optimize without data. Performance problems have specific root causes — guessing wastes time and can introduce regressions. The goal is to identify the specific bottleneck, fix it, and measure the improvement.

When to Use

• A specific performance regression has been reported or measured
• A feature has a performance requirement (e.g., "< 200ms API response time")
• Core Web Vitals are in the "Needs Improvement" or "Poor" range
• Bundle size has grown significantly

When NOT to use: "Let's make it faster" without a measured baseline. Profile first.

The Measure-First Workflow

Step 1: Establish a Baseline

Before changing anything, capture the current state:

# API response time (via curl)
curl -w "@curl-format.txt" -s -o /dev/null https://api.gitscape.app/api/skills

# Frontend bundle size
npx vite build --mode production 2>&1 | grep "dist/"

# Lighthouse audit (frontend)
npx lighthouse https://gitscape.app --output json --output-path ./baseline.json

Record the specific numbers. You need them to prove the optimization worked.

Step 2: Profile to Find the Real Bottleneck

Don't guess. Use profiling tools:

Backend (Python FastAPI):

import cProfile
import pstats

with cProfile.Profile() as pr:
    result = await generate_skill(repo)

stats = pstats.Stats(pr)
stats.sort_stats("cumulative")
stats.print_stats(20)  # Top 20 hotspots

Frontend (React):

• Chrome DevTools → Performance tab → Record → Replay user action
• React DevTools Profiler → Identify components that re-render unnecessarily

Network:

• Chrome DevTools → Network tab → Filter by type, check response sizes and waterfall

Step 3: Fix Only the Measured Bottleneck

Fix the specific issue the profile reveals — not everything that could theoretically be faster.

Step 4: Measure After

Compare against the baseline. If the improvement isn't measurable, the optimization wasn't worth it.