/performance

name: performance
license: MIT
compatibility: "Claude Code 2.1.220+."
description: Performance optimization patterns covering Core Web Vitals, React render optimization, lazy loading, image optimization, backend profiling, LLM inference, and sustainability UX. Use when improving page speed, debugging slow renders, optimizing bundles, reducing image payload, profiling backend, deploying LLMs efficiently, or reducing digital carbon footprint.
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]
context: fork
agent: frontend-performance-engineer
version: 2.1.0
author: OrchestKit
user-invocable: false
disable-model-invocation: false
complexity: high
persuasion-type: guidance
effort: high
metadata:
  category: document-asset-creation
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 |