performance-optimizer

Original：🇺🇸 English
Translated

Optimize application performance and scalability. Use when investigating slow applications, scaling bottlenecks, or improving response times. Use for profiling, caching, database optimization, frontend performance, and backend tuning.

39installs
Sourceoakoss/agent-skills
Added on

NPX Install

npx skill4agent add oakoss/agent-skills performance-optimizer

Tags

Translated version includes tags in frontmatter
performance-optimizationfull-stack-tuningdatabase-optimizationcaching-strategiesfrontend-performance

SKILL.md Content

View Translation Comparison →

Performance Optimizer

Overview

Provides a systematic approach to application performance optimization across the full stack. Use when diagnosing slow page loads, high API latency, database bottlenecks, or scaling issues. Not a substitute for application-specific profiling -- always measure before optimizing.

Quick Reference

Performance Budgets

MetricTargetCategory
Largest Contentful Paint (LCP)< 2.5sCore Web Vital
Interaction to Next Paint (INP)< 200msCore Web Vital
Cumulative Layout Shift (CLS)< 0.1Core Web Vital
First Contentful Paint (FCP)< 1.8sFrontend
Time to Interactive (TTI)< 3.8sFrontend
Total Blocking Time (TBT)< 200msFrontend
API Response Time (P95)< 500msBackend
Database Query Time (P95)< 100msDatabase
Server Response Time (TTFB)< 600msBackend

Optimization Phases

PhaseFocusKey Action
1. ProfilingIdentify real bottlenecksChrome DevTools, React Profiler, EXPLAIN ANALYZE
2. DatabaseEliminate slow queriesStrategic indexes, fix N+1, connection pooling
3. CachingReduce redundant workRedis, HTTP headers, CDN for static assets
4. FrontendReduce bundle and render timeBundle analysis, code splitting, resource hints, lazy loading
5. BackendSpeed up API responsesServerless optimization, streaming, conditional requests, queues
6. MonitoringSustain performanceAPM tools, alerting thresholds, dashboards

Caching Layers

LayerScopeDuration
Browser CacheHTTP headersStatic assets: 1 year (immutable); HTML: no-cache
CDNCloudflare, CloudFrontSame as browser, purge on deploy
ApplicationRedis, MemcachedVaries (e.g., 1 hour for user data)
DatabaseQuery cacheAutomatic

Common Mistakes

MistakeCorrect Pattern
Optimizing before profilingMeasure first with Chrome DevTools, EXPLAIN ANALYZE, or APM tools to find real bottlenecks
Adding indexes on every columnUse strategic indexes on columns in WHERE, ORDER BY, and JOIN clauses; monitor with slow query log
SELECT * on large tablesSelect only needed columns to reduce I/O and memory
N+1 queries in loopsEager loading or DataLoader batching
Functions in WHERE clauseStore normalized values, use generated columns to preserve index usage
Caching without an invalidation strategyDefine TTL and invalidate-on-write policies; stale cache is worse than no cache
Loading entire libraries for a single utilityUse direct imports and tree-shaking
Running heavy computations synchronously in request handlersOffload to background job queues (BullMQ) and return immediately

Delegation

When working on performance optimization, delegate to:
  • frontend-builder
    -- React-specific performance patterns
  • application-security
    -- Rate limiting and DDoS protection
  • ci-cd-architecture
    -- Build pipeline optimization

References

  • Profiling and Measurement -- Chrome DevTools, React Profiler, Node.js/Python profiling, database EXPLAIN
  • Database Optimization -- Strategic indexes, N+1 fixes, query optimization, connection pooling
  • Caching Strategies -- Redis patterns, HTTP cache headers, CDN configuration
  • Frontend Performance -- Bundle analysis, code splitting, resource hints, third-party scripts, mobile performance, React patterns
  • Backend Performance -- Serverless optimization, streaming responses, conditional requests, background queues, rate limiting
  • Monitoring and Alerting -- APM tools, custom monitoring, dashboards, alert thresholds