<< All versions

Skill v1.0.0

currentAutomated scan100/100
wasabeef/claude-code-cookbook/analyze-performance
──Details
PublishedOctober 26, 2026 at 05:40 PM
Content Hashsha256:0b4955d5cf49fe7f...
Git SHAbf1ddd31cb5b
──Files
Files (1 file, 6.7 KB)
SKILL.md6.7 KBactive
SKILL.md · 179 lines · 6.7 KB

version: "1.0.0" description: 'Performance analysis based on Core Web Vitals with UX scoring. Trigger with "analyze performance", "improve speed", "check Core Web Vitals", "page speed", "improve LCP", "identify performance issues".' allowed-tools:

  • Read
  • Grep
  • Glob
  • Bash

Performance analysis based on Core Web Vitals

Analyzes application performance from a user experience perspective and quantifies experience improvements from optimizations. Calculates UX scores based on Core Web Vitals and proposes prioritized optimization strategies.

UX Performance Score

text
User Experience Score: B+ (78/100)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
⏱️ Core Web Vitals
├─ LCP (Loading): 2.3s [Good] Target<2.5s ✅
├─ INP (Interaction): 95ms [Good] Target<200ms ✅
├─ CLS (Visual Stability): 0.08 [Good] Target<0.1 ✅
├─ FCP (First Paint): 1.8s [Good] Target<1.8s ✅
├─ TTFB (Server): 450ms [Needs Work] Target<200ms ⚠️
└─ TTI (Interactive): 3.5s [Needs Work] Target<3.8s ⚠️
 
📊 Perceived Speed
├─ Initial Load: 2.3s [Industry avg: 3.0s]
├─ Page Navigation: 1.1s [Industry avg: 1.5s]
├─ Search Results: 0.8s [Industry avg: 1.2s]
├─ Form Submission: 1.5s [Industry avg: 2.0s]
└─ Image Loading: Lazy loading implemented ✅
 
😊 User Satisfaction Prediction
├─ Bounce Rate: 12% (Industry avg: 20%)
├─ Completion Rate: 78% (Target: 85%)
├─ NPS Score: +24 (Industry avg: +15)
└─ Return Rate: 65% (Target: 70%)
 
📊 User Experience Impact
├─ 0.5s faster display → -7% bounce rate
├─ 5% bounce reduction → +15% session length
├─ Search improvement → +15% time on site
└─ Overall UX improvement: +25%
 
🎯 Expected Improvement Effects (Priority Order)
├─ [P0] TTFB improvement (CDN) → LCP -0.3s = +15% perceived speed
├─ [P1] JS bundle optimization → TTI -0.8s = -20% interactive time
├─ [P2] Image optimization (WebP) → -40% transfer = -25% load time
└─ [P3] Cache strategy → 50% faster repeat visits

Usage

bash
# Comprehensive UX score analysis
find . -name "*.js" -o -name "*.ts" | xargs wc -l | sort -rn | head -10
"Calculate UX performance score and evaluate Core Web Vitals"
 
# Performance bottleneck detection
grep -r "for.*await\|forEach.*await" . --include="*.js"
"Detect async processing bottlenecks and analyze UX impact"
 
# User experience impact analysis
grep -r "addEventListener\|setInterval" . --include="*.js" | grep -v "removeEventListener\|clearInterval"
"Analyze performance impact on user experience"

Basic Examples

bash
# Bundle size and load time
npm ls --depth=0 && find ./public -name "*.js" -o -name "*.css" | xargs ls -lh
"Identify bundle size and asset optimization improvements"
 
# Database performance
grep -r "SELECT\|findAll\|query" . --include="*.js" | head -20
"Analyze database query optimization points"
 
# Dependency performance impact
npm outdated && npm audit
"Evaluate performance impact of outdated dependencies"

Analysis Perspectives

1. Code-Level Problems

  • O(n²) Algorithms: Detect inefficient array operations
  • Synchronous I/O: Identify blocking processes
  • Redundant Processing: Remove unnecessary calculations or requests
  • Memory Leaks: Manage event listeners and timers

2. Architecture-Level Problems

  • N+1 Queries: Database access patterns
  • Missing Cache: Repeated calculations or API calls
  • Bundle Size: Unnecessary libraries or code splitting
  • Resource Management: Connection pools and thread usage

3. Technical Debt Impact

  • Legacy Code: Performance degradation from old implementations
  • Design Issues: High coupling from poor responsibility distribution
  • Insufficient Testing: Missing performance regression detection
  • Monitoring Gaps: Early problem detection system

Performance Improvement ROI Matrix

text
Improvement ROI = (Time Savings + Quality Improvement) ÷ Implementation Effort
PriorityUX ImpactImplementation DifficultyTime SavingsExampleEffortEffect
[P0] Implement NowHighLow> 50%CDN implementation8hResponse -60%
[P1] Early ImplementationHighMedium20-50%Image optimization16hLoad -30%
[P2] Planned ImplementationLowHigh10-20%Code splitting40hInitial -15%
[P3] Hold/MonitorLowLow< 10%Minor optimizations20hPartial -5%

Priority Criteria

  • P0 (Immediate): High UX impact × Low difficulty = Maximum ROI
  • P1 (Early): High UX impact × Medium difficulty = High ROI
  • P2 (Planned): Low UX impact × High difficulty = Medium ROI
  • P3 (Hold): Low UX impact × Low difficulty = Low ROI

Performance Metrics and UX Improvement Correlation

MetricImprovementPerceived SpeedUser SatisfactionImplementation Effort
LCP (Loading)-0.5s+30%-7% bounce rate16h
INP (Interaction)-50ms+15%-20% stress8h
CLS (Visual Stability)-0.05+10%-50% misclicks4h
TTFB (Server)-200ms+25%+40% perceived speed24h
TTI (Interactive)-1.0s+35%+15% completion rate32h
Bundle Size-30%+20%+25% first visit16h

Measurement and Tools

Node.js / JavaScript

bash
# Profiling
node --prof app.js
clinic doctor -- node app.js
 
# Bundle analysis
npx webpack-bundle-analyzer
lighthouse --chrome-flags="--headless"

Database

sql
-- Query analysis
EXPLAIN ANALYZE SELECT ...
SHOW SLOW LOG;

Frontend

bash
# React performance
grep -r "useMemo\|useCallback" . --include="*.jsx"
 
# Resource analysis
find ./src -name "*.png" -o -name "*.jpg" | xargs ls -lh

Continuous Improvement

  • Regular Audits: Run weekly performance tests
  • Metrics Collection: Track response times and memory usage
  • Alert Setup: Automatic notifications for threshold violations
  • Team Sharing: Document improvement cases and anti-patterns
All versions