Performance Profiling Guide
Systematically identify and fix performance bottlenecks in web apps and backends
What You Can Do
You can pinpoint exact performance bottlenecks across your frontend, backend, and database layers using industry-standard profiling tools. This skill walks you through collecting and analyzing real measurement data—CPU usage, memory consumption, query execution plans, rendering times—then translates that data into prioritized optimization recommendations with estimated impact and verification steps.
Features
CPU, memory, rendering, and network analysis using Chrome DevTools
Node.js execution time, memory leaks, and CPU hotspot identification
Query execution plan analysis, slow query detection, and index optimization
Converts profiling data into concrete numbers and root cause analysis
Optimization suggestions ranked by estimated performance impact
Steps to confirm improvements and prevent regression
Helps establish performance metrics for ongoing monitoring
Example Output
Example 1: Frontend Bottleneck Report
- Initial load: 4.2s → Target: <2s
- Bottleneck: JavaScript execution on main thread (2.8s of 4.2s total)
- Root cause: Unoptimized React re-renders during data fetch
- Recommendation: Implement useMemo for expensive computations (est. 1.2s savings)
- Verification: Lighthouse score improvement from 45 to 72
Example 2: Database Query Analysis
- Slow query identified: User profile fetch taking 340ms
- Root cause: Missing index on user_id foreign key
- Recommendation: Add INDEX on users.id and profile.user_id
- Est. improvement: 340ms → 8ms (97.6% reduction)
- Verify with: EXPLAIN ANALYZE before/after comparison
What's Included
- SKILL.md: Complete performance profiling methodology and decision framework
- Frontend Profiling Checklist: Chrome DevTools workflow for CPU, memory, and rendering analysis
- Backend Profiling Template: Node.js profiler setup and hotspot identification process
- Database Analysis Worksheet: EXPLAIN plan interpretation and query optimization steps
- Performance Report Template: Structured format for documenting bottlenecks and recommendations
Who It's For
- Full-Stack Engineers — Optimizing both frontend and backend performance across the entire stack
- Performance Engineers — Specializing in systematic bottleneck identification and remediation
- DevOps Engineers — Monitoring and optimizing production application resource usage
- Backend/Node.js Developers — Improving server-side execution speed and memory efficiency
- Frontend Developers — Diagnosing and fixing browser-based rendering and execution slowdowns
Best For
- Diagnosing "the app is slow" without a clear culprit
- Reducing page load time from high values to targets under 2 seconds
- Identifying memory leaks before they reach production
- Optimizing database queries causing request bottlenecks
- Establishing performance baselines for regression testing and monitoring
You might also like
You can systematically track player sentiment across Discord, Reddit, Twitter, Steam, and in-game chat to identify emerging issues, prioritize response efforts, and understand the root causes of player feedback. Rather than reacting to individual complaints, you'll use sentiment data to inform marketing strategy, escalate issues to development teams with evidence, and craft contextually appropriate responses that maintain brand voice while building community health and engagement.
by stella
You'll design live service events that balance gameplay experience, business objectives, and team capacity constraints. This skill helps you create detailed event plans with clear engagement targets, monetization mechanics, progression gates, and narrative framing—then roadmap multiple events across 6-12 months while accounting for seasonal patterns, player psychology, and resource availability. You'll communicate event intent clearly to design, marketing, and operations teams, and predict outcomes before implementation.
by stella
You can create comprehensive performance testing strategies tailored to your application's architecture, analyze test results to identify bottlenecks, and generate prioritized recommendations for optimization. The skill helps you design load tests, interpret metrics like latency and throughput, and create action plans for performance improvements.
You can design comprehensive performance test strategies tailored to your application architecture, analyze performance metrics and logs to identify bottlenecks, and receive specific optimization recommendations. The skill guides you through creating realistic load scenarios, interpreting performance data, and prioritizing fixes based on impact analysis.
You can analyze performance metrics from your applications to identify bottlenecks, automatically generate load test scripts tailored to your system architecture, and create detailed performance reports with actionable optimization recommendations. This skill processes performance data from various monitoring tools and transforms it into load testing strategies and optimization plans that your team can execute immediately.
You can verify that your frontend code works correctly in a real browser environment without manual testing. Inspect the live DOM structure, read console logs and errors, analyze network requests and API responses, capture performance data including Core Web Vitals, and take screenshots for visual verification—all through Claude's integration with Chrome DevTools MCP.