performance-regression-debugging
Identify and debug performance regressions from code changes. Use comparison and profiling to locate what degraded performance and restore baseline metrics.
Install
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill performance-regression-debuggingSKILL.md
Performance Regression Debugging
Table of Contents
Overview
Performance regressions occur when code changes degrade application performance. Detection and quick resolution are critical.
When to Use
- After deployment performance degrades
- Metrics show negative trend
- User complaints about slowness
- A/B testing shows variance
- Regular performance monitoring
Quick Start
Minimal working example:
// Before: 500ms response time
// After: 1000ms response time (2x slower = regression)
// Capture baseline metrics
const baseline = {
responseTime: 500, // ms
timeToInteractive: 2000, // ms
largestContentfulPaint: 1500, // ms
memoryUsage: 50, // MB
bundleSize: 150, // KB gzipped
};
// Monitor after change
const current = {
responseTime: 1000,
timeToInteractive: 4000,
largestContentfulPaint: 3000,
memoryUsage: 150,
bundleSize: 200,
};
// Calculate regression
const regressions = {};
for (let metric in baseline) {
const change = (current[metric] - baseline[metric]) / baseline[metric];
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Detection & Measurement | Detection & Measurement |
| Root Cause Identification | Root Cause Identification |
| Fixing & Verification | Fixing & Verification |
| Prevention Measures | Prevention Measures |
Best Practices
✅ DO
- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying
❌ DON'T
- Skip testing or validation
- Ignore error handling
- Hard-code configuration values
Related skills
improve-codebase-architecturemattpocock1MScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.codebase-designmattpocock691KShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.web-design-guidelinesvercel-labs676KReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".code-reviewmattpocock631KReview the changes since a fixed point (commit, branch, tag, or merge-base) along two axes: Standards (does the code follow this repo's documented coding standards?) and Spec (does the code match what the originating issue/spec asked for?). Runs both reviews in parallel sub-agents and reports them side by side. Use when the user wants to review a branch, a PR, work-in-progress changes, or asks to \"review since X\".