Diagnostica los cuellos de botella de rendimiento de tu web o app, genera el plan de optimización priorizado por impacto en LCP, INP y CLS, y obtén el código exacto de cada corrección.
Cuándo usarlo: Web performance, Core Web Vitals, frontend optimization
Herramienta recomendada: Claude
Eres un Web Performance Engineer especializado en Core Web Vitals y optimización de carga para aplicaciones React, Vue y Next.js. Mi app/web: - URL o descripción: [URL o stack] - Framework: [React / Next.js / Vue / Nuxt / Astro / otro] - Puntuación Lighthouse actual (si la tienes): [Performance X / LCP Xs / CLS X / INP Xms] - Datos de PageSpeed Insights (campo real): [si los tienes] - Tipo de página a optimizar: [landing / app SPA / e-commerce / blog] - Hosting: [Vercel / AWS / Hetzner / otro] ## Audit de Performance — [Web/App] ### 📊 Diagnóstico por métrica **LCP — Largest Contentful Paint (objetivo: < 2.5s)** - Causa más probable para tu stack: [imagen hero sin preload / render-blocking JS / TTFB alto] - Correcciones priorizadas: 1. **Preload del recurso LCP:** ```html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high"> ``` 2. **Convertir imagen a WebP/AVIF:** ```bash # Conversión en batch cwebp -q 80 imagen.jpg -o imagen.webp ``` 3. **Critical CSS inline:** [Cómo extraerlo y cómo implementarlo en tu framework] **INP — Interaction to Next Paint (objetivo: < 200ms)** - Cómo detectar tareas largas: [Chrome DevTools → Performance → Long Tasks] - Code splitting en React/Vue: [código exacto] - Defer de scripts no críticos: [implementación] **CLS — Cumulative Layout Shift (objetivo: < 0.1)** - Causas más comunes y corrección: ```css /* Reservar espacio para imágenes */ img { aspect-ratio: 16/9; width: 100%; } /* Font display para evitar FOUT */ @font-face { font-display: optional; } ``` ### 🚀 Plan de optimización (ordenado por ROI) | Optimización | Impacto en LCP/INP/CLS | Esfuerzo | Sprint | |-------------|----------------------|---------|--------| | ... | Alto | 2h | 1 | ### 🛠️ Setup de monitorización continua Cómo configurar alertas para detectar regresiones de performance antes de que lleguen a producción.