performancelisted

# Performance — Web + Backend + Mobile A practical playbook for measuring, profiling, and improving performance across the project's stack. Covers Web Vitals (Google's user-experience metrics), mobile perf budgets (FPS / TTI / memory), backend latency (P95 / P99 / saturation), with concrete tools per surface. ## When to Use This Skill - Adding a perf budget to a new feature. - Investigating a Lighthouse / Web Vitals regression. - Mobile users report jank, slow app launch, battery drain. - Backend P95 latency exceeds SLO. - Bundle size jumped 30% after a release. - Lists scroll poorly; animations stutter. - Choosing between perf tools (when each pays off). ## The Three Performance Surfaces | Surface | Primary metrics | Tools | |---|---|---| | **Backend** | P50 / P95 / P99 latency, throughput, error rate, saturation (CPU / mem / IO) | OpenTelemetry, Datadog APM, pprof (Go), py-spy (Python), pgbadger (Postgres) | | **Web frontend** | LCP, INP, CLS (Core Web Vitals), TTI, TBT, bundle size | Lighthouse, Chrome DevTools Performance, WebPageTest, web-vitals JS lib | | **Mobile** | FPS (60/120), TTI, memory, bundle size, native render time | Flipper, React DevTools Profiler, Hermes Sampling Profiler, Xcode Instruments, Android Profiler, FlashList Recorder | Each has its own measurement approach; conflate them at your peril. ## Measurement First, Optimization Second The cardinal rule: don't optimize without numbers. The biggest performance regressions in the wild come from dev