<< All versions
Skill v1.0.1
currentAutomated scan100/100onewave-ai/claude-skills/performance-profiler
1 files
──Details
PublishedAugust 18, 2026 at 05:52 PM
Content Hashsha256:e4072b6db7ba968d...
Git SHA82859c0ebaff
Bump Typepatch
──Files
Files (1 file, 4.1 KB)
SKILL.md4.1 KBactive
SKILL.md · 183 lines · 4.1 KB
version: "1.0.1" name: performance-profiler description: Profile and optimize application performance including load times, memory usage, and rendering. Use when debugging slow performance, memory leaks, or optimizing app speed.
Performance Profiler
Instructions
When profiling performance:
- Identify the bottleneck type: Network, rendering, memory, or compute
- Measure baseline before optimizing
- Profile with appropriate tools
- Apply optimizations
- Measure improvement
Web Performance
Core Web Vitals
bash
# Lighthouse CLInpx lighthouse https://yoursite.com --view# With specific metricsnpx lighthouse https://yoursite.com --only-categories=performance
Target Metrics:
| Metric | Good | Needs Work | Poor | |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5-4s | > 4s | |
| INP (Interaction to Next Paint) | < 200ms | 200-500ms | > 500ms | |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1-0.25 | > 0.25 |
Bundle Analysis
bash
# Next.jsANALYZE=true npm run build# Webpacknpx webpack-bundle-analyzer stats.json# Vitenpx vite-bundle-visualizer
React Performance
React DevTools Profiler
- Install React DevTools browser extension
- Open DevTools → Profiler tab
- Click Record, interact with app, stop recording
- Analyze flame graph for slow components
Common React Optimizations
tsx
// 1. Memoize expensive componentsconst MemoizedList = React.memo(function List({ items }) {return items.map(item => <Item key={item.id} {...item} />);});// 2. Use useMemo for expensive calculationsconst sortedItems = useMemo(() => {return [...items].sort((a, b) => a.name.localeCompare(b.name));}, [items]);// 3. Use useCallback for stable function referencesconst handleClick = useCallback((id: string) => {setSelected(id);}, []);// 4. Virtualize long listsimport { FixedSizeList } from 'react-window';function VirtualList({ items }) {return (<FixedSizeListheight={400}itemCount={items.length}itemSize={50}width="100%">{({ index, style }) => (<div style={style}>{items[index].name}</div>)}</FixedSizeList>);}// 5. Lazy load componentsconst HeavyComponent = React.lazy(() => import('./HeavyComponent'));function App() {return (<Suspense fallback={<Loading />}><HeavyComponent /></Suspense>);}
Node.js Performance
Profiling
bash
# CPU profilenode --prof app.jsnode --prof-process isolate-*.log > profile.txt# Heap snapshotnode --inspect app.js# Then use Chrome DevTools Memory tab# Clinic.js (comprehensive)npx clinic doctor -- node app.jsnpx clinic flame -- node app.jsnpx clinic bubbleprof -- node app.js
Memory Leak Detection
javascript
// Add to app for debuggingconst used = process.memoryUsage();console.log({heapUsed: `${Math.round(used.heapUsed / 1024 / 1024)} MB`,heapTotal: `${Math.round(used.heapTotal / 1024 / 1024)} MB`,external: `${Math.round(used.external / 1024 / 1024)} MB`,});
Database Performance
sql
-- PostgreSQL: Analyze slow queriesEXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@example.com';-- Find missing indexesSELECT relname, seq_scan, idx_scanFROM pg_stat_user_tablesWHERE seq_scan > idx_scan;
Query Optimization
typescript
// Bad: N+1 queryconst users = await db.user.findMany();for (const user of users) {const posts = await db.post.findMany({ where: { userId: user.id } });}// Good: Single query with includeconst users = await db.user.findMany({include: { posts: true }});// Good: Select only needed fieldsconst users = await db.user.findMany({select: { id: true, name: true, email: true }});
Quick Wins Checklist
- [ ] Enable gzip/brotli compression
- [ ] Add caching headers
- [ ] Lazy load images (
loading="lazy") - [ ] Preconnect to external domains
- [ ] Use CDN for static assets
- [ ] Minimize JavaScript bundle
- [ ] Defer non-critical JS
- [ ] Optimize images (WebP, proper sizing)
- [ ] Add database indexes
- [ ] Use connection pooling