/performance

name: performance
license: MIT
compatibility: "Claude Code 2.1.277+."
description: "Performance patterns: Core Web Vitals, React renders, lazy loading, images, backend profiling, LLM inference. Use when improving page speed, slow renders, bundle size or backend latency."
user-invocable: false
disable-model-invocation: false
effort: high
metadata:
  owner-agent: "frontend-performance-engineer"
  category: document-asset-creation
  version: "2.1.0"
  author: "OrchestKit"
  complexity: "high"
  tags: "performance, core-web-vitals, lcp, inp, cls, react-compiler, virtualization, lazy-loading, code-splitting, image-optimization, avif, profiling, vllm, quantization, inference, caching, redis, prompt-caching, tanstack-query, prefetching, optimistic-updates, sustainability, carbon-footprint, page-weight"
allowed-tools: "Read Glob Grep WebFetch WebSearch"

Performance

Comprehensive performance optimization patterns for frontend, backend, and LLM inference.

Quick Reference

| Category | Rules | Impact | When to Use | |----------|-------|--------|-------------| | [Core Web Vitals](#core-web-vitals) | 4 | CRITICAL | LCP, INP, CLS optimization with 2026 thresholds | | [Render Optimization](#render-optimization) | 3 | HIGH | React Compiler, memoization, virtualization | | [Lazy Loading](#lazy-loading) | 3 | HIGH | Code splitting, route splitting, preloading | | [Image Optimization](#image-optimization) | 2 | HIGH | AVIF/WebP formats, responsive images | | [Profiling & Backend](#profiling--backend) | 3 | MEDIUM | React DevTools, py-spy, bundle analysis | | [LLM Inference](#llm-inference) | 3 | MEDIUM | vLLM, quantization, speculative decoding | | [Caching](#caching) | 2 | HIGH | Redis cache-aside, prompt caching, HTTP cache headers | | [Query & Data Fetching](#query--data-fetching) | 2 | HIGH | TanStack Query prefetching, optimistic updates, rollback | | [Sustainability](#sustainability) | 1 | MEDIUM | Page weight budgets, lazy loading, optimized formats, dark mode |

**Total: 23 rules across 9 categories**

Core Web Vitals

Google's Core Web Vitals with 2026 stricter thresholds.

| Rule | File | Key Pattern | |------|------|-------------| | LCP Optimization | `rules/cwv-lcp.md` | Preload hero, SSR, fetchpriority="high" | | INP Optimization | `rules/cwv-inp.md` | scheduler.yield, useTransition, requestIdleCallback | | INP Advanced | `rules/cwv-inp-advanced.md` | Layout thrashing, third-party scripts, rAF patterns | | CLS Prevention | `rules/cwv-cls.md` | Explicit dimensions, aspect-ratio, font-display |

2026 Thresholds

| Metric | Current Good | 2026 Good | |--------|--------------|-----------| | LCP | <= 2.5s | <= 2.0s | | INP | <= 200ms | <= 150ms | | CLS | <= 0.1 | <= 0.08 |

Render Optimization

React render performance patterns for React 19+.

| Rule | File | Key Pattern | |------|------|-------------| | React Compiler | `rules/render-compiler.md` | Auto-memoization, "Memo" badge verification | | Manual Memoization | `rules/render-memo.md` | useMemo/useCallback escape hatches, state colocation | | Virtualization | `rules/render-virtual.md` | TanStack Virtual for 100+ item lists |

Lazy Loading

Code splitting and lazy loading with React.lazy and Suspense.

| Rule | File | Key Pattern | |------|------|-------------| | React.lazy + Suspense | `rules/loading-lazy.md` | Component lazy loading, error boundaries | | Route Splitting | `rules/loading-splitting.md` | React Router 7.x, Vite manual chunks | | Preloading | `rules/loading-preload.md` | Prefetch on hover, modulepreload hints |

Image Optimization

Production image optimization for modern web applications.

| Rule | File | Key Pattern | |------|------|-------------| | Format Selection | `rules/images-formats.md` | AVIF/WebP, quality 75-85, picture element | | Responsive Images | `rules/images-responsive.md` | sizes prop, art direction, CDN loaders |

Next.js `Image` component usage and the v16 image config defaults are first-party territory; see "Upstream coverage (do not restate)" below.

Profiling & Backend

Profiling tools and backend optimization patterns.

| Rule | File | Key Pattern | |------|------|-------------| | React Profiling | `rules/profiling-react.md` | DevTools Profiler, flamegraph, render counts | | Backend Profiling | `rules/profiling-backend.md` | py-spy, cProfile, memory_profiler, flame graphs | | Bundle Analysis | `rules/profiling-bundle.md` | vite-bundle-visualizer, tree shaking, performance budgets |

LLM Inference

High-performance LLM inference with vLLM, quantization, and speculative decoding.

| Rule | File | Key Pattern | |------|------|-------------| | vLLM Deployment | `rules/inference-vllm.md` | PagedAttention, continuous batching, tensor parallelism | | Quantization | `rules/inference-quantization.md` | AWQ, GPTQ, FP8, INT8 method selection | | Speculative Decoding | `rules/inference-speculative.md` | N-gram, draft model, 1.5-2.5x throughput |

Caching

Backend Redis caching and LLM prompt caching for cost savings and performance.

| Rule | File | Key Pattern | |------|------|-------------| | Redis & Backend | `rules/caching-redis.md` | Cache-aside, write-through, invalidation, stampede prevention | | HTTP & Prompt | `rules/caching-http.md` | HTTP cache headers, LLM prompt caching, semantic caching |

Query & Data Fetching

TanStack Query v5 patterns for prefetching and optimistic updates.

| Rule | File | Key Pattern | |------|------|-------------| | Prefetching | `rules/query-prefetching.md` | Hover prefetch, route loaders, queryOptions, Suspense | | Optimistic Updates | `rules/query-optimistic.md` | Optimistic mutations, rollback, cache invalidation |

Sustainability

Digital sustainability patterns for reducing carbon footprint and energy usage.

| Rule | File | Key Pattern | |------|------|-------------| | Sustainability UX | `rules/sustainability-ux.md` | Page weight budgets, AVIF/WebP, lazy loading, dark mode |

Local Profiling Target

When profiling a local