Performance

Overview

Performance is a reference skill loaded by architects, SREs, and developers when designing or reviewing systems for speed and efficiency. It provides concise optimization patterns for the three main performance domains: resource loading, data access, and frontend rendering.

Optimization Patterns

• Lazy Loading — load resources and modules only when needed. Defer JavaScript, lazy-load images below the fold, dynamically import code-split modules. This reduces initial page weight and time-to-interactive.
• Caching — use caching layers (Redis, in-memory) for expensive operations. Cache database query results, API responses, and computed values. Establish cache invalidation strategies upfront — stale data is worse than slow data.
• Batching — batch database and API requests where possible. Replace N+1 query loops with single queries using JOINs or WHERE IN clauses. Batch API calls into bulk endpoints when available.

Database Performance

• Ensure indexes exist on all queried columns — missing indexes are the most common performance issue
• Avoid N+1 query problems — use include, eager loading, or batch loading patterns
• Profile slow queries with EXPLAIN and query logging

Frontend Performance

• Minimize bundle size — tree-shake, code-split, analyze with bundle visualizers
• Optimize images — use WebP format, responsive sizes, lazy loading
• Use virtualization for large lists — render only visible items
• Minimize layout shifts (CLS) — set explicit dimensions on images and embeds

When It's Used

The architect and SRE agents load this skill during design and review stages. It is a reference skill with no model assignment — it inherits the caller's model and adds performance considerations to their analysis.