Tu Agente de IA Acaba de Obtener Superpoderes para 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 Comenzar Prueba Gratuita de CoreDash »Trusted by market leaders · Client results
Las Herramientas de IA para Rendimiento 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 posicionamiento. Un agente de IA útil para el rendimiento web comienza con los mismos datos que usa 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 Posicionamiento
Google posiciona basándose en datos de campo de CrUX de usuarios reales de Chrome durante 28 días. Una puntuación perfecta en Lighthouse y una puntuación de campo deficiente ocurren todo el tiempo. El 52% de los sitios móviles suspenden 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 el trabajo por terminado. Tus usuarios reales no están de acuerdo.
La Investigación Manual Toma Horas
Segmentar los datos. Formular hipótesis. Ejecutar un rastro. Confirmar. Redactar la corrección. Un ingeniero de rendimiento senior pasa 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 un usuario real: dónde tocan, qué tan rápido se desplazan, qué dispositivo sostienen. Lighthouse ni siquiera informa sobre el INP. Si tu agente de IA ejecuta Lighthouse, está ciego ante tus peores problemas de interactividad. Los datos de campo son la única fuente.
Dos fuentes de la verdad: Los datos de campo se encuentran con la evidencia del navegador
Superpoderes CWV combina datos de usuarios reales de CoreDash con rastreos específicos de Chrome. 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.
El 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 LOAF, elemento de cambio 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
Superpoderes CWV visita la página con emulación móvil: Fast 3G, limitación de CPU de 4x. Rastrea solo la fase de cuello de botella que identificó CoreDash.
¿Load Delay es el cuello de botella? El agente examina la cascada de red 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 película (filmstrip), cascada de red y evidencia focalizada que explica la causa raíz que expusieron tus datos de campo.
Razonamiento proporcional, no umbrales absolutos
Lighthouse te dice "Render Delay es 350ms". ¿Es ese el problema? Ni idea. Superpoderes CWV identifica el cuello de botella como la fase que consume el mayor porcentaje del tiempo total.
El INP es de 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). La Presentación (Presentation) es el cuello de botella, aunque 200ms suene bien de forma aislada. Arreglarlo 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 del código
Hazle una pregunta. Cinco pasos después tienes una solució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 calificaciones deficientes, dispositivos móviles, páginas de alto tráfico y puntuaciones p75 que ocultan una larga cola de bajo rendimiento.
2. Diagnóstico
Divide 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. Rastro de Chrome
Visita la página con emulación móvil. Rastrea solo la fase de cuello de botella del paso 2. Captura la cascada de red, la tira de película y 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. Solución o Informe
Tú eliges. 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 consulta el agente. 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 de INP Input Delay Processing Presentation Scripts LOAF Estado de cargaCLS (Cumulative Layout Shift)
Elemento de desplazamiento 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 regresiónDiagnóstico: Desglose a nivel de fase para cada Core Web Vital
No solo puntuaciones. Cada métrica se divide en fases utilizando la atribución de usuarios reales de CoreDash.
Soluciona el LCP con IA: Diagnóstico de Largest Contentful Paint
Desglose de 4 fases: TTFB, Load Delay, Load Time, Render Delay. Identifica qué fase consume la mayor parte del tiempo total.
Atribución de elemento: el elemento LCP exacto, su tipo (imagen, texto, imagen de fondo, video) y su estado de prioridad (fetchpriority, carga diferida o lazy loading).
Correcciones típicas: agregar sugerencia de precarga (preload hint), eliminar la carga diferida del hero, optimizar el formato de la imagen, arreglar un script que bloquea el renderizado.
Soluciona el INP con IA: Diagnóstico de Interaction to Next Paint
Desglose de 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 script: 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.
Correcciones típicas: ceder (yield) al hilo principal, diferir la evaluación, dividir los manejadores de eventos (event handlers), usar content-visibility para DOMs grandes.
CLS: Cumulative Layout Shift
5 patrones de causas: imágenes sin dimensiones, intercambio de fuentes (font swaps), contenido inyectado dinámicamente, recursos de carga tardía, animaciones CSS en propiedades de diseño (layout).
Interdimensional: compara móvil vs escritorio, visitantes nuevos vs recurrentes, redes rápidas vs lentas para limitar la causa.
Correcciones típicas: agregar ancho/alto (width/height), font-display: optional, reserva con min-height, usar transform en lugar de top/left.
Cómo se Ve una Declaración de Causa Raíz
No es "considera optimizar tus imágenes". Esta es la salida real. Lo suficientemente específica como para revisar y fusionar.
Causa raíz:
La imagen LCP div.hero-banner > img.product-main en /product/running-shoes-42 se descubre con 1,980ms de retraso porque carece de una sugerencia de precarga (preload) y no tiene fetchpriority="high".
Evidencia de CoreDash:
El LCP es de 3,820ms (deficiente) en dispositivos móviles, p75. El 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:
La cascada de red muestra una brecha de 1,940ms 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 escáner de precarga.
Solución:
Agrega <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> a templates/product.html en la 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 asegúrate de precargar adecuadamente los recursos críticos."
Superpoderes CWV:
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). Brecha de descubrimiento de 1,940ms (cascada de Chrome).
Solución: Cambio de código de 2 líneas con diff de antes/después.
Comparación: Cómo se posiciona Superpoderes CWV
Diferentes herramientas resuelven diferentes problemas. Esto es lo que hace realmente cada una.
| Capacidad | CoreDash + Superpoderes CWV | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Fuente de datos | Usuarios reales (28 días de datos de campo) | Sesión única de laboratorio | Carga única simulada |
| Medición de INP | ✓ Interacciones reales | ✗ Sin usuarios reales | ✗ No medido |
| Desglose de fases | ✓ Fases LCP, INP, CLS | ~ Análisis manual | ✗ Solo puntuación |
| Atribución de elemento | ✓ Elemento exacto + prioridad | ~ Si sabes dónde mirar | ~ 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 | ✗ Momento puntual | ✗ Momento puntual |
| Rastreo de Chrome | ✓ Orientado por fase | ✓ Acceso total | ✗ Sin navegador |
| Correcciones de código | ✓ Archivo + línea + diff | ~ Dependiente del agente | ~ Consejos genéricos |
Nota: Chrome DevTools MCP es complementario. Superpoderes CWV lo utiliza para el rastreo focalizado 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 película (filmstrip) en momentos clave (first paint, LCP, loaded), SVG de la cascada de red, análisis de la causa raíz y la solución recomendada con el código de antes/después.
Informe de solo RUM
Las mismas tarjetas de métricas y desglose de fases, además de la atribución de elementos y el análisis de la causa raíz. Sin tira de película ni cascada, pero la calidad del diagnóstico es idéntica porque los datos de campo son la fuente de la verdad.
Funciona con cualquier cliente MCP
Claude Code: Skill completo con flujo de trabajo automatizado. Descubrimiento, diagnóstico, rastreo de Chrome, correcciones de código e informes. Recomendado.
Cursor: Instalación de plugin con MCP de CoreDash. 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."
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."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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.
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."
Funcionando en 2 Minutos
Diagnóstico automatizado de Core Web Vitals en tu terminal. Necesitas una cuenta de CoreDash con datos fluyendo. La capa gratuita funciona.
Claude Code
claude mcp add --transport http coredash \
https://app.coredash.app/api/mcp \
--header "Authorization: Bearer cdk_YOUR_API_KEY"
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers
claude --chrome
Encuentra mi mayor problema de CWV y arréglalo. Obtén tu clave de API desde CoreDash → Project Settings → API Keys (MCP). Se muestra una vez. Se almacena como hash SHA-256. Solo lectura.
Cursor
/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
Encabezado: 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 ejecutándose para usar Superpoderes CWV?
No. El rastreo de Chrome es opcional. Sin él, obtienes diagnósticos completos de 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 de tira de película (filmstrip), cascada de red 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 única carga sintética en tu máquina. Superpoderes CWV utiliza 28 días de datos de usuarios reales de CoreDash: dispositivos reales, redes reales, interacciones reales. Mide el INP a partir de toques reales de los usuarios (Lighthouse no puede hacerlo). Compara segmentos (móvil vs escritorio, India vs EE. UU.). Y utiliza un 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 el rendimiento web que soporte servidores MCP (Model Context Protocol). Claude Code tiene un skill dedicado 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 MCP HTTP de CoreDash. Los datos de campo y la atribución son idénticos en todos los clientes.
¿Es gratis CoreDash?
CoreDash tiene una capa gratuita que funciona con Superpoderes CWV. Necesitas que los datos fluyan desde tu sitio (agrega la etiqueta de script de CoreDash). La capa gratuita no tiene muestreo ni límites de vistas de página. Las claves de API para el acceso a MCP están disponibles en todos los planes.
¿Puedo usar esto para sitios de clientes?
Sí. Para cada proyecto de CoreDash puedes crear ilimitadas 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 para ese proyecto. Superpoderes CWV tiene licencia MIT, por lo que no hay restricciones en el uso comercial.
Código Abierto. Sin Dependencia Exclusiva.
Automatización de Core Web Vitals que puedes inspeccionar y extender. El orquestador, los módulos de diagnóstico, la lógica de rastreo de Chrome y las plantillas de informes están todos en GitHub. Lee cómo funciona. Hazle un fork. Extiéndelo. Contribuye.
Comienza Tu Prueba Gratuita Ver en GitHub