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 através de milhões de carregamentos de página, rastreia a causa raiz no Chrome e escreve a correção. Desempenho web agêntico 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
As Ferramentas de Desempenho 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 desempenho web útil parte dos mesmos dados que o Google: usuários reais em celulares baratos, conexões instáveis e continentes que a sua máquina de desenvolvimento nunca viu.
O Lighthouse Não é o Seu Sinal de Ranqueamento
O Google ranqueia com base nos dados de campo do CrUX de usuários reais do Chrome ao longo de 28 dias. Uma pontuação perfeita no Lighthouse e uma pontuação de campo reprovada acontecem o tempo todo. 52% dos sites mobile falham em pelo menos um Core Web Vital no campo.
Agentes Cegos Fazem Correções Cegas
Sem dados reais de usuários, um agente de IA não sabe qual página é lenta, qual elemento é o gargalo, ou se a sua correção ajudou. Ele otimiza uma simulação e dá o trabalho por encerrado. Seus usuários reais discordam.
A Investigação Manual Leva Horas
Segmente os dados. Crie hipóteses. Rode um rastreamento. Confirme. Redija a correção. Um engenheiro de desempenho sênior gasta de 2 a 4 horas por problema. Multiplique isso por cada página lenta no seu site.
INP não pode ser simulado em um laboratório Interaction to Next Paint mede como os usuários reais interagem com sua página. Nenhuma ferramenta sintética pode replicar o comportamento real do usuário: onde eles tocam, a velocidade que rolam a página, qual dispositivo seguram. O Lighthouse nem sequer relata o INP. Se o seu agente de IA roda o Lighthouse, ele é cego para os seus piores problemas de interatividade. Os dados de campo são a única fonte.
Duas fontes de verdade: Os dados de campo encontram a evidência do navegador
O CWV Superpowers combina dados reais de usuários do CoreDash com rastreamentos direcionados do Chrome. Os dados de campo dizem o que está lento. O Chrome diz o porquê.
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 no 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 mais de 25 dimensões do CoreDash: elemento de LCP, tipo de elemento, estado de prioridade, divisão em fases, alvo de interação do INP, scripts LOAF, elemento de deslocamento do CLS, tipo de dispositivo, tipo de visitante, velocidade da rede, tendências de 7 dias.
O Chrome diz ao agente o porquê de estar lento
O CWV Superpowers visita a página com emulação mobile: Fast 3G, 4x CPU throttling. Ele rastreia apenas a fase de gargalo que o CoreDash identificou.
Load Delay é o gargalo? O agente examina o waterfall de rede por lacunas de descoberta. Render Delay? Ele procura por scripts bloqueantes e atrasos no carregamento de fontes.
O resultado: capturas de tela em filmstrip, waterfall de rede, e evidências direcionadas que explicam a causa raiz que seus dados de campo expuseram.
Raciocínio proporcional, não limites absolutos
O Lighthouse te diz "Render Delay é de 350ms." Esse é o problema? Nenhuma ideia. O CWV Superpowers identifica o gargalo como a fase que consome a maior porcentagem do tempo total.
O INP é de 350ms. Input Delay de 70ms (20%), Processing de 80ms (23%), Presentation de 200ms (57%). Presentation é o gargalo, mesmo que 200ms pareça aceitável de forma isolada. Corrigir isso muda o jogo. Otimizar o Input Delay mal é notado.
Isso previne o erro mais comum no trabalho de desempenho: corrigir a coisa errada.
Cinco etapas: De "algo está lento" até a correção do código
Faça uma pergunta. Cinco etapas depois você tem uma correção embasada por evidências de usuários reais.
1. Descoberta
Escaneia os 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 ocultam 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 da etapa 2. Captura o waterfall de rede, filmstrip, e evidências de recursos bloqueantes.
4. Causa Raiz
Combina ambas as 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 ambiguidade.
5. Correção ou Relatório
Sua escolha. Aplique a correção de código indicando o arquivo, linha, elemento, o antes/depois. Gere um relatório em HTML autônomo com gráficos e evidências. Ou ambos.
Mais de 25 dimensões: Todos os ângulos que os seus dados de campo abrangem
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 de LCP Tipo de elemento Estado de prioridade Fase de TTFB Load Delay Load Time Render DelayINP (Interaction to Next Paint)
Alvo de INP Input Delay Processing Presentation Scripts LOAF Estado de carregamentoCLS (Cumulative Layout Shift)
Elemento com deslocamento Causa do deslocamento Momento do deslocamentoSegmentos
Tipo de dispositivo País Navegador Sistema Operacional Conexão Tipo de visitante Caminho da páginaTendências
Delta de 7 dias Linha de base de 28 dias Detecção de regressãoDiagnostique: Divisão em nível de fase para cada Core Web Vital
Não apenas pontuações. Cada métrica dividida em fases usando atribuição de usuários reais pelo CoreDash.
Corrija o LCP com IA: Diagnóstico de Largest Contentful Paint
Divisão em 4 fases: TTFB, Load Delay, Load Time, Render Delay. Identifica qual fase consome a maior parte do tempo total.
Atribuição de elemento: o elemento de LCP exato, seu tipo (imagem, texto, imagem de fundo, vídeo) e estado de prioridade (fetchpriority, lazy loading).
Correções típicas: adicionar dica 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
Divisão em 3 fases: Input Delay, Processing, Presentation. A única métrica que você não pode simular em laboratório. Os 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, postergar avaliação, dividir tratadores de eventos, content-visibility para DOMs extensos.
CLS: Cumulative Layout Shift
5 padrões de causa: imagens sem dimensões, trocas de fonte, conteúdo injetado dinamicamente, recursos que carregam tarde, animações CSS em propriedades de layout.
Multidimensional: compara mobile com desktop, visitantes novos com os que retornam, redes rápidas com as 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 se Parece uma Declaração de Causa Raiz
Não é "considere otimizar suas imagens." Esta é a saída real. Específica o suficiente para revisar e mesclar.
Causa raiz:
A imagem de LCP div.hero-banner > img.product-main em /product/running-shoes-42 é descoberta com 1.980ms de atraso porque não possui uma dica de preload e não tem fetchpriority="high".
Evidência do CoreDash:
O LCP é de 3.820ms (ruim) no mobile, p75. Load Delay é o gargalo com 1.980ms (52% do total). Estado de prioridade: 3 (sem preload). Tendência: piorando +340ms ao longo de 7 dias.
Evidência 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 scanner de preload.
Correção:
Adicione <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> ao templates/product.html na linha 12. Defina fetchpriority="high" no elemento img na linha 47.
Conselho genérico de IA:
"Considere adicionar fetchpriority à sua imagem de LCP e certifique-se do preload 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 no Load Delay (CoreDash p75). Lacuna de descoberta de 1.940ms (waterfall do Chrome).
Correção: alteração de 2 linhas de código com o diff de antes/depois.
Compare: Como o CWV Superpowers se sai
Diferentes ferramentas 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 de INP | ✓ Interações reais | ✗ Sem usuários reais | ✗ Não medido |
| Divisão em fases | ✓ Fases de LCP, INP, CLS | ~ Análise manual | ✗ Apenas a 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 | ✓ Delta de 7 dias | ✗ Momento específico | ✗ Momento específico |
| Rastreamento do Chrome | ✓ Direcionado por fase | ✓ Acesso total | ✗ Nenhum navegador |
| Correções de código | ✓ Arquivo + linha + diff | ~ Depende do agente | ~ Conselho genérico |
Nota: O Chrome DevTools MCP é complementar. O CWV Superpowers o utiliza para rastreamentos direcionados após os dados de campo identificarem o gargalo. Eles funcionam melhor juntos.
Relatórios: Jogue-os no Slack, anexe no Jira
HTML autônomo. Sem dependências. Nenhum passo de build. Um arquivo com tudo incluído.
Relatório Completo (com Chrome)
Cartões de métricas codificados por cores, gráficos de divisão de fases, capturas de tela em filmstrip em momentos chave (first paint, LCP, carregado), SVG de waterfall de rede, análise de causa raiz e a correção recomendada com o código antes/depois.
Relatório Apenas de RUM
Mesmos cartões de métricas e divisão de fases, mais 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, rastreamento do Chrome, correções de código e relatórios. Recomendado.
Cursor: Instalação via 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 que suporte servidores HTTP MCP se conecta ao CoreDash. Mesmos dados de campo, mesma atribuição.
Client Success
Don't just take my word for it
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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 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."
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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
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.
Rodando em 2 Minutos
Diagnóstico automatizado de Core Web Vitals no seu terminal. Você precisa de uma conta CoreDash com dados fluindo. 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-superpowers
claude --chrome
Encontre o meu maior problema de CWV e o corrija. 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 ao .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 o VS Code (modo de agente Copilot), Windsurf, Gemini CLI, Claude Desktop e qualquer cliente HTTP MCP. Um endpoint de desempenho web MCP, todos os agentes.
Perguntas Frequentes
Preciso do Chrome rodando para usar o CWV Superpowers?
Não. O rastreamento do Chrome é opcional. Sem ele, você tem um diagnóstico completo dos dados de campo, divisões de fases, atribuição de elemento e sugestões de correção de código baseadas apenas nos dados do CoreDash. O Chrome adiciona as capturas de tela em filmstrip, o waterfall de rede e a confirmação visual da causa raiz. Ambos os modos geram relatórios.
Como isso é diferente de rodar o Lighthouse no meu agente de IA?
O Lighthouse executa um único carregamento sintético na sua máquina. O CWV Superpowers utiliza 28 dias de dados reais de usuários do CoreDash: dispositivos reais, redes reais, interações reais. Ele mede o INP através dos toques de usuários reais (o Lighthouse não consegue). Ele compara segmentos (mobile vs desktop, Índia vs EUA). E utiliza o 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 desempenho web que suporte servidores MCP (Model Context Protocol). O Claude Code possui uma skill dedicada com um fluxo de trabalho automatizado em 5 etapas. Cursor, VS Code (modo de agente 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 possui amostragem e nem limite de visualizações de página. As 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 desse 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