# Performance Optimization > Optimiza el rendimiento en frontend, backend, consultas y bases de datos. Úsalo cuando haya requisitos de rendimiento, sospecha de regresión, Core Web Vitals bajos, patrones N+1 o cuellos de botella detectados por profiling. Fuente: https://skillsagentes.com/skills/addyosmani/agent-skills/performance-optimization Markdown: https://skillsagentes.com/skills/addyosmani/agent-skills/performance-optimization.md Repositorio: https://github.com/addyosmani/agent-skills Autor: addyosmani Licencia: MIT Actualizado: hace 10 días Coste de contexto: 74 tok instalada, 3.8k tok al activarse, 3.8k tok con todos los archivos del bundle Bundle: 1 archivo, 15 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add addyosmani/agent-skills --skill performance-optimization --agent claude-code # Cursor npx -y skills add addyosmani/agent-skills --skill performance-optimization --agent cursor # Codex npx -y skills add addyosmani/agent-skills --skill performance-optimization --agent codex # Gemini CLI npx -y skills add addyosmani/agent-skills --skill performance-optimization --agent gemini # Windsurf npx -y skills add addyosmani/agent-skills --skill performance-optimization --agent windsurf # Cline npx -y skills add addyosmani/agent-skills --skill performance-optimization --agent cline ``` ## Qué hace - Aplica un flujo Measure→Identify→Fix→Verify→Guard para optimizar frontend, backend y consultas a bases de datos - Detecta y corrige patrones N+1, fetch de datos sin límites, imágenes sin optimizar y re-renders innecesarios en React - Define umbrales de Core Web Vitals (LCP, INP, CLS) y presupuestos de rendimiento (bundle, CSS, imágenes, fuentes) - Obliga a re-medir tras cada cambio y a revertir mejoras 'neutrales' o que rompan tests - Mantiene un registro de intentos, incluidos los revertidos, para no repetir experimentos fallidos ## Cuándo usarla - Existen requisitos de rendimiento en el spec (presupuestos de carga, SLAs de respuesta) - Usuarios o monitoreo reportan comportamiento lento - Las puntuaciones de Core Web Vitals están por debajo de los umbrales - Se sospecha que un cambio introdujo una regresión de rendimiento ## Cuándo no - No optimizar antes de tener evidencia de un problema; la optimización prematura añade complejidad sin beneficio medible ## Qué la activa - "La página web está lenta, ayúdame a mejorar el LCP" - "Creo que esta consulta tiene un problema N+1, revísala" - "Necesito bajar el bundle size de la app por debajo de 200KB" - "Verifica si esta optimización realmente mejoró el rendimiento" ## Antes de instalar - Requiere herramientas de medición como Lighthouse, Chrome DevTools, la librería web-vitals o un APM configurado. - Necesita en el PATH: npx ## Archivos - SKILL.md — 15 KB ## SKILL.md Reproducido tal cual desde addyosmani/agent-skills bajo MIT. Esta sección es el documento original y está en inglés. # Performance Optimization ## Overview Measure before optimizing. Performance work without measurement is guessing — and guessing leads to premature optimization that adds complexity without improving what matters. Profile first, identify the actual bottleneck, fix it, measure again. Optimize only what measurements prove matters. ## When to Use - Performance requirements exist in the spec (load time budgets, response time SLAs) - Users or monitoring report slow behavior - Core Web Vitals scores are below thresholds - You suspect a change introduced a regression - Building features that handle large datasets or high traffic **When NOT to use:** Don't optimize before you have evidence of a problem. Premature optimization adds complexity that costs more than the performance it gains. ## Core Web Vitals Targets | Metric | Good | Needs Improvement | Poor | |--------|------|-------------------|------| | **LCP** (Largest Contentful Paint) | ≤ 2.5s | ≤ 4.0s | > 4.0s | | **INP** (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms | | **CLS** (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 | ## The Optimization Workflow ``` 1. MEASURE → Establish baseline with real data 2. IDENTIFY → Find the actual bottleneck (not assumed) 3. FIX → Address the specific bottleneck 4. VERIFY → Measure again; keep or revert 5. GUARD → Add monitoring or tests to prevent regression ``` ### Step 1: Measure Two complementary approaches — use both: - **Synthetic (Lighthouse, DevTools Performance tab):** Controlled conditions, reproducible. Best for CI regression detection and isolating specific issues. - **RUM (web-vitals library, CrUX):** Real user data in real conditions. Required to validate that a fix actually improved user experience. **Frontend:** ```bash # Synthetic: Lighthouse in Chrome DevTools (or CI) # Chrome DevTools → Performance tab → Record # Chrome DevTools MCP → Performance trace # RUM: Web Vitals library in code import { onLCP, onINP, onCLS } from 'web-vitals'; onLCP(console.log); onINP(console.log); onCLS(console.log); ``` **Backend:** ```bash # Response time logging # Application Performance Monitoring (APM) # Database query logging with timing # Simple timing console.time('db-query'); const result = await db.query(...); console.timeEnd('db-query'); ``` ### Where to Start Measuring Use the symptom to decide what to measure first: ``` What is slow? ├── First page load │ ├── Large bundle? --> Measure bundle size, check code splitting │ ├── Slow server response? --> Measure TTFB in DevTools Network waterfall │ │ ├── DNS long? --> Add dns-prefetch / preconnect for known origins │ │ ├── TCP/TLS long? --> Enable HTTP/2, check edge deployment, keep-alive │ │ └── Waiting (server) long? --> Profile backend, check queries and caching │ └── Render-blocking resources? --> Check network waterfall for CSS/JS blocking ├── Interaction feels sluggish │ ├── UI freezes on click? --> Profile main thread, look for long tasks (>50ms) │ ├── Form input lag? --> Check re-renders, controlled component overhead │ └── Animation jank? --> Check layout thrashing, forced reflows ├── Page after navigation │ ├── Data loading? --> Measure API response times, check for waterfalls │ └── Client rendering? --> Profile component render time, check for N+1 fetches └── Backend / API ├── Single endpoint slow? --> Profile database queries, check indexes ├── All endpoints slow? --> Check connection pool, memory, CPU └── Intermittent slowness? --> Check for lock contention, GC pauses, external deps ``` ### Step 2: Identify the Bottleneck Common bottlenecks by category: **Frontend:** | Symptom | Likely Cause | Investigation | |---------|-------------|---------------| | Slow LCP | Large images, render-blocking resources, slow server | Check network waterfall, image sizes | | High CLS | Images without dimensions, late-loading content, font shifts | Check layout shift attribution | | Poor INP | Heavy JavaScript on main thread, large DOM updates | Check long tasks in Performance trace | | Slow initial load | Large bundle, many network requests | Check bundle size, code splitting | **Backend:** | Symptom | Likely Cause | Investigation | |---------|-------------|---------------| | Slow API responses | N+1 queries, missing indexes, unoptimized queries | Check database query log | | Memory growth | Leaked references, unbounded caches, large payloads | Heap snapshot analysis | | CPU spikes | Synchronous heavy computation, regex backtracking | CPU profiling | | High latency | Missing caching, redundant computation, network hops | Trace requests through the stack | ### Step 3: Fix Common Anti-Patterns #### N+1 Queries (Backend) ```typescript // BAD: N+1 — one query per task for the owner const tasks = await db.tasks.findMany(); for (const task of tasks) { task.owner = await db.users.findUnique({ where: { id: task.ownerId } }); } // GOOD: Single query with join/include const tasks = await db.tasks.findMany({ include: { owner: true }, }); ``` #### Unbounded Data Fetching ```typescript // BAD: Fetching all records const allTasks = await db.tasks.findMany(); // GOOD: Paginated with limits const tasks = await db.tasks.findMany({ take: 20, skip: (page - 1) * 20, orderBy: { createdAt: 'desc' }, }); ``` #### Missing Image Optimization (Frontend) ```html Hero image description Content image description ``` #### Unnecessary Re-renders (React) ```tsx // BAD: Creates new object on every render, causing children to re-render function TaskList() { return ; } // GOOD: Stable reference const DEFAULT_OPTIONS = { sortBy: 'date', order: 'desc' } as const; function TaskList() { return ; } // Use React.memo for expensive components const TaskItem = React.memo(function TaskItem({ task }: Props) { return
{/* expensive render */}
; }); // Use useMemo for expensive computations function TaskStats({ tasks }: Props) { const stats = useMemo(() => calculateStats(tasks), [tasks]); return
{stats.completed} / {stats.total}
; } ``` #### Large Bundle Size ```typescript // Modern bundlers (Vite, webpack 5+) handle named imports with tree-shaking automatically, // provided the dependency ships ESM and is marked `sideEffects: false` in package.json. // Profile before changing import styles — the real gains come from splitting and lazy loading. // GOOD: Dynamic import for heavy, rarely-used features const ChartLibrary = lazy(() => import('./ChartLibrary')); // GOOD: Route-level code splitting wrapped in Suspense const SettingsPage = lazy(() => import('./pages/Settings')); function App() { return ( }> ); } ``` #### Missing Caching (Backend) ```typescript // Cache frequently-read, rarely-changed data const CACHE_TTL = 5 * 60 * 1000; // 5 minutes let cachedConfig: AppConfig | null = null; let cacheExpiry = 0; async function getAppConfig(): Promise { if (cachedConfig && Date.now() < cacheExpiry) { return cachedConfig; } cachedConfig = await db.config.findFirst(); cacheExpiry = Date.now() + CACHE_TTL; return cachedConfig; } // HTTP caching headers for static assets app.use('/static', express.static('public', { maxAge: '1y', // Cache for 1 year immutable: true, // Never revalidate (use content hashing in filenames) })); // Cache-Control for API responses res.set('Cache-Control', 'public, max-age=300'); // 5 minutes ``` ### Step 4: Verify (Keep or Revert) A fix is a hypothesis until you re-measure. This step decides whether it survives. **Re-measure the way you measured the baseline:** same command, same conditions, same fixed budget (wall-clock, sample count, or request count). A baseline taken on a cold cache against a result taken on a warm one measures the cache, not your change. **Change one thing at a time.** Three optimizations landed together produce one number, and you cannot attribute it. If they must ship together, measure each in isolation first. **Beat the noise, not just the mean.** Repeat the measurement and compare the delta against run-to-run variance. A 3% gain inside ±5% variance is not a gain; it is a different sample. Then decide, strictly: | Result vs. baseline | Action | |---|---| | Past the threshold, tests green | **Keep.** Commit with the before/after numbers in the message. | | Within noise (no measurable change) | **Revert.** | | Worse | **Revert.** | | Improved, but a test went red | **Revert.** A regression wearing a win's clothing. | **"Neutral" is a revert, not a keep.** This is the step teams skip: the change is already written, throwing it away feels wasteful, so it lands unmeasured, and the codebase accretes complexity that never bought anything. Code you keep, you maintain forever. Make it pay for itself. **Correctness gates the metric.** The suite stays green *and* the number moves. An "optimization" that wins by dropping work the product needed (skipping a validation, caching something that must be fresh, removing an `await` that was load-bearing) is a regression, not a win. #### Log every attempt, including the reverted ones Reverted work leaves no trace in git history, which is exactly why the same dead idea gets tried again next quarter. Keep a short ledger so a discarded idea stays discarded: | Idea | Baseline → Result | Verdict | Why | |---|---|---|---| | Memoize the row component | INP 240ms → 235ms | reverted | Inside noise (±15ms). Rows weren't the bottleneck. | | Virtualize the list | INP 240ms → 90ms | kept | Long tasks gone from the trace. | | Preconnect to the API origin | LCP 2.8s → 2.8s | reverted | Already same-origin. | A section in the PR description or a `PERF.md` in the repo both work. What matters is that the next person (or the next agent) reads it before proposing an experiment, and doesn't re-run one that already failed. ## Performance Budget Set budgets and enforce them: ``` JavaScript bundle: < 200KB gzipped (initial load) CSS: < 50KB gzipped Images: < 200KB per image (above the fold) Fonts: < 100KB total API response time: < 200ms (p95) Time to Interactive: < 3.5s on 4G Lighthouse Performance score: ≥ 90 ``` **Enforce in CI:** ```bash # Bundle size check npx bundlesize --config bundlesize.config.json # Lighthouse CI npx lhci autorun ``` ## See Also For detailed performance checklists, optimization commands, and anti-pattern reference, see `../../references/performance-checklist.md`. ## Common Rationalizations | Rationalization | Reality | |---|---| | "We'll optimize later" | Performance debt compounds. Fix obvious anti-patterns now, defer micro-optimizations. | | "It's fast on my machine" | Your machine isn't the user's. Profile on representative hardware and networks. | | "This optimization is obvious" | If you didn't measure, you don't know. Profile first. | | "Users won't notice 100ms" | Research shows 100ms delays impact conversion rates. Users notice more than you think. | | "The framework handles performance" | Frameworks prevent some issues but can't fix N+1 queries or oversized bundles. | | "It didn't help much, but it doesn't hurt" | Neutral changes are a revert. You pay maintenance on them forever and got nothing back. | | "We already wrote it, may as well keep it" | Sunk cost. The measurement doesn't care how long the change took to write. | | "The improvement is obvious, no need to re-measure" | Then re-measuring is cheap and proves it. Unmeasured wins are how neutral complexity lands. | ## Red Flags - Optimization without profiling data to justify it - N+1 query patterns in data fetching - List endpoints without pagination - Images without dimensions, lazy loading, or responsive sizes - Bundle size growing without review - No performance monitoring in production - `React.memo` and `useMemo` everywhere (overusing is as bad as underusing) - Optimizations kept without a re-measurement that justifies them - Several optimizations bundled into one measurement, so no single change can be attributed - A "win" that required a test to be changed, skipped, or deleted - The same failed optimization attempted more than once because nobody recorded the first attempt ## Verification After any performance-related change: - [ ] Before and after measurements exist (specific numbers) - [ ] The result was re-measured the same way as the baseline (same command, same conditions) - [ ] The improvement exceeds run-to-run variance, not just the mean - [ ] Changes that didn't beat the baseline were reverted, not kept as neutral - [ ] Attempts are logged, kept and reverted alike, so a dead idea isn't re-run - [ ] The specific bottleneck is identified and addressed - [ ] Core Web Vitals are within "Good" thresholds - [ ] Bundle size hasn't increased significantly - [ ] No N+1 queries in new data fetching code - [ ] Performance budget passes in CI (if configured) - [ ] Existing tests still pass (optimization didn't break behavior) ## Dónde encaja - Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código. - Creador: [addyosmani](https://skillsagentes.com/creators/addyosmani.md) — 5 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Security And Hardening](https://skillsagentes.com/skills/addyosmani/agent-skills/security-and-hardening.md): Endurece el código contra vulnerabilidades. Úsalo al manejar entrada de usuario, autenticación, almacenamiento de datos, integraciones externas o datos personales (GDPR, CCPA). - [Spec Driven Development](https://skillsagentes.com/skills/addyosmani/agent-skills/spec-driven-development.md): Crea especificaciones antes de programar: úsalo al iniciar un proyecto o cambio sin spec, cuando los requisitos son ambiguos, o cuando un requerimiento debe descomponerse en un mapa de módulos. - [Code Review And Quality](https://skillsagentes.com/skills/addyosmani/agent-skills/code-review-and-quality.md): Realiza revisión de código en múltiples ejes. Úsalo antes de fusionar cualquier cambio, sea escrito por ti, otro agente o una persona, para evaluar la calidad antes de entrar a la rama principal. - [Planning And Task Breakdown](https://skillsagentes.com/skills/addyosmani/agent-skills/planning-and-task-breakdown.md): Divide el trabajo en tareas ordenadas. Úsalo cuando tengas un spec o requisitos claros y necesites descomponer el trabajo en tareas implementables, estimar alcance o paralelizar. - [Observability And Instrumentation](https://skillsagentes.com/skills/addyosmani/agent-skills/observability-and-instrumentation.md): Instrumenta el código para que el comportamiento en producción sea visible y diagnosticable, con logging, métricas, tracing y alertas. ## Skills relacionadas - [Source Driven Development](https://skillsagentes.com/skills/addyosmani/agent-skills/source-driven-development.md): Fundamenta cada decisión de implementación en documentación oficial. Úsalo para código citado y con fuentes, libre de patrones obsoletos, al trabajar con cualquier framework o librería donde la corrección importe. - [Doubt Driven Development](https://skillsagentes.com/skills/addyosmani/agent-skills/doubt-driven-development.md): Somete cada decisión no trivial a una revisión adversarial con contexto fresco antes de darla por válida, cuando la corrección importa más que la velocidad o hay código desconocido o alto riesgo. - [Idea Refine](https://skillsagentes.com/skills/addyosmani/agent-skills/idea-refine.md): Refina ideas en bruto en conceptos claros y accionables mediante pensamiento divergente y convergente estructurado. - [Observability And Instrumentation](https://skillsagentes.com/skills/addyosmani/agent-skills/observability-and-instrumentation.md): Instrumenta el código para que el comportamiento en producción sea visible y diagnosticable, con logging, métricas, tracing y alertas. - [Shipping And Launch](https://skillsagentes.com/skills/addyosmani/agent-skills/shipping-and-launch.md): Prepara lanzamientos a producción: checklist previa, monitoreo, rollout escalonado y estrategia de rollback. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)