Loading...
Loading...
Profile and optimize application performance including load times, memory usage, and rendering. Use when debugging slow performance, memory leaks, or optimizing app speed.
npx skill4agent add onewave-ai/claude-skills performance-profiler# Lighthouse CLI
npx lighthouse https://yoursite.com --view
# With specific metrics
npx lighthouse https://yoursite.com --only-categories=performance| 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 |
# Next.js
ANALYZE=true npm run build
# Webpack
npx webpack-bundle-analyzer stats.json
# Vite
npx vite-bundle-visualizer// 1. Memoize expensive components
const MemoizedList = React.memo(function List({ items }) {
return items.map(item => <Item key={item.id} {...item} />);
});
// 2. Use useMemo for expensive calculations
const sortedItems = useMemo(() => {
return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]);
// 3. Use useCallback for stable function references
const handleClick = useCallback((id: string) => {
setSelected(id);
}, []);
// 4. Virtualize long lists
import { FixedSizeList } from 'react-window';
function VirtualList({ items }) {
return (
<FixedSizeList
height={400}
itemCount={items.length}
itemSize={50}
width="100%"
>
{({ index, style }) => (
<div style={style}>{items[index].name}</div>
)}
</FixedSizeList>
);
}
// 5. Lazy load components
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<Loading />}>
<HeavyComponent />
</Suspense>
);
}# CPU profile
node --prof app.js
node --prof-process isolate-*.log > profile.txt
# Heap snapshot
node --inspect app.js
# Then use Chrome DevTools Memory tab
# Clinic.js (comprehensive)
npx clinic doctor -- node app.js
npx clinic flame -- node app.js
npx clinic bubbleprof -- node app.js// Add to app for debugging
const 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`,
});-- PostgreSQL: Analyze slow queries
EXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@example.com';
-- Find missing indexes
SELECT relname, seq_scan, idx_scan
FROM pg_stat_user_tables
WHERE seq_scan > idx_scan;// Bad: N+1 query
const users = await db.user.findMany();
for (const user of users) {
const posts = await db.post.findMany({ where: { userId: user.id } });
}
// Good: Single query with include
const users = await db.user.findMany({
include: { posts: true }
});
// Good: Select only needed fields
const users = await db.user.findMany({
select: { id: true, name: true, email: true }
});loading="lazy"