mcpField
P
performance-profiling

performance-profiling

github.com/sickn33Testing & quality48.7k1.0k installsUpdated today
Repository

About performance-profiling

A skill for measuring and improving website performance, with a baseline-to-validation workflow and a Lighthouse audit script. It helps developers assess loading, runtime, memory, and network behavior; lab scores alone do not represent real-user experience.

Key features

  1. 01Follow baseline, identify, fix, and validate steps
  2. 02Run performance audits with Lighthouse
  3. 03Analyze bundles, runtime, memory, and network
  4. 04Identify common bottlenecks by symptom

Use cases

  1. 01Check page loading on an authorized site
  2. 02Investigate script execution or rendering slowdowns
  3. 03Analyze bundle size and duplicate code
  4. 04Complement lab data with real-user monitoring

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill performance-profiling

After installing, type/performance-profilingin Claude Code to confirm it loaded.

Bundled filesscripts/lighthouse_audit.py

Details

From the project README

Performance Profiling

Measure, analyze, optimize - in that order.

🔧 Runtime Scripts

Inspect this bundled helper as code before use and run only against an authorized URL. Lighthouse launches a browser and can load third-party resources; lab scores do not establish field Core Web Vitals. The helper reports command/JSON failures and unavailable scores separately; inspect the returned error and do not treat an unavailable category as a zero score.

ScriptPurposeUsage
scripts/lighthouse_audit.pyLighthouse performance auditpython scripts/lighthouse_audit.py https://example.com

1. Core Web Vitals

Targets
MetricGoodPoorMeasures
LCP< 2.5s> 4.0sLoading
INP< 200ms> 500msInteractivity
CLS< 0.1> 0.25Stability
When to Measure
StageTool
DevelopmentLocal Lighthouse
CI/CDLighthouse CI
ProductionRUM (Real User Monitoring)

2. Profiling Workflow

The 4-Step Process
1. BASELINE → Measure current state
2. IDENTIFY → Find the bottleneck
3. FIX → Make targeted change
4. VALIDATE → Confirm improvement
Profiling Tool Selection
ProblemTool
Page loadLighthouse
Bundle sizeBundle analyzer
RuntimeDevTools Performance
MemoryDevTools Memory
NetworkDevTools Network

3. Bundle Analysis

What to Look For
IssueIndicator
Large dependenciesTop of bundle
Duplicate codeMultiple chunks
Unused codeLow coverage
Missing splitsSingle large chunk
Optimization Actions
FindingAction
Big libraryImport specific modules
Duplicate depsDedupe, update versions
Route in mainCode split
Unused exportsTree shake

4. Runtime Profiling

Performance Tab Analysis
PatternMeaning
Long tasks (>50ms)UI blocking
Many small tasksPossible batching opportunity
Layout/paintRendering bottleneck
ScriptJavaScript execution
Memory Tab Analysis
PatternMeaning
Growing heapPossible leak
Large retainedCheck references
Detached DOMNot cleaned up

5. Common Bottlenecks

By Symptom
SymptomLikely Cause
Slow initial loadLarge JS, render blocking
Slow interactionsHeavy event handlers
Jank during scrollLayout thrashing
Growing memoryLeaks, retained refs

6. Quick Win Priorities

PriorityActionImpact
1Enable compressionHigh
2Lazy load offscreen images; keep the LCP image eagerWorkload-dependent
3Code split routesHigh
4Cache static assetsMedium
5Optimize imagesMedium

7. Anti-Patterns

❌ Don't✅ Do
Guess at problemsProfile first
Micro-optimizeFix biggest issue
Optimize earlyOptimize when needed
Ignore real usersUse 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.

Comments

Markdown supported