Tu Agente de IA Acaba de Obtener Superpoderes de Core Web Vitals
Conecta Claude Code a tus datos de campo de CoreDash. Encuentra tu peor cuello de botella a través de millones de cargas de página, rastrea la causa raíz en Chrome y escribe la solución. Rendimiento web agéntico: no un informe, sino la línea de código exacta que necesita cambiar.
Instalar en 2 Minutos Inicia la 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 se optimizan para Lighthouse. Una puntuación sintética en un dispositivo simulado que Google no utiliza para clasificar. Un agente de IA de rendimiento web útil parte de los mismos datos que Google: usuarios reales en teléfonos económicos, conexiones inestables y continentes que tu máquina de desarrollo nunca ha visto.
Lighthouse No Es Tu Señal de Clasificación
Google clasifica basándose en los datos de campo de CrUX de usuarios reales de Chrome durante 28 días. Una puntuación perfecta en Lighthouse y una puntuación deficiente en el campo ocurren todo el tiempo. El 52% de los sitios móviles fallan al menos un Core Web Vital en el campo.
Los Agentes Ciegos Hacen Correcciones 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 ayudó. Optimiza una simulación y da por terminado el día. Tus usuarios reales no están de acuerdo.
La Investigación Manual Toma Horas
Segmenta los datos. Haz hipótesis. Ejecuta un trace. Confirma. Redacta la corrección. Un ingeniero de rendimiento senior pasa de 2 a 4 horas por problema. Multiplica eso por cada página lenta en tu sitio.
INP no se puede simular en un laboratorio en absoluto Interaction to Next Paint mide cómo los usuarios reales interactúan con tu página. Ninguna herramienta sintética puede replicar el comportamiento de un usuario real: dónde tocan, qué tan rápido se desplazan, qué dispositivo sostienen. Lighthouse ni siquiera reporta INP. Si tu agente de IA ejecuta Lighthouse, es ciego a tus peores problemas de interactividad. Los datos de campo son la única fuente.
Dos fuentes de verdad: Los datos de campo se encuentran con la evidencia del navegador
CWV Superpowers combina los datos de usuarios reales de CoreDash con traces de Chrome específicos. Los datos de campo le dicen 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 con un Load Delay consumiendo el 52% del tiempo total en div.hero > img.main, el agente sabe exactamente dónde mirar. No es una suposición. Es una medición de millones de sesiones reales.
La skill consulta más de 25 dimensiones de CoreDash: elemento de LCP, tipo de elemento, estado de prioridad, desglose de fases, objetivo de interacción de INP, scripts LOAF, elemento de desplazamiento de CLS, tipo de dispositivo, tipo de visitante, velocidad de red, 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 4x. Realiza un trace solo de la fase del cuello de botella que identificó CoreDash.
¿Load Delay es el cuello de botella? El agente examina el network waterfall en busca de brechas de descubrimiento. ¿Render Delay? Busca scripts bloqueantes y retrasos en la carga de fuentes.
El resultado: capturas de pantalla en tira de imágenes, network waterfall y evidencia específica que explica la causa raíz que tus datos de campo expusieron.
Razonamiento proporcional, no umbrales absolutos
Lighthouse te dice "Render Delay es 350ms". ¿Es ese el problema? Ni idea. CWV Superpowers identifica el cuello de botella como la fase que consume el mayor porcentaje del tiempo total.
INP es de 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation es el cuello de botella, aunque 200ms suene bien de forma aislada. Solucionarlo marca la diferencia. Optimizar el Input Delay apenas se nota.
Esto previene el error más común en el trabajo de rendimiento: arreglar lo equivocado.
Cinco pasos: De "algo es lento" a la corrección de código
Hazle una pregunta. Cinco pasos después tienes una corrección respaldada por evidencia de usuarios reales.
1. Descubrimiento
Escanea tus datos de CoreDash en busca de las peores páginas y métricas. Prioriza las calificaciones deficientes, dispositivos móviles, páginas de alto tráfico y puntuaciones p75 que ocultan una larga cola deficiente.
2. Diagnóstico
Desglosa la métrica en fases. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Nombra el cuello de botella por porcentaje.
3. Trace de Chrome
Visita la página con emulación móvil. Hace un trace solo de la fase del cuello de botella del paso 2. Captura el network waterfall, la tira de imágenes y la evidencia 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üedad.
5. Corrección o Informe
Tu elección. Aplica la corrección de código con archivo, línea, elemento, antes/después. Genera un informe HTML autónomo con gráficos y evidencia. O ambos.
Más de 25 dimensiones: Cada ángulo que cubren tus datos de campo
Estas son las dimensiones reales de CoreDash que el agente consulta. No un resumen. La imagen completa.
LCP (Largest Contentful Paint)
Elemento LCP Tipo de elemento Estado de prioridad Fase TTFB Load Delay Load Time Render DelayINP (Interaction to Next Paint)
Objetivo INP Input Delay Processing Presentation Scripts LOAF Estado de cargaCLS (Cumulative Layout Shift)
Elemento de desplazamiento Causa del desplazamiento Sincronización del desplazamientoSegmentos
Tipo de dispositivo País Navegador SO 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 regresionesDiagnóstico: Desglose a nivel de fase para cada Core Web Vital
No solo puntuaciones. Cada métrica desglosada en fases utilizando la atribución de usuarios reales de CoreDash.
Arregla LCP con IA: Diagnóstico de Largest Contentful Paint
Desglose en 4 fases: TTFB, Load Delay, Load Time, Render Delay. Identifica qué fase consume la mayor parte del tiempo total.
Atribución de elementos: el elemento LCP exacto, su tipo (imagen, texto, imagen de fondo, video) y su estado de prioridad (fetchpriority, carga diferida).
Soluciones típicas: agregar sugerencia de precarga, eliminar la carga diferida del hero, optimizar el formato de la imagen, corregir un script que bloquea el renderizado.
Arregla INP con IA: Diagnóstico de Interaction to Next Paint
Desglose en 3 fases: Input Delay, Processing, Presentation. La única métrica que no se puede simular en un laboratorio. Los datos de campo son la única fuente.
Atribución de scripts: Long Animation Frames (LOAF) nombra el archivo JavaScript exacto y su duración. Además del estado de carga de la página cuando ocurrió la interacción.
Soluciones típicas: hacer yield al hilo principal, posponer la evaluación, dividir los manejadores de eventos, content-visibility para DOMs grandes.
CLS: Cumulative Layout Shift
5 patrones de causa: 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 dispositivos móviles frente a computadoras de escritorio, visitantes nuevos frente a recurrentes, redes rápidas frente a lentas para acotar la causa.
Soluciones típicas: agregar width/height, font-display: optional, reserva de min-height, usar transform en lugar de top/left.
Cómo se ve una Declaración de Causa Raíz
No "considera optimizar tus imágenes". Este es el resultado real. Lo suficientemente específico para revisar y fusionar.
Causa raíz:
La imagen LCP div.hero-banner > img.product-main en /product/running-shoes-42 se descubre 1.980ms tarde porque carece de una sugerencia de precarga y no tiene fetchpriority="high".
Evidencia de CoreDash:
LCP es de 3.820ms (deficiente) en dispositivos móviles, p75. Load Delay es el cuello de botella con 1.980ms (52% del total). Estado de prioridad: 3 (no precargado). Tendencia: empeorando +340ms en 7 días.
Evidencia de Chrome:
El network waterfall muestra una brecha de 1.940ms entre el primer byte del HTML y la solicitud de la imagen. La imagen se referencia solo en CSS, invisible para el escáner de precarga.
Solución:
Agrega <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> a templates/product.html línea 12. Establece fetchpriority="high" en el elemento img en la línea 47.
Consejo genérico de IA:
"Considera agregar fetchpriority a tu imagen LCP y asegura la precarga adecuada de recursos críticos."
CWV Superpowers:
Elemento: div.hero-banner > img.product-main
Archivo: templates/product.html, línea 47
Evidencia: 52% del tiempo de LCP en Load Delay (CoreDash p75). 1.940ms de brecha de descubrimiento (Chrome waterfall).
Solución: Cambio de código de 2 líneas con diff de antes/después.
Comparar: Cómo se compara CWV Superpowers
Diferentes herramientas resuelven diferentes problemas. Esto es lo que hace realmente cada una.
| Capacidad | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Fuente de datos | Usuarios reales (28 días de datos de campo) | Sesión de laboratorio única | Carga única simulada |
| Medición de INP | ✓ Interacciones reales | ✗ Sin usuarios reales | ✗ No se mide |
| Desglose por fases | ✓ Fases de LCP, INP, 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 | ✗ Punto en el tiempo | ✗ Punto en el tiempo |
| Chrome tracing | ✓ Orientado por fase | ✓ Acceso completo | ✗ Sin navegador |
| Correcciones de código | ✓ Archivo + línea + diff | ~ Dependiente del agente | ~ Consejo genérico |
Nota: Chrome DevTools MCP es complementario. CWV Superpowers lo utiliza para un trace específico después de que los datos de campo identifican el cuello de botella. Funcionan mejor juntos.
Informes: Suéltalos en Slack, adjúntalos a Jira
HTML autónomo. Sin dependencias. Sin paso de compilación. Un archivo con todo en línea.
Informe Completo (con Chrome)
Tarjetas de métricas codificadas por colores, gráficos de desglose de fases, capturas de pantalla en tira de imágenes en momentos clave (first paint, LCP, cargado), network waterfall en SVG, análisis de causa raíz y la solució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 tira de imágenes ni waterfall, pero la calidad del diagnóstico es idéntica porque los datos de campo son la fuente de verdad.
Funciona con cualquier cliente MCP
Claude Code: Skill completa 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. Mismos datos de campo, 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."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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."
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."
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."
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.
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
Funcionando en 2 Minutos
Diagnóstico automatizado de Core Web Vitals en tu terminal. Necesitas una cuenta de CoreDash con datos fluyendo. El plan gratuito funciona.
Claude Code
# 1. Agregar servidor MCP de CoreDash claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. Instalar CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Iniciar con Chrome (opcional, recomendado) claude --chrome # 4. Adelante Encuentra mi mayor problema de CWV y soluciónalo.
Obtén tu clave de API de CoreDash → Configuración del Proyecto → Claves de API (MCP). Se muestra una vez. Se almacena como hash SHA-256. Solo lectura.
Cursor
# Instalar el plugin
/plugin-add cwv-superpowers
Agrega 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
Header: Authorization: Bearer cdk_YOUR_API_KEY
Funciona con VS Code (modo agente Copilot), Windsurf, Gemini CLI, Claude Desktop y cualquier cliente MCP HTTP. Un endpoint de rendimiento web MCP, todos los agentes.
Preguntas Frecuentes
¿Necesito tener Chrome en ejecución para usar CWV Superpowers?
No. El Chrome tracing es opcional. Sin él, obtienes un diagnóstico completo con datos de campo, desgloses de fases, atribución de elementos y sugerencias de corrección de código basadas únicamente en los datos de CoreDash. Chrome agrega capturas de pantalla en tira de imágenes, network waterfall y confirmación visual de la causa raíz. Ambos modos generan informes.
¿En qué se diferencia esto de ejecutar Lighthouse en mi agente de IA?
Lighthouse ejecuta una sola carga sintética en tu máquina. CWV Superpowers utiliza 28 días de datos de usuarios reales de CoreDash: dispositivos reales, redes reales, interacciones reales. Mide el INP de los toques de usuarios reales (Lighthouse no puede). Compara segmentos (móvil frente a escritorio, India frente a EE. UU.). Y utiliza razonamiento proporcional para encontrar la fase del cuello de botella, no solo puntuaciones absolutas.
¿Qué agentes de codificación de IA son compatibles?
Cualquier agente de codificación de IA para rendimiento web que soporte servidores MCP (Model Context Protocol). Claude Code tiene una skill dedicada con un flujo de trabajo automatizado de 5 pasos. Cursor, VS Code (modo agente Copilot), Windsurf, Gemini CLI y Claude Desktop se conectan a través del endpoint HTTP MCP de CoreDash. Los datos de campo y la atribución son idénticos en todos los clientes.
¿Es gratuito CoreDash?
CoreDash tiene un plan gratuito que funciona con CWV Superpowers. Necesitas que fluyan datos desde tu sitio (agrega la etiqueta script de CoreDash). El plan gratuito no tiene muestreo ni límites de visualizaciones de página. Las claves de API para acceso MCP están disponibles en todos los planes.
¿Puedo usar esto para sitios de clientes?
Sí. Para cada proyecto de CoreDash puedes crear un número ilimitado de Claves de API MVP dedicadas . Agrega 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 en el uso comercial.
Código Abierto. Sin Dependencia.
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 todos en GitHub. Lee cómo funciona. Hazle un fork. Extiéndelo. Contribuye.
Inicia tu Prueba Gratuita Ver en GitHub