---
id: sm-performance-optimization
name: "performance-optimization"
url: https://skills.yangsir.net/skill/sm-performance-optimization
author: supercent-io
domain: ai-system-observability-sre
tags: ["latency-reduction", "throughput-optimization", "caching-strategies", "database-tuning", "load-balancing"]
install_count: 11500
rating: 4.50 (458 reviews)
github: https://github.com/supercent-io/skills-template
---
# performance-optimization
> 此技能旨在解决页面加载缓慢、渲染延迟、包体积过大、资源占用高及数据库瓶颈等性能问题，优化系统响应速度和效率。
**Stats**: 11,500 installs · 4.5/5 (458 reviews)
## Before / After 对比
### Web 应用程序性能指标优化
| Metric | Before | After | Change |
|---|---|---|---|
| - | - | - | - |
| - | - | - | - |
| - | - | - | - |
| - | - | - | - |
| - | - | - | - |
## Readme
# performance-optimization
Performance Optimization When to use this skill Slow page loads: low Lighthouse score Slow rendering: delayed user interactions Large bundle size: increased download time Slow queries: database bottlenecks Instructions Step 1: Measure performance Lighthouse (Chrome DevTools): # CLI npm install -g lighthouse lighthouse https://example.com --view # Automate in CI lighthouse https://example.com --output=json --output-path=./report.json Measure Web Vitals (React): import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'; function sendToAnalytics(metric: any) { // Send to Google Analytics, Datadog, etc. console.log(metric); } getCLS(sendToAnalytics); getFID(sendToAnalytics); getFCP(sendToAnalytics); getLCP(sendToAnalytics); getTTFB(sendToAnalytics); Step 2: Optimize React React.memo (prevent unnecessary re-renders): // ❌ Bad: child re-renders whenever the parent re-renders function ExpensiveComponent({ data }: { data: Data }) { return {/* complex rendering */}
; } // ✅ Good: re-render only when props change const ExpensiveComponent = React.memo(({ data }: { data: Data }) => { return {/* complex rendering */}
; }); useMemo & useCallback: function ProductList({ products, category }: Props) { // ✅ Memoize filtered results const filteredProducts = useMemo(() => { return products.filter(p => p.category === category); }, [products, category]); // ✅ Memoize callback const handleAddToCart = useCallback((id: string) => { addToCart(id); }, []); return ( {filteredProducts.map(product => (
))}
Dashboard
}> ); } Step 3: Optimize bundle size Webpack Bundle Analyzer: npm install --save-dev webpack-bundle-analyzer # package.json { "scripts": { "analyze": "webpack-bundle-analyzer build/stats.json" } } Tree Shaking (remove unused code): // ❌ Bad: import entire library import _ from 'lodash'; // ✅ Good: import only what you need import debounce from 'lodash/debounce'; Dynamic Imports: // ✅ Load only when needed button.addEventListener('click', async () => { const { default: Chart } = await import('chart.js'); new Chart(ctx, config); }); Step 4: Optimize images Next.js Image component: import Image from 'next/image'; function ProductImage() { return ( ); } Use WebP format: 
Step 5: Optimize database queries Fix the N+1 query problem: // ❌ Bad: N+1 queries const posts = await db.post.findMany(); for (const post of posts) { const author = await db.user.findUnique({ where: { id: post.authorId } }); // 101 queries (1 + 100) } // ✅ Good: JOIN or include const posts = await db.post.findMany({ include: { author: true } }); // 1 query Add indexes: -- Identify slow queries EXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@example.com'; -- Add index CREATE INDEX idx_users_email ON users(email); -- Composite index CREATE INDEX idx_orders_user_date ON orders(user_id, created_at); Caching (Redis): async function getUserProfile(userId: string) { // 1. Check cache const cached = await redis.get(`user:${userId}`); if (cached) { return JSON.parse(cached); } // 2. Query DB const user = await db.user.findUnique({ where: { id: userId } }); // 3. Store in cache (1 hour) await redis.setex(`user:${userId}`, 3600, JSON.stringify(user)); return user; } Output format Performance optimization checklist ## Frontend - [ ] Prevent unnecessary re-renders with React.memo - [ ] Use useMemo/useCallback appropriately - [ ] Lazy loading & Code splitting - [ ] Optimize images (WebP, lazy loading) - [ ] Analyze and reduce bundle size ## Backend - [ ] Remove N+1 queries - [ ] Add database indexes - [ ] Redis caching - [ ] Compress API responses (gzip) - [ ] Use a CDN ## Measurement - [ ] Lighthouse score 90+ - [ ] LCP < 2.5s - [ ] FID < 100ms - [ ] CLS < 0.1 Constraints Required rules (MUST) Measure first: profile, don't guess Incremental improvements: optimize one thing at a time Performance monitoring: track continuously Prohibited items (MUST NOT) Premature optimization: don't optimize when there is no bottleneck Sacrificing readability: don't make code complex for performance Best practices 80/20 rule: 80% improvement with 20% effort User-centered: focus on improving real user experience Automation: performance regression tests in CI References web.dev/vitals React Optimization Webpack Bundle Analyzer Metadata Version Current version: 1.0.0 Last updated: 2025-01-01 Compatible platforms: Claude, ChatGPT, Gemini Related skills database-schema-design ui-components Tags #performance #optimization #React #caching #lazy-loading #web-vitals #code-quality Examples Example 1: Basic usage Example 2: Advanced usageWeekly Installs10.9KRepositorysupercent-io/sk…templateGitHub Stars53First SeenJan 24, 2026Security AuditsGen Agent Trust HubPassSocketFailSnykPassInstalled oncodex10.8Kgemini-cli10.8Kopencode10.8Kgithub-copilot10.8Kcursor10.8Kamp10.7K
---
*Source: https://skills.yangsir.net/skill/sm-performance-optimization*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-performance-optimization/markdown*