Tu agente de IA acaba de obtener superpoderes de Core Web Vitals
Conecta Claude Code a tus field data de CoreDash. Encuentra tu peor cuello de botella en millones de cargas de página, rastrea la causa raíz en Chrome y escribe la solución. Rendimiento web basado en agentes: no es un informe, sino la línea de código exacta que debe cambiar.
Instala en 2 minutos Inicia tu prueba gratuita de CoreDash »Trusted by market leaders · Client results
Las herramientas de rendimiento de IA tienen un problema de datos
La mayoría de los agentes de IA optimizan para Lighthouse. Una puntuación sintética en un dispositivo simulado que Google no usa para el ranking. Un agente de IA de rendimiento web útil parte de los mismos datos que Google: usuarios reales en teléfonos de gama baja, conexiones inestables y continentes que tu máquina de desarrollo nunca ha visto.
Lighthouse no es tu señal de ranking
Google clasifica basándose en los field data de CrUX de usuarios reales de Chrome durante 28 días. Una puntuación perfecta de Lighthouse y una puntuación de field fallida ocurren todo el tiempo. El 52% de los sitios móviles falla al menos un Core Web Vital en field.
Agentes ciegos hacen correcciones a ciegas
Sin datos de usuarios reales, un agente de IA no sabe qué página es lenta, qué elemento es el cuello de botella o si su corrección funcionó. Optimiza una simulación y se da por satisfecho. Tus usuarios reales no están de acuerdo.
La investigación manual lleva horas
Segmenta los datos. Plantea una hipótesis. Ejecuta una traza. Confirma. Prepara la corrección. Un ingeniero de rendimiento senior dedica de 2 a 4 horas por problema. Multiplica eso por cada página lenta de tu sitio.
El INP no se puede simular en absoluto en un laboratorio Interaction to Next Paint mide cómo interactúan los usuarios reales con tu página. Ninguna herramienta sintética puede replicar el comportamiento de los usuarios reales: dónde pulsan, a qué velocidad hacen scroll o qué dispositivo sostienen. Lighthouse ni siquiera reporta el INP. Si tu agente de IA ejecuta Lighthouse, está ciego ante tus peores problemas de interactividad. Los field data son la única fuente.
Dos fuentes de verdad: el field data se encuentra con la evidencia del navegador
CWV Superpowers combina datos de usuarios reales de CoreDash con traces de Chrome específicas. El field data le dice qué es lento. Chrome le dice por qué.
CoreDash le dice al agente qué es lento
CoreDash rastrea cada carga de página de cada usuario real. Cada métrica, atribuida al elemento exacto que causa el problema. Sin muestreo, sin límites.
Cuando CoreDash reporta un LCP de 4,2 segundos en el que el Load Delay consume el 52% del tiempo total en div.hero > img.main, el agente sabe exactamente dónde buscar. No es una suposición. Es una medición a partir de millones de sesiones reales.
La skill consulta más de 25 dimensiones de CoreDash: elemento LCP, tipo de elemento, estado de prioridad, desglose de fases, objetivo de interacción de INP, scripts de LOAF, elemento desplazado de CLS, tipo de dispositivo, tipo de visitante, velocidad de red y tendencias de 7 días.
Chrome le dice al agente por qué es lento
CWV Superpowers visita la página con emulación móvil: Fast 3G, limitación de CPU de 4x. Solo rastrea la fase del cuello de botella que CoreDash identificó.
¿El Load Delay es el cuello de botella? El agente examina el network waterfall en busca de brechas de descubrimiento. ¿El Render Delay? Busca scripts bloqueantes y retrasos en la carga de fuentes.
El resultado: capturas del filmstrip, el network waterfall y evidencia específica que explica la causa raíz que expuso tu field data.
Razonamiento proporcional, no umbrales absolutos
Lighthouse te dice "El Render Delay es de 350 ms". ¿Es ese el problema? Ni idea. CWV Superpowers identifica el cuello de botella como la fase que consume el mayor porcentaje del tiempo total.
El INP es de 350 ms. Input Delay 70 ms (20%), Processing 80 ms (23%), Presentation 200 ms (57%). Presentation es el cuello de botella, aunque 200 ms suene bien de forma aislada. Corregirlo marca la diferencia. Optimizar el Input Delay apenas se nota.
Esto evita el error más común al optimizar el rendimiento: solucionar el problema equivocado.
Cinco pasos: de "algo va lento" a la corrección del código
Hazle una pregunta. Cinco pasos después tienes una corrección respaldada por evidencia real de usuarios.
1. Descubrimiento
Escanea tus datos de CoreDash en busca de las peores páginas y métricas. Prioriza las calificaciones deficientes, el tráfico móvil, las páginas con mucho tráfico y las puntuaciones p75 que ocultan una larga cola de rendimiento deficiente.
2. Diagnóstico
Divide la métrica en fases. LCP: TTFB, retraso de carga, tiempo de carga, retraso de renderizado. INP: retraso de entrada, procesamiento, presentación. Señala el cuello de botella por porcentaje.
3. Traza de Chrome
Visita la página con emulación móvil. Traza solo la fase del cuello de botella del paso 2. Captura la cascada de red, el filmstrip y evidencias de recursos bloqueantes.
4. Causa raíz
Combina ambas fuentes de evidencia en una sola declaración: el elemento, la causa, las métricas de CoreDash y lo que Chrome confirmó. Sin ambigüedades.
5. Solución o informe
Tú eliges. Aplica la corrección del código indicando archivo, línea, elemento y el antes/después. Genera un informe HTML autocontenido con gráficos y evidencias. O ambas.
25+ dimensiones: Todos los ángulos que cubre tu field data
Estas son las dimensiones reales de CoreDash que consulta el agente. No es un resumen. La imagen completa.
LCP (Largest Contentful Paint)
Elemento LCP Tipo de elemento Estado de prioridad Fase de TTFB Retraso de carga Tiempo de carga Retraso de renderizadoINP (Interaction to Next Paint)
Objetivo del INP Retraso de entrada Procesamiento Presentación Scripts de LOAF Estado de cargaCLS (Cumulative Layout Shift)
Elemento desplazado Causa del desplazamiento Momento del desplazamientoSegmentos
Tipo de dispositivo País Navegador Sistema operativo Conexión Tipo de visitante Ruta de la páginaTendencias
Delta de 7 días Línea base de 28 días Detección de regresionesDiagnostica: Desglose por fases de cada Core Web Vital
No solo puntuaciones. Cada métrica desglosada en fases con atribución de usuarios reales de CoreDash.
Corrige el LCP con IA: diagnóstico de Largest Contentful Paint
Desglose en 4 fases: TTFB, retraso de carga, tiempo de carga, retraso de renderizado. Identifica qué fase consume la mayor parte del tiempo total.
Atribución del elemento: el elemento LCP exacto, su tipo (imagen, texto, imagen de fondo, video) y su estado de prioridad (fetchpriority, lazy loading).
Soluciones habituales: añadir una sugerencia de preload, eliminar lazy loading del hero, optimizar el formato de la imagen, corregir el script render blocking.
Corrige el INP con IA: diagnóstico de Interaction to Next Paint
Desglose en 3 fases: retraso de entrada, procesamiento, presentación. La única métrica que no puedes simular en laboratorio. El field data es la única fuente.
Atribución de scripts: Long Animation Frames (LOAF) identifica el archivo JavaScript exacto y su duración. Además del estado de carga de la página cuando ocurrió la interacción.
Soluciones habituales: hacer yield al main thread, diferir la evaluación, dividir los manejadores de eventos, content-visibility para DOM grandes.
CLS: Cumulative Layout Shift
5 patrones de causas: imágenes sin dimensiones, intercambios de fuentes, contenido inyectado dinámicamente, recursos de carga tardía, animaciones CSS en propiedades de diseño.
Multidimensional: compara móvil vs escritorio, visitantes nuevos vs recurrentes, y redes rápidas vs lentas para acotar la causa.
Soluciones habituales: añadir width/height, font-display: optional, reserva de min-height, usar transform en lugar de top/left.
Cómo es un diagnóstico de causa raíz
No un "considera optimizar tus imágenes". Este es el resultado real. Lo suficientemente específico como para revisar y fusionar.
Causa raíz:
La imagen del LCP div.hero-banner > img.product-main en /product/running-shoes-42 se descubre con 1.980 ms de retraso porque carece de una indicación de preload y no tiene fetchpriority="high".
Evidencia de CoreDash:
El LCP es de 3.820 ms (malo) en móviles, p75. El Load Delay es el cuello de botella con 1.980 ms (52 % del total). Estado de prioridad: 3 (no precargado). Tendencia: empeora +340 ms en 7 días.
Evidencia de Chrome:
La cascada de red muestra una brecha de 1.940 ms entre el primer byte del HTML y la solicitud de la imagen. La imagen solo está referenciada en el CSS, por lo que es invisible para el preload scanner.
Solución:
Añade <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> en la línea 12 de templates/product.html. Establece fetchpriority="high" en el elemento img en la línea 47.
Consejo genérico de IA:
"Considera añadir fetchpriority a tu imagen del LCP y asegurar la precarga adecuada de los recursos críticos."
Superpoderes de CWV:
Elemento: div.hero-banner > img.product-main
Archivo: templates/product.html, línea 47
Evidencia: 52 % del tiempo del LCP en el Load Delay (CoreDash p75). Brecha de descubrimiento de 1.940 ms (cascada de Chrome).
Solución: Cambio de código de 2 líneas con un diff de antes/después.
Compara: Cómo se compara CWV Superpowers
Diferentes herramientas resuelven problemas distintos. Esto es lo que hace cada una en realidad.
| Capacidad | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Origen de datos | Usuarios reales (28 días de field data) | Sesión única de laboratorio | Carga única simulada |
| Medición de INP | ✓ Interacciones reales | ✗ Sin usuarios reales | ✗ No se mide |
| Desglose de fases | ✓ Fases de LCP, INP y CLS | ~ Análisis manual | ✗ Solo puntuación |
| Atribución de elementos | ✓ Elemento exacto + prioridad | ~ Si sabes dónde buscar | ~ Sugerencias genéricas |
| Razonamiento proporcional | ✓ Cuello de botella por % | ✗ Valores absolutos | ✗ Valores absolutos |
| Comparación de segmentos | ✓ Dispositivo, país, navegador | ✗ Configuración única | ✗ Configuración única |
| Detección de tendencias | ✓ Delta de 7 días | ✗ Medición puntual | ✗ Medición puntual |
| Chrome tracing | ✓ Dirigido por fase | ✓ Acceso completo | ✗ Sin navegador |
| Correcciones de código | ✓ Archivo + línea + diff | ~ Depende del agente | ~ Consejos genéricos |
Nota: Chrome DevTools MCP es complementario. CWV Superpowers lo usa para tracing dirigido después de que los field data identifican el cuello de botella. Funcionan mejor juntos.
Informes: Suéltalos en Slack, adjúntalos a Jira
HTML autocontenido. Sin dependencias. Sin paso de compilación. Un solo archivo con todo inline.
Informe completo (con Chrome)
Tarjetas de métricas con código de colores, gráficos de desglose de fases, capturas de pantalla de filmstrip en momentos clave (primer pintado, LCP, cargado), SVG de la cascada de red, análisis de causa raíz y la corrección recomendada con código antes/después.
Informe solo RUM
Mismas tarjetas de métricas y desglose de fases, además de atribución de elementos y análisis de causa raíz. Sin filmstrip ni cascada, pero la calidad del diagnóstico es idéntica porque el field data es la fuente de verdad.
Funciona con cualquier cliente MCP
Claude Code: Skill completo con flujo de trabajo automatizado. Descubrimiento, diagnóstico, Chrome tracing, correcciones de código e informes. Recomendado.
Cursor: Instalación de plugin con CoreDash MCP. Diagnóstico completo y correcciones de código dentro de tu editor.
VS Code, Windsurf, Gemini CLI: Cualquier cliente que soporte servidores MCP HTTP se conecta a CoreDash. Mismo field data, misma atribución.
Client Success
Don't just take my word for it
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
VP Product, Expedia Group
"We had 80+ third-party scripts and were failing CWV on every major property. Arjen got us passing without touching our ad revenue."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
Head of Digital, Rituals
"We used to break performance every other sprint. He set up budgets in our pipeline. Haven't had a regression since."
Engineering Manager, Zalando
"Every other audit we've had gave us a list of problems. This one told us exactly what to fix first and why."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
Head of Platform, Adevinta
45% reduction in blocking time across 15 marketplaces. INP from 440ms to 64ms on Fotocasa alone. Google wrote up the results on web.dev.
Listo en 2 minutos
Diagnóstico automático de Core Web Vitals en tu terminal. Necesitas una cuenta de CoreDash que reciba datos. El plan gratuito sirve.
Claude Code
# 1. Añade el servidor MCP de CoreDash (inicio de sesión en el navegador, sin API key) claude mcp add --transport http coredash https://app.coredash.app/api/mcp # 2. Instala CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpowers # 3. Inicia con Chrome (opcional, recomendado) claude --chrome # 4. Ejecuta Encuentra mi mayor problema de CWV y corrígelo.
En la primera conexión, ejecuta /mcp, elige coredash y selecciona Authenticate. Tu navegador abre el inicio de sesión de CoreDash, eliges un proyecto, lo apruebas y Claude Code almacena un token OAuth de corta duración que se actualiza automáticamente (acceso de 1 hora, renovación de 30 días) y sigue siendo revocable. Sin claves que pegar.
¿Prefieres una API key para uso headless o CI? Añade --header "Authorization: Bearer cdk_YOUR_API_KEY" al comando, generada desde CoreDash → Project Settings → API Keys (MCP). Se muestra una sola vez. Se almacena como un hash SHA-256. Es de solo lectura.
Cursor
# Instala el plugin
/plugin-add cwv-superpowers
Añade CoreDash a .cursor/mcp.json:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
}
Otros clientes MCP
Endpoint: https://app.coredash.app/api/mcp
Cabecera: Authorization: Bearer cdk_YOUR_API_KEY
Funciona con VS Code (modo agente de Copilot), Windsurf, Gemini CLI, Claude Desktop y cualquier cliente MCP HTTP. Un único endpoint MCP de rendimiento web para todos los agentes.
Preguntas frecuentes
¿Necesito tener Chrome abierto para usar CWV Superpowers?
No. Chrome tracing es opcional. Sin él obtienes un diagnóstico completo de field data, desglose de fases, atribución de elementos y sugerencias de corrección de código basadas únicamente en los datos de CoreDash. Chrome añade capturas en filmstrip, el waterfall de red y confirmación visual de la causa raíz. Ambos modos generan informes.
¿En qué se diferencia de ejecutar Lighthouse en mi agente de IA?
Lighthouse ejecuta una única carga sintética en tu máquina. CWV Superpowers usa 28 días de datos de usuarios reales de CoreDash: dispositivos reales, redes reales, interacciones reales. Mide el INP a partir de toques de usuarios reales (Lighthouse no puede). Compara segmentos (móvil vs. escritorio, India vs. EE. UU.). Y usa razonamiento proporcional para encontrar la fase cuello de botella, no solo puntuaciones absolutas.
¿Qué agentes de programación con IA son compatibles?
Cualquier agente de programación con IA para rendimiento web que admita servidores MCP (Model Context Protocol). Claude Code tiene una habilidad dedicada con un flujo de trabajo automatizado de 5 pasos. Cursor, VS Code (modo de agente de Copilot), Windsurf, Gemini CLI y Claude Desktop se conectan a través del endpoint HTTP MCP de CoreDash. El field data y la atribución son idénticos en todos los clientes.
¿Es gratis CoreDash?
CoreDash tiene un plan gratuito que funciona con CWV Superpowers. Necesitas que fluyan datos de tu sitio (añade la etiqueta script de CoreDash). El plan gratuito no tiene muestreo ni límites de páginas vistas. Las claves de API para el acceso MCP están disponibles en todos los planes.
¿Puedo usarlo en sitios de clientes?
Sí. Para cada proyecto de CoreDash puedes crear claves de API MVP dedicadas ilimitadas . Añade CoreDash a cada sitio de cliente, genera una clave de API de solo lectura y configura tu cliente MCP. El agente solo ve los datos de ese proyecto. CWV Superpowers tiene licencia MIT, por lo que no hay restricciones para su uso comercial.
Código abierto. Sin dependencia de proveedor.
Automatización de Core Web Vitals que puedes inspeccionar y extender. El orquestador, los módulos de diagnóstico, la lógica de Chrome tracing y las plantillas de informes están en GitHub. Lee cómo funciona. Haz un fork. Extiéndelo. Contribuye.
Inicia tu prueba gratuita Ver en GitHub