Performance Audit Framework

Initial Assessment Questions

• What's slow? - Page load, API response, build time, runtime

• How slow? - Quantify: 3s vs 30s matters

• Baseline? - What's acceptable performance?

• When? - Always slow, or under certain conditions?

• Where? - Client, server, network, database?

Measurement First

NEVER optimize without measuring. Identify bottlenecks before fixing.

Web Performance Metrics

• LCP (Largest Contentful Paint) - Main content visible

• FID (First Input Delay) - Interactivity

• CLS (Cumulative Layout Shift) - Visual stability

• TTFB (Time to First Byte) - Server response

Tools

• Chrome DevTools Performance tab

• Lighthouse audit

• WebPageTest.org

• React DevTools Profiler

• console.time() / console.timeEnd()

Common Performance Issues

Frontend

Issue Detection Fix

Large bundle Webpack analyzer Code splitting, tree shaking

Render blocking Network waterfall Defer/async scripts, critical CSS

Excessive re-renders React Profiler useMemo, useCallback, React.memo

Memory leak Memory timeline Cleanup effects, remove listeners

Layout thrashing Performance timeline Batch DOM reads/writes

Backend/API

Issue Detection Fix

N+1 queries Query logs Eager loading, batching

Missing indexes EXPLAIN plans Add appropriate indexes

No caching Repeated queries Redis, in-memory cache

Sync blocking Flame graphs Async/await, worker threads

Large payloads Network tab Pagination, field selection

Database

Issue Detection Fix

Full table scan EXPLAIN Add index on filter columns

Too many indexes Write latency Remove unused indexes

Large result sets Memory usage Pagination, streaming

Lock contention Deadlock logs Optimize transactions

Quick Wins Checklist

Frontend:

• Enable gzip/brotli compression

• Set cache headers

• Lazy load images and routes

• Use production builds

• Minimize third-party scripts

Backend:

• Add database indexes for common queries

• Implement response caching

• Use connection pooling

• Enable query result caching

• Optimize N+1 queries

Performance Budget

Set limits and enforce:

• Bundle size: < 200KB (gzipped)

• API response: < 200ms (p95)

• Page load: < 3s (LCP)

• Build time: < 60s

Output Format

When reporting:

• Current State - Measured performance with numbers

• Bottlenecks - Identified issues ranked by impact

• Recommendations - Specific fixes with expected improvement

• Priority - Quick wins vs larger refactors