What is performance profiling?

It is a skill that teaches an agent to measure, analyze, and optimize website performance using Core Web Vitals, Lighthouse audits, and browser profiler patterns.

What tools does it use?

It uses a bundled Lighthouse audit script, Core Web Vitals targets, bundle analysis, and browser DevTools Performance and Memory patterns.

What order should profiling follow?

Measure, analyze, optimize. Start with a baseline, identify the bottleneck, make a targeted fix, then validate the improvement.

What are common bottlenecks?

Slow initial load from large JS or render blocking, slow interactions from heavy event handlers, jank from layout thrashing, and growing memory from leaks.

Performance Profiling

SkillAI & models

Performance profiling is a skill that teaches an AI agent a measure-analyze-fix workflow for website speed. It guides your agent through measuring website speed, finding bottlenecks like slow page loads, and applying fixes. The skill covers Core Web Vitals targets, Lighthouse audits via a bundled script, and browser profiler patterns for runtime and memory issues.

Use Performance Profiling in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Performance Profiling and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Performance Profiling skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have an AI agent that can read files and run shell commands.

Performance ProfilingStart free

What your AI can do with it

Run Lighthouse audits with scripts/lighthouse_audit.py
Check Core Web Vitals targets for LCP, INP, and CLS
Analyze bundles for large dependencies and duplicate code
Profile runtime with DevTools Performance and Memory patterns
Identify common bottlenecks by symptom and prioritize quick wins

Getting started

Have an AI agent that can read files and run shell commands.
Add the performance-profiling skill to the agent's available skills.
Ensure Python is available so the agent can run scripts/lighthouse_audit.py.
Ask the agent to profile a page or bundle and apply fixes.

What this skill tells your AI

The instructions your AI receives, as published by davila7/claude-code-templates in cli-tool/components/skills/development/performance-profiling/SKILL.md and read by ahel’s review.

Measure, analyze, optimize - in that order.

🔧 Runtime Scripts

Execute these for automated profiling:

Script	Purpose	Usage
`scripts/lighthouse_audit.py`	Lighthouse performance audit	`python scripts/lighthouse_audit.py https://example.com`

1. Core Web Vitals

Targets

Metric	Good	Poor	Measures
LCP	< 2.5s	> 4.0s	Loading
INP	< 200ms	> 500ms	Interactivity
CLS	< 0.1	> 0.25	Stability

When to Measure

Stage	Tool
Development	Local Lighthouse
CI/CD	Lighthouse CI
Production	RUM (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

Problem	Tool
Page load	Lighthouse
Bundle size	Bundle analyzer
Runtime	DevTools Performance
Memory	DevTools Memory
Network	DevTools Network

3. Bundle Analysis

What to Look For

Issue	Indicator
Large dependencies	Top of bundle
Duplicate code	Multiple chunks
Unused code	Low coverage
Missing splits	Single large chunk

Optimization Actions

Finding	Action
Big library	Import specific modules
Duplicate deps	Dedupe, update versions
Route in main	Code split
Unused exports	Tree shake

4. Runtime Profiling

Performance Tab Analysis

Pattern	Meaning
Long tasks (>50ms)	UI blocking
Many small tasks	Possible batching opportunity
Layout/paint	Rendering bottleneck
Script	JavaScript execution

Memory Tab Analysis

Pattern	Meaning
Growing heap	Possible leak
Large retained	Check references
Detached DOM	Not cleaned up

5. Common Bottlenecks

By Symptom

Symptom	Likely Cause
Slow initial load	Large JS, render blocking
Slow interactions	Heavy event handlers
Jank during scroll	Layout thrashing
Growing memory	Leaks, retained refs

6. Quick Win Priorities

Priority	Action	Impact
1	Enable compression	High
2	Lazy load images	High
3	Code split routes	High
4	Cache static assets	Medium
5	Optimize images	Medium

7. Anti-Patterns

❌ Don't	✅ Do
Guess at problems	Profile first
Micro-optimize	Fix biggest issue
Optimize early	Optimize when needed
Ignore real users	Use RUM data

Remember: The fastest code is code that doesn't run. Remove before optimizing.

Signals

GitHub stars: 32k
Forks: 4k
Last commit: Oct 2026

ahel review

K1binfo
installs-packages (in scripts/lighthouse_audit.py)

Automated review, not a security audit. Ruleset v1+k2.

Others that do the same job

performance-profiling
Skill · vodailocz

Questions

What is performance profiling?: It is a skill that teaches an agent to measure, analyze, and optimize website performance using Core Web Vitals, Lighthouse audits, and browser profiler patterns.
What tools does it use?: It uses a bundled Lighthouse audit script, Core Web Vitals targets, bundle analysis, and browser DevTools Performance and Memory patterns.
What order should profiling follow?: Measure, analyze, optimize. Start with a baseline, identify the bottleneck, make a targeted fix, then validate the improvement.
What are common bottlenecks?: Slow initial load from large JS or render blocking, slow interactions from heavy event handlers, jank from layout thrashing, and growing memory from leaks.

Advanced

Item type: skill
Key: performance-profiling-davila7
Source: github.com/davila7/claude-code-templates

github.com/davila7/claude-code-templates