Performance Optimization

Performance Optimization

Overview

Identify and fix performance bottlenecks in the React SPA, Supabase queries, and edge functions.

When to Use

• App feels slow
• Bundle > 500KB gzipped
• Lighthouse < 80
• Queries > 200ms
• Before production launch

Workflow

Phase 1: Measure

1. Bundle: npx vite-bundle-visualizer (target: < 300KB gzipped)
2. Lighthouse: DevTools > Lighthouse (target: Performance > 90, LCP < 2.5s)
3. React Profiler: DevTools > Profiler (look for > 16ms renders)
4. DB queries: Supabase Dashboard > Query Performance (look for > 200ms)

Phase 2: Frontend

Code splitting:

const Dashboard = lazy(() => import("@/pages/Dashboard"));
<Suspense fallback={<Loading />}><Route path="/dashboard" element={<Dashboard />} /></Suspense>

Memoization (only for expensive ops):

const processed = useMemo(() => expensiveCalc(data), [data]);
const handleClick = useCallback(() => doThing(id), [id]);

Images: Cloudinary transforms w_400,f_auto,q_auto, loading="lazy" on below-fold.

Phase 3: Queries

Select only needed columns:

supabase.from("projects").select("id, name, status, updated_at")

Add indexes:

create index concurrently idx_<table>_<column> on public.<table>(<column>);

React Query caching:

useQuery({ queryKey: ["projects"], queryFn: fetch, staleTime: 5 * 60 * 1000 });

Phase 4: Verify

1. Re-run bundle analysis
2. Re-run Lighthouse
3. Test on Slow 3G throttle
4. Verify no regressions

Checklist

• Bundle under target size
• Lighthouse Performance > 90
• Routes code-split with lazy loading
• Images optimized with Cloudinary
• DB queries use specific columns
• Indexes on slow queries
• React Query staleTime set
• Tested on slow network