gh-anthemflynn-ccmp-plugins-website-debug/commands/perf.md

description, allowed-tools, model

description	allowed-tools	model
Analyze page performance - load times, DOM size, memory, and large resources.	Bash(*)	sonnet

Performance Analysis

Run a comprehensive performance analysis on the current page.

Use the performance-debugger agent for this task.

Collect Metrics

1. Page Load Timing:

   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
     const t = performance.timing;
     return {
       firstByte: t.responseStart - t.navigationStart,
       domInteractive: t.domInteractive - t.navigationStart,
       domContentLoaded: t.domContentLoadedEventEnd - t.navigationStart,
       loadComplete: t.loadEventEnd - t.navigationStart
     };
   })()'
   

2. DOM Analysis:

   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
     const all = document.querySelectorAll("*");
     return {
       totalElements: all.length,
       scripts: document.scripts.length,
       stylesheets: document.styleSheets.length,
       images: document.images.length
     };
   })()'
   

3. Large Resources:

   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js 'performance.getEntriesByType("resource").filter(r => r.transferSize > 50000).map(r => ({ name: r.name.split("/").pop(), kb: (r.transferSize/1024).toFixed(1) })).slice(0,10)'
   

4. Screenshot for context:

   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js
   

Report

Provide a summary with:

• Load time assessment (good/needs improvement/poor)
• DOM size assessment
• Largest resources
• Top 3 recommendations for improvement