58 lines
1.4 KiB
Markdown
58 lines
1.4 KiB
Markdown
---
|
|
name: performance
|
|
description: Performance optimization workflow for frontend applications
|
|
disable-model-invocation: true
|
|
---
|
|
|
|
# Performance
|
|
|
|
Optimize: $ARGUMENTS
|
|
|
|
## Process
|
|
|
|
1. **Identify the problem**
|
|
- What is slow? (initial load, interaction, render)
|
|
- Measure current performance
|
|
- Set a target improvement
|
|
|
|
2. **Analyze causes**
|
|
- Large bundle size?
|
|
- Unnecessary re-renders?
|
|
- Expensive calculations?
|
|
- Network waterfalls?
|
|
- Layout thrashing?
|
|
|
|
3. **React optimizations**
|
|
- Add `memo()` for expensive list items
|
|
- Use `useMemo` for costly computations
|
|
- Use `useCallback` for stable function refs
|
|
- Split components to isolate re-renders
|
|
- Lazy load with `dynamic()` or `React.lazy()`
|
|
|
|
4. **Bundle optimizations**
|
|
- Code split large dependencies
|
|
- Dynamic imports for heavy features
|
|
- Tree shake unused code
|
|
- Analyze with bundle analyzer
|
|
|
|
5. **Render optimizations**
|
|
- Virtualize long lists
|
|
- Debounce/throttle frequent updates
|
|
- Use CSS transforms over layout properties
|
|
- Avoid layout shifts
|
|
|
|
6. **Network optimizations**
|
|
- Preload critical resources
|
|
- Cache API responses
|
|
- Optimize images (WebP, lazy load)
|
|
- Reduce request waterfalls
|
|
|
|
7. **Verify improvement**
|
|
- Measure after changes
|
|
- Compare to baseline
|
|
- Test on slow devices/networks
|
|
|
|
## Output
|
|
|
|
Report optimizations applied and measured improvements.
|