| name | Performance Budgets |
| description | HACER CUMPLIR presupuestos de rendimiento estrictos y objetivos de Core Web Vitals (CWV). Prevenir bundles JS no optimizados, optimización de imágenes descuidada, desplazamiento de diseño y bloqueo del hilo principal. LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms, JS ≤ 100KB comprimido por ruta. Activadores: "make it fast", "optimize performance", "improve core web vitals", "fix (the|a) lighthouse score".
|
| category | quality |
| version | 3.0.0 |
| last_updated | 2026-06-28T00:00:00.000Z |
| stacks | ["Next.js 16","React 19.2","Nuxt","Vue","Astro"] |
| related_skills | ["responsive-layout-math","no-slop-landing-page-architecture","component-architecture-patterns","react-best-practices"] |
| lang | es |
| direction | ltr |
| source_version | 3.0.0 |
| translated_at | 2026-06-29T00:00:00.000Z |
Presupuestos de Rendimiento y Core Web Vitals
IDENTIFICAR: Cuándo activarse
Activar cuando:
- Se decide la arquitectura del frontend o se añaden bibliotecas pesadas de terceros
- Se audita una base de código existente en busca de velocidad
- El usuario reporta tiempos de carga lentos, desplazamientos de diseño o UI que no responde
- Se configura un nuevo proyecto, establecer presupuestos antes de codificar
OBJETIVOS DE CORE WEB VITALS (Sin cambios en 2026)
| Métrica | Objetivo | Qué mide |
|---|
| LCP (Largest Contentful Paint) | ≤ 2.5 segundos | Velocidad de carga del contenido principal |
| INP (Interaction to Next Paint) | ≤ 200 milisegundos | Capacidad de respuesta a clics/toques |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | Estabilidad visual durante la carga |
PRESUPUESTO DE JAVASCRIPT
OBJETIVO: ≤ 100 KB comprimido por ruta (carga inicial).
Cada KB de JavaScript cuesta: descarga + análisis + ejecución. En dispositivos móviles lentos, analizar 1MB de JS toma >1 segundo.
APLICACIÓN DEL PRESUPUESTO:
Server Components por defecto → cero JS del cliente para contenido estático
Importaciones dinámicas para componentes pesados → const Chart = dynamic(() => import('./Chart'))
APIs nativas sobre bibliotecas → Intl.DateTimeFormat, no moment.js (ahorra ~50KB)
Tree-shake de importaciones → import { debounce } from 'lodash-es', no import _ from 'lodash'
EJECUTAR: Instrucciones
1. Optimización de LCP: La Imagen Principal SIEMPRE Recibe Prioridad
El elemento LCP es típicamente la imagen principal. Trátala como especial.
LISTA DE VERIFICACIÓN:
[ ] Identificar elemento LCP (generalmente imagen principal o encabezado)
[ ] Precargarlo: <link rel="preload" as="image" href="/hero.webp" />
[ ] Usar formato moderno: WebP o AVIF (30-50% más pequeño que JPEG/PNG)
[ ] Establecer width + height explícitos (previene CLS)
[ ] Usar priority en Next.js: <Image priority ... /> (SOLO imagen LCP)
[ ] NUNCA aplicar carga diferida a imágenes above-the-fold
[ ] Renderizar en servidor el contenido above-the-fold (no esperar a JS)
<Image src="/hero.webp" width={} height={} priority alt= />
