Skip to content
Skillpedia
Deploy & cloud (DevOps)48k · #3817

performance-profiling

Teaches how to measure and improve program speed. It helps understand where problems are and how to fix them for better performance.

What it does

This tool helps find and fix issues that make websites and apps slow. It measures performance, identifies what's causing the slowness, and suggests how to fix it.

When to use it

  • ✓Your website loads slowly.
  • ✓Interactions in your app are lagging.
  • ✓You want to ensure your site is fast for all users.

Example of what to ask your AI

“Analyze the performance of my website at https://mysite.com”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/performance-profiling/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/performance-profiling/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The tool uses programs to measure your site's loading speed, responsiveness, and stability. Then, it shows which parts need improvement, like reducing file sizes or optimizing code.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add sickn33/agentic-awesome-skills --skill performance-profiling

Or download just the file:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/performance-profiling/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Performance Profiling

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.

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.
FAQ

What are 'Core Web Vitals'?

These are key metrics that measure the user experience regarding page loading, interactivity, and visual stability.

What's the difference between bundle size optimization and runtime optimization?

Bundle size optimization focuses on reducing the size of files the browser downloads. Runtime optimization focuses on making the code run faster after it has been downloaded.

What does 'bottleneck' mean?

A bottleneck is the part of your website or app that is causing the most slowness, limiting the overall performance.

Details

Original description by the author

Performance profiling principles. Measurement, analysis, and optimization techniques.

repo: sickn33/agentic-awesome-skills

Popularity

GitHub stars
48k
Ranking position
#3817
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills