Seu Agente de IA Acaba de Ganhar Superpoderes de Core Web Vitals
Conecte o Claude Code aos seus dados de campo do CoreDash. Ele encontra o seu pior gargalo em milhões de carregamentos de página, rastreia a causa raiz no Chrome e escreve a correção. Performance web agêntica — não um relatório, mas a linha de código exata que precisa mudar.
Instale em 2 Minutos Inicie o Teste Gratuito do CoreDash »Trusted by market leaders · Client results
Ferramentas de Performance de IA Têm um Problema de Dados
A maioria dos agentes de IA otimiza para o Lighthouse. Uma pontuação sintética em um dispositivo simulado que o Google não usa para ranqueamento. Um agente de IA de performance web útil começa com os mesmos dados que o Google: usuários reais em celulares de baixo custo, conexões instáveis e continentes que sua máquina de desenvolvimento nunca viu.
O Lighthouse Não É o Seu Sinal de Ranqueamento
O Google ranqueia com base em dados de campo do CrUX de usuários reais do Chrome ao longo de 28 dias. Uma pontuação perfeita no Lighthouse e uma nota reprovada no campo acontecem o tempo todo. 52% dos sites mobile falham em pelo menos um Core Web Vitals no campo.
Agentes Cegos Fazem Correções Cegas
Sem dados de usuários reais, um agente de IA não sabe qual página está lenta, qual elemento é o gargalo, ou se a sua correção ajudou. Ele otimiza uma simulação e dá o trabalho como concluído. Seus usuários reais discordam.
Investigação Manual Leva Horas
Segmente os dados. Crie hipóteses. Execute um rastreamento. Confirme. Rascunhe a correção. Um engenheiro de performance sênior gasta de 2 a 4 horas por problema. Multiplique isso por cada página lenta no seu site.
O INP não pode ser simulado em um laboratório de forma alguma Interaction to Next Paint mede como usuários reais interagem com a sua página. Nenhuma ferramenta sintética consegue replicar o comportamento real do usuário: onde eles tocam, com que rapidez rolam a página, qual dispositivo seguram. O Lighthouse sequer relata o INP. Se o seu agente de IA roda o Lighthouse, ele está cego para os seus piores problemas de interatividade. Dados de campo são a única fonte.
Duas fontes de verdade: Dados de campo encontram evidências do navegador
O CWV Superpowers combina dados de usuários reais do CoreDash com rastreamentos direcionados do Chrome. Os dados de campo dizem o que está lento. O Chrome diz por que.
O CoreDash diz ao agente o que está lento
O CoreDash rastreia cada carregamento de página de cada usuário real. Cada métrica, atribuída ao elemento exato causando o problema. Sem amostragem, sem limites.
Quando o CoreDash relata um LCP de 4,2 segundos com Load Delay consumindo 52% do tempo total em div.hero > img.main, o agente sabe exatamente onde olhar. Não é um palpite. É uma medição de milhões de sessões reais.
A skill consulta 25+ dimensões do CoreDash: elemento do LCP, tipo de elemento, estado de prioridade, detalhamento de fase, alvo de interação do INP, scripts LOAF, elemento causador do CLS, tipo de dispositivo, tipo de visitante, velocidade da rede, tendências de 7 dias.
O Chrome diz ao agente por que está lento
O CWV Superpowers visita a página com emulação mobile: 3G Rápido, throttling de CPU em 4x. Ele rastreia apenas a fase de gargalo que o CoreDash identificou.
Load Delay é o gargalo? O agente examina o waterfall de rede em busca de atrasos de descoberta. Render Delay? Ele procura por scripts bloqueantes e atrasos no carregamento de fontes.
O resultado: capturas de tela em formato filmstrip, waterfall de rede e evidências direcionadas que explicam a causa raiz que os seus dados de campo expuseram.
Raciocínio proporcional, não limites absolutos
O Lighthouse te diz "Render Delay é 350ms." Esse é o problema? Nenhuma ideia. O CWV Superpowers identifica o gargalo como a fase consumindo a maior porcentagem do tempo total.
O INP é 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). A Presentation é o gargalo, mesmo que 200ms pareça aceitável isoladamente. Corrigi-lo traz resultados reais. Otimizar o Input Delay mal faz diferença.
Isso previne o erro mais comum no trabalho de performance: consertar a coisa errada.
Cinco passos: De "algo está lento" até a correção do código
Faça uma pergunta. Cinco passos depois, você tem uma correção embasada por evidências de usuários reais.
1. Descoberta
Escaneia seus dados do CoreDash buscando as piores páginas e métricas. Prioriza avaliações ruins, mobile, páginas de alto tráfego e pontuações no p75 que escondem uma longa cauda de baixa performance.
2. Diagnóstico
Divide a métrica em fases. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Nomeia o gargalo por porcentagem.
3. Rastreamento do Chrome
Visita a página com emulação mobile. Rastreia apenas a fase de gargalo do passo 2. Captura o waterfall de rede, filmstrip e evidências de recursos bloqueantes.
4. Causa Raiz
Combina as duas fontes de evidência em uma única declaração: o elemento, a causa, as métricas do CoreDash e o que o Chrome confirmou. Sem ambiguidades.
5. Correção ou Relatório
A escolha é sua. Aplique a correção de código indicando arquivo, linha, elemento, antes/depois. Gere um relatório HTML autossuficiente com gráficos e evidências. Ou ambos.
25+ dimensões: Todos os ângulos que seus dados de campo cobrem
Estas são as dimensões reais do CoreDash que o agente consulta. Não um resumo. O quadro completo.
LCP (Largest Contentful Paint)
Elemento do LCP Tipo de elemento Estado de prioridade Fase de TTFB Load Delay Load Time Render DelayINP (Interaction to Next Paint)
Alvo do INP Input Delay Processing Presentation Scripts LOAF Estado de carregamentoCLS (Cumulative Layout Shift)
Elemento causador do CLS Causa do CLS Momento do CLSSegmentos
Tipo de dispositivo País Navegador Sistema Operacional Conexão Tipo de visitante Caminho da páginaTendências
Variação de 7 dias Linha de base de 28 dias Detecção de regressõesDiagnóstico: Detalhamento em nível de fase para cada Core Web Vitals
Não apenas pontuações. Cada métrica é dividida em fases usando atribuição de usuários reais do CoreDash.
Corrija o LCP com IA: Diagnóstico de Largest Contentful Paint
Detalhamento em 4 fases: TTFB, Load Delay, Load Time, Render Delay. Identifica qual fase consome a maior parcela do tempo total.
Atribuição de elemento: o elemento exato do LCP, o seu tipo (imagem, texto, imagem de fundo, vídeo) e o estado de prioridade (fetchpriority, lazy loading).
Correções típicas: adicionar tag de preload, remover lazy loading do hero, otimizar formato da imagem, corrigir script que bloqueia a renderização.
Corrija o INP com IA: Diagnóstico de Interaction to Next Paint
Detalhamento em 3 fases: Input Delay, Processing, Presentation. A única métrica que você não pode simular em um laboratório. Dados de campo são a única fonte.
Atribuição de script: Long Animation Frames (LOAF) nomeia o arquivo JavaScript exato e a duração. Além do estado de carregamento da página quando a interação ocorreu.
Correções típicas: fazer yield para a thread principal, adiar avaliação (defer), dividir event handlers, content-visibility para DOMs grandes.
CLS: Cumulative Layout Shift
5 padrões de causa: imagens sem dimensões, troca de fontes (font swaps), conteúdo injetado dinamicamente, recursos com carregamento tardio, animações CSS em propriedades de layout.
Multidimensional: compara mobile vs desktop, visitantes novos vs recorrentes, redes rápidas vs lentas para restringir a causa.
Correções típicas: adicionar width/height, font-display: optional, reserva de min-height, usar transform em vez de top/left.
Como é uma Declaração de Causa Raiz
Não é "considere otimizar suas imagens." Esta é a saída real. Específica o suficiente para revisar e fazer o merge.
Causa raiz:
A imagem do LCP div.hero-banner > img.product-main em /product/running-shoes-42 é descoberta 1.980ms tarde porque falta uma dica de preload e não tem fetchpriority="high".
Evidências do CoreDash:
O LCP é de 3.820ms (ruim) no mobile, p75. Load Delay é o gargalo em 1.980ms (52% do total). Estado de prioridade: 3 (sem preload). Tendência: piorando +340ms ao longo de 7 dias.
Evidências do Chrome:
O waterfall de rede mostra um espaço de 1.940ms entre o primeiro byte do HTML e a requisição da imagem. Imagem referenciada apenas no CSS, invisível para o preload scanner.
Correção:
Adicione <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> em templates/product.html linha 12. Defina fetchpriority="high" no elemento img na linha 47.
Conselho genérico de IA:
"Considere adicionar fetchpriority à sua imagem do LCP e garanta o preloading adequado de recursos críticos."
CWV Superpowers:
Elemento: div.hero-banner > img.product-main
Arquivo: templates/product.html, linha 47
Evidência: 52% do tempo do LCP em Load Delay (CoreDash p75). Espaço de descoberta (discovery gap) de 1.940ms (waterfall do Chrome).
Correção: Mudança de 2 linhas de código com diff do antes/depois.
Compare: Como o CWV Superpowers se posiciona
Ferramentas diferentes resolvem problemas diferentes. Aqui está o que cada uma realmente faz.
| Capacidade | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Fonte de dados | Usuários reais (28 dias de dados de campo) | Sessão única em laboratório | Carregamento único simulado |
| Medição do INP | ✓ Interações reais | ✗ Sem usuários reais | ✗ Não medido |
| Detalhamento por fase | ✓ Fases de LCP, INP, CLS | ~ Análise manual | ✗ Apenas pontuação |
| Atribuição de elemento | ✓ Elemento exato + prioridade | ~ Se você souber onde olhar | ~ Sugestões genéricas |
| Raciocínio proporcional | ✓ Gargalo por % | ✗ Valores absolutos | ✗ Valores absolutos |
| Comparação de segmentos | ✓ Dispositivo, país, navegador | ✗ Configuração única | ✗ Configuração única |
| Detecção de tendências | ✓ Variação de 7 dias | ✗ Ponto no tempo | ✗ Ponto no tempo |
| Rastreamento do Chrome | ✓ Direcionado por fase | ✓ Acesso total | ✗ Sem navegador |
| Correções de código | ✓ Arquivo + linha + diff | ~ Dependente do agente | ~ Conselho genérico |
Nota: O MCP do Chrome DevTools é complementar. O CWV Superpowers o usa para rastreamentos direcionados após os dados de campo identificarem o gargalo. Eles funcionam melhor juntos.
Relatórios: Solte-os no Slack, anexe ao Jira
HTML autossuficiente. Sem dependências. Sem etapa de build. Um arquivo com tudo inline.
Relatório Completo (com Chrome)
Cartões de métricas codificados por cores, gráficos de detalhamento de fases, capturas de tela em formato filmstrip em momentos-chave (first paint, LCP, loaded), waterfall de rede em SVG, análise de causa raiz e a correção recomendada com o código do antes/depois.
Relatório Apenas-RUM
Mesmos cartões de métricas e detalhamento de fases, além da atribuição de elemento e análise de causa raiz. Sem filmstrip ou waterfall, mas a qualidade do diagnóstico é idêntica porque os dados de campo são a fonte de verdade.
Funciona com qualquer cliente MCP
Claude Code: Skill completa com fluxo de trabalho automatizado. Descoberta, diagnóstico, rastamento do Chrome, correções de código e relatórios. Recomendado.
Cursor: Instalação do plugin com o MCP do CoreDash. Diagnóstico completo e correções de código dentro do seu editor.
VS Code, Windsurf, Gemini CLI: Qualquer cliente com suporte a servidores HTTP MCP se conecta ao CoreDash. Mesmos dados de campo, mesma atribuição.
Client Success
Don't just take my word for it
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."
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 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."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed 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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
Rodando em 2 Minutos
Diagnóstico automatizado de Core Web Vitals no seu terminal. Você precisa de uma conta do CoreDash com fluxo de dados. O plano gratuito 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-superpower
claude --chrome
Encontre meu maior problema de CWV e corrija-o. Obtenha a sua chave de API no CoreDash → Project Settings → API Keys (MCP). Exibida apenas uma vez. Armazenada como hash SHA-256. Somente leitura.
Cursor
/plugin-add cwv-superpowers
Adicione o CoreDash em .cursor/mcp.json:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
} Outros Clientes MCP
Endpoint: https://app.coredash.app/api/mcp
Header: Authorization: Bearer cdk_YOUR_API_KEY
Funciona com VS Code (modo agente do Copilot), Windsurf, Gemini CLI, Claude Desktop e qualquer cliente HTTP MCP. Um único endpoint de performance web MCP para todos os agentes.
Perguntas Frequentes
Preciso ter o Chrome rodando para usar o CWV Superpowers?
Não. O rastreamento do Chrome é opcional. Sem ele, você obtém diagnóstico completo com dados de campo, detalhamento de fases, atribuição de elemento e sugestões de correção de código baseadas apenas nos dados do CoreDash. O Chrome adiciona capturas de tela filmstrip, waterfall de rede e confirmação visual da causa raiz. Ambos os modos geram relatórios.
Qual a diferença entre isso e rodar o Lighthouse no meu agente de IA?
O Lighthouse roda um único carregamento sintético na sua máquina. O CWV Superpowers utiliza 28 dias de dados de usuários reais do CoreDash: dispositivos reais, redes reais, interações reais. Ele mede o INP a partir de toques reais de usuários (o Lighthouse não consegue). Ele compara segmentos (mobile vs desktop, Índia vs EUA). E utiliza raciocínio proporcional para encontrar a fase de gargalo, não apenas pontuações absolutas.
Quais agentes de codificação de IA são suportados?
Qualquer agente de codificação de IA para performance web que suporte servidores MCP (Model Context Protocol). O Claude Code possui uma skill dedicada com um fluxo de trabalho automatizado de 5 passos. Cursor, VS Code (modo agente do Copilot), Windsurf, Gemini CLI e Claude Desktop se conectam através do endpoint HTTP MCP do CoreDash. Os dados de campo e a atribuição são idênticos em todos os clientes.
O CoreDash é gratuito?
O CoreDash possui um plano gratuito que funciona com o CWV Superpowers. Você precisa de dados fluindo do seu site (adicione a tag de script do CoreDash). O plano gratuito não tem amostragem e nem limites de visualizações de página. Chaves de API para acesso MCP estão disponíveis em todos os planos.
Posso usar isso para sites de clientes?
Sim. Para cada projeto do CoreDash você pode criar ilimitadas Chaves de API MVP dedicadas . Adicione o CoreDash a cada site de cliente, gere uma chave de API somente leitura e configure o seu cliente MCP. O agente vê apenas os dados daquele projeto. O CWV Superpowers possui licença MIT, então não há restrições para uso comercial.
Código Aberto. Sem Lock-in.
Automação de Core Web Vitals que você pode inspecionar e estender. O orquestrador, os módulos de diagnóstico, a lógica de rastreamento do Chrome e os templates de relatório estão todos no GitHub. Leia como funciona. Faça um fork. Estenda. Contribua.
Inicie o seu Teste Gratuito Ver no GitHub