Performance profiling principles. Measurement, analysis, and optimization techniques.

Performance Profiling Measure, analyze, optimize in that order. 🔧 Runtime Scripts Execute these for automated profiling: Script Purpose Usage scripts/lighthouse audit.py Lighthouse performance audit python scripts/lighthouse audit.py https://example.com 1. Core Web Vitals Targets Metric Good Poor Measures LCP < 2.5s 4.0s Loading INP < 200ms 500ms Interactivity CLS < 0.1 0.25 Stability When to Measure Stage Tool Development Local Lighthouse CI/CD Lighthouse CI Production RUM (Real User Monitoring) 2. Profiling Workflow The 4 Step Process Profiling Tool Selection Problem Tool Page load Lighthouse Bundle size Bundle analyzer Runtime DevTools Performance Memory DevTools Memory Network DevTools Network 3. Bundle Analysis What to Look For Issue Indicator Large dependencies Top of bundle Duplicate code Multiple chunks Unused code Low coverage Missing splits Single large chunk Optimization Actions Finding Action Big library Import specific modules Duplicate deps Dedupe, update versions Route in main Code split Unused exports Tree shake 4. Runtime Profiling Performance Tab Analysis Pattern Meaning Long tasks ( 50ms) UI blocking Many small tasks Possible batching opportunity Layout/paint Rendering bottleneck Script JavaScript execution Memory Tab Analysis Pattern Meaning Growing heap Possible leak Large retained Check references Detached DOM Not cleaned up 5. Common Bottlenecks By Symptom Symptom Likely Cause Slow initial load Large JS, render blocking Slow interactions Heavy event handlers Jank during scroll Layout thrashing Growing memory Leaks, retained refs 6. Quick Win Priorities Priority Action Impact 1 Enable compression High 2 Lazy load images High 3 Code split routes High 4 Cache static assets Medium 5 Optimize images Medium 7. Anti Patterns ❌ Don't ✅ Do Guess at problems Profile first Micro optimize Fix biggest issue Optimize early Optimize when needed Ignore real users Use RUM data Remember: The fastest code is code that doesn't run. Remove before optimizing. When to Use This skill is applicable to execute the workflow or actions described in the overview. Limitations Use this skill only when the task clearly matches the scope described above. Do not treat the output as a substitute for environment specific validation, testing, or expert review. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

performance-profiling