performance

Performance Rules

Measurement First

• Profile before optimizing — intuition about bottlenecks is wrong more than half the time. The slow function is almost never where you think it is
• Tools by context: Chrome DevTools Performance tab + Lighthouse for frontend, pprof/perf/flame graphs for backend, EXPLAIN ANALYZE for SQL, load testing (k6, Artillery) for throughput
• Set specific budgets: "LCP under 2.5s," "API p95 under 200ms," "JS bundle under 200KB gzipped." Vague goals ("make it faster") lead to premature optimization
• Measure in production conditions — dev machines with SSDs and fast networks hide real-world performance. Test with throttled network and realistic data volumes
• Before/after numbers for every optimization. "I think it's faster" is not evidence. "p95 dropped from 340ms to 85ms" is

Database (most common bottleneck)

• Missing indexes are the #1 performance problem in web applications. Index columns in WHERE, JOIN, ORDER BY. Composite indexes for multi-column queries — column order matters (most selective first)
• EXPLAIN ANALYZE every slow query. Sequential scan on a large table = missing index. Nested loop join on large tables = missing index or wrong join strategy
• N+1 queries: loading 50 users then making 50 queries for their orders. Fix with eager loading (JOIN, select_related, include). If you can't see N+1s in dev, use query logging to count queries per request
• Pagination on every list endpoint — LIMIT + OFFSET for small datasets, cursor-based for large ones. OFFSET 100000 scans and discards 100K rows, cursor-based skips nothing
• Connection pooling: set pool size based on expected concurrency × query duration. Too few connections = queuing. Too many = database overload. Most frameworks default to 5-10, which is fine for small apps and wrong for everything else

Frontend

• Lazy-load below-the-fold content: React.lazy(), dynamic import(), loading="lazy" on images. The fastest code is code that doesn't execute
• JavaScript is the most expensive asset byte-for-byte: it must be downloaded, parsed, compiled, and executed. CSS and images are cheaper. Analyze with source-map-explorer or bundleanalyzer — find the 200KB dependency you import for one function
• Critical rendering path: inline critical CSS, defer non-critical JS with async/defer, preload fonts with <link rel="preload">. First paint should not wait for your analytics script
• Images: use WebP/AVIF, serve responsive sizes with srcset, lazy-load below fold. An unoptimized 4MB hero image destroys your LCP score and costs users real money on metered connections
• CDN for static assets — puts files physically closer to users. Without CDN, a user in Tokyo downloads from your US-East server at 200ms round-trip per request