performance-profilinglisted

# Performance Profiling Don't optimize based on vibes. Measure, find the bottleneck, fix it, measure again. ## Progress Checklist - [ ] Identify what's slow (user report, monitoring, reproduction) - [ ] Measure baseline with numbers - [ ] Identify the bottleneck - [ ] Fix the bottleneck - [ ] Measure again to confirm improvement - [ ] Guard against regression ## Step 0: What's Actually Slow? Get specific before profiling: - Which endpoint / page / operation? - How slow? (2 seconds? 30 seconds? timeout?) - For whom? (all users, specific data, specific browser?) - Since when? (always, since a deploy, since data grew?) If monitoring exists (APM, Application Insights, DataDog), check there first for actual numbers. ## Frontend Path Trigger `chrome-devtools` skill for browser-based profiling: ### Lighthouse Audit Run a Lighthouse audit for overall scores (Performance, Accessibility, Best Practices, SEO). ### Core Web Vitals | Metric | Good | What to check | |--------|------|--------------| | LCP < 2.5s | Largest content paint | Large images, render-blocking resources, slow server response | | INP < 200ms | Interaction to next paint | Heavy event handlers, long main thread tasks, layout thrashing | | CLS < 0.1 | Layout shift | Images without dimensions, dynamic content insertion, font loading | ### Bundle Analysis ```bash # Check bundle size npx vite-bundle-visualizer 2>/dev/null npx webpack-bundle-analyzer 2>/dev/null npx next build 2>/dev/null # Next.js shows bundle