Seu agente de IA acaba de ganhar superpoderes de Core Web Vitals
Conecte o Claude Code aos seus field data do CoreDash. Ele encontra seu pior gargalo em milhões de carregamentos de página, rastreia a causa raiz no Chrome e escreve a correção. Performance web agentiva não é um relatório, mas a própria linha de código que precisa mudar.
Instale em 2 minutos Comece 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 é seu sinal de ranqueamento
O Google ranqueia com base em field data do CrUX de usuários reais do Chrome ao longo de 28 dias. Uma pontuação perfeita no Lighthouse e uma pontuação de field data ruim acontecem o tempo todo. 52% dos sites móveis falham em pelo menos um Core Web Vital no field data.
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 sua correção ajudou. Ele otimiza uma simulação e dá o trabalho por concluído. Seus usuários reais discordam.
Investigação manual leva horas
Segmente os dados. Crie hipóteses. Execute um trace. Confirme. Rascunhe a correção. Um engenheiro de performance sênior leva 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 laboratório de forma alguma Interaction to Next Paint mede como usuários reais interagem com sua página. Nenhuma ferramenta sintética consegue replicar o comportamento de usuários reais: onde tocam, quão rápido rolam a página, qual dispositivo seguram. O Lighthouse nem sequer reporta o INP. Se o seu agente de IA executa o Lighthouse, ele está cego para os seus piores problemas de interatividade. Field data é a única fonte.
Duas fontes de verdade: Field data encontra evidências do navegador
O CWV Superpowers combina dados de usuários reais do CoreDash com traces direcionados do Chrome. O field data diz 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 que está causando o problema. Sem amostragem, sem limites.
Quando o CoreDash relata um LCP de 4,2 segundos com o 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 do LCP, tipo de elemento, estado de prioridade, detalhamento das fases, alvo de interação do INP, scripts do 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 por que está lento
O CWV Superpowers visita a página com emulação móvel: Fast 3G, throttling de CPU de 4x. Ele faz o trace apenas da fase de gargalo identificada pelo CoreDash.
O Load Delay é o gargalo? O agente examina o waterfall de rede em busca de lacunas de descoberta. O Render Delay? Ele busca por scripts bloqueantes e atrasos no carregamento de fontes.
O resultado: screenshots do filmstrip, waterfall de rede e evidências direcionadas que explicam a causa raiz que o seu field data expôs.
Raciocínio proporcional, não limiares absolutos
O Lighthouse diz: "O Render Delay é 350ms." Esse é o problema? Não faço ideia. O CWV Superpowers identifica o gargalo como a fase que consome a maior porcentagem do tempo total.
O INP é 350ms. Input Delay 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). O Presentation é o gargalo, mesmo que 200ms pareça aceitável isoladamente. Corrigi-lo move o ponteiro. Otimizar o Input Delay mal faz diferença.
Isso evita o erro mais comum no trabalho de performance: corrigir a coisa errada.
Cinco passos: De "algo está lento" à correção do código
Faça uma pergunta. Cinco passos depois, você tem uma correção baseada em evidências reais de usuários.
1. Descoberta
Varre seus dados do CoreDash em busca das piores páginas e métricas. Prioriza classificações ruins, mobile, páginas de alto tráfego e valores de p75 que escondem uma cauda longa e ruim.
2. Diagnóstico
Divide a métrica em fases. LCP: TTFB, atraso de carregamento, tempo de carregamento, atraso de renderização. INP: atraso de entrada, processamento, apresentação. Aponta o gargalo por porcentagem.
3. Chrome Trace
Visita a página com emulação mobile. Rastreia apenas a fase de gargalo do passo 2. Captura o waterfall de rede, o filmstrip e evidências de recursos bloqueantes.
4. Causa Raiz
Combina ambas as fontes de evidências em uma única afirmação: o elemento, a causa, as métricas do CoreDash e o que o Chrome confirmou. Sem ambiguidade.
5. Correção ou Relatório
A escolha é sua. Aplique a correção no código com arquivo, linha, elemento e antes/depois. Gere um relatório HTML autônomo com gráficos e evidências. Ou ambos.
25+ dimensões: Cada ângulo que seu field data cobre
Estas são as dimensões reais do CoreDash que o agente consulta. Não é um resumo. A visão completa.
LCP (Largest Contentful Paint)
Elemento LCP Tipo de elemento Estado de prioridade Fase do TTFB Atraso de carregamento Tempo de carregamento Atraso de renderizaçãoINP (Interaction to Next Paint)
Alvo do INP Atraso de entrada Processamento Apresentação Scripts do LOAF Estado de carregamentoCLS (Cumulative Layout Shift)
Elemento deslocado 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 Baseline de 28 dias Detecção de regressãoDiagnóstico: Detalhamento por fase de cada Core Web Vital
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 do Largest Contentful Paint
Detalhamento em 4 fases: TTFB, Atraso de carregamento, Tempo de carregamento, Atraso de renderização. Identifica qual fase consome a maior parte do tempo total.
Atribuição do elemento: o elemento exato do LCP, seu tipo (imagem, texto, imagem de fundo, vídeo) e estado de prioridade (fetchpriority, lazy loading).
Correções comuns: adicionar dica de preload, remover lazy loading do hero, otimizar formato de imagem, corrigir script render blocking.
Corrija o INP com IA: Diagnóstico do Interaction to Next Paint
Detalhamento em 3 fases: Atraso de entrada, Processamento, Apresentação. A única métrica que você não consegue simular em laboratório. O field data é a única fonte.
Atribuição de script: Long Animation Frames (LOAF) identifica o arquivo JavaScript exato e a duração. Além do estado de carregamento da página no momento da interação.
Correções comuns: yield para a main thread, adiar avaliação, dividir manipuladores de eventos, content-visibility para DOMs grandes.
CLS: Cumulative Layout Shift
5 padrões de causa: imagens sem dimensões, trocas de fontes, conteúdo injetado dinamicamente, recursos de carregamento tardio, animações CSS em propriedades de layout.
Multidimensional: compara mobile vs desktop, visitantes novos vs recorrentes, redes rápidas vs lentas para isolar a causa.
Correções comuns: 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". Este é o resultado real. Específico o suficiente para revisar e mesclar.
Causa raiz:
A imagem do LCP div.hero-banner > img.product-main em /product/running-shoes-42 é descoberta 1.980ms tarde demais porque falta uma instrução de preload e não tem fetchpriority="high".
Evidência do CoreDash:
O LCP é de 3.820ms (ruim) no mobile, p75. O Load Delay é o gargalo, com 1.980ms (52% do total). Estado de prioridade: 3 (não pré-carregada). Tendência: piora de +340ms em 7 dias.
Evidência do Chrome:
O waterfall de rede mostra um intervalo 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"> na linha 12 de templates/product.html. Defina fetchpriority="high" no elemento img na linha 47.
Recomendação genérica de IA:
"Considere adicionar fetchpriority à sua imagem do LCP e garanta o preload adequado de recursos críticos."
Superpoderes do CWV:
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). Intervalo de descoberta de 1.940ms (waterfall do Chrome).
Correção: Alteração de 2 linhas de código com diff antes/depois.
Compare: Como o CWV Superpowers se compara
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 (field data de 28 dias) | Sessão única de laboratório | Carregamento único simulado |
| Medição do INP | ✓ Interações reais | ✗ Sem usuários reais | ✗ Não medido |
| Detalhamento de fases | ✓ Fases do LCP, INP, CLS | ~ Análise manual | ✗ Apenas pontuação |
| Atribuição de elemento | ✓ Elemento exato + prioridade | ~ Se você souber onde procurar | ~ Sugestões genéricas |
| Análise 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 | ✗ Medição pontual | ✗ Medição pontual |
| Tracing do Chrome | ✓ Direcionado por fase | ✓ Acesso total | ✗ Sem navegador |
| Correções de código | ✓ Arquivo + linha + diff | ~ Depende do agente | ~ Recomendações genéricas |
Nota: O Chrome DevTools MCP é complementar. O CWV Superpowers o utiliza para tracing direcionado após o field data identificar o gargalo. Eles funcionam melhor juntos.
Relatórios: Envie no Slack, anexe ao Jira
HTML autocontido. Sem dependências. Sem etapa de build. Um único arquivo com tudo inline.
Relatório Completo (com Chrome)
Cards de métricas codificados por cores, gráficos de divisão de fases, capturas de tela do filmstrip em momentos-chave (first paint, o LCP, carregado), SVG do waterfall de rede, análise de causa raiz e a correção recomendada com código antes/depois.
Relatório Apenas com RUM
Mesmos cards de métricas e divisão de fases, além de atribuição de elementos e análise de causa raiz. Sem filmstrip ou waterfall, mas a qualidade do diagnóstico é idêntica porque os field data são a fonte da verdade.
Funciona com qualquer cliente MCP
Claude Code: Skill completa com fluxo de trabalho automatizado. Descoberta, diagnóstico, Chrome tracing, correções de código e relatórios. Recomendado.
Cursor: Instalação de plugin com o CoreDash MCP. 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 field data, mesma atribuição.
Client Success
Don't just take my word for it
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."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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.
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."
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."
Rodando em 2 minutos
Diagnóstico automatizado de Core Web Vitals no seu terminal. Você precisa de uma conta no CoreDash com dados ativos. O plano gratuito funciona.
Claude Code
# 1. Adicione o servidor MCP do CoreDash (login pelo navegador, sem chave de API) claude mcp add --transport http coredash https://app.coredash.app/api/mcp # 2. Instale o CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpowers # 3. Inicie com o Chrome (opcional, recomendado) claude --chrome # 4. Executar Encontre meu maior problema de CWV e corrija-o.
Na primeira conexão, execute /mcp, escolha coredash e selecione Authenticate. Seu navegador abre o login do CoreDash, você escolhe um projeto e aprova, e o Claude Code armazena um token OAuth temporário que se atualiza automaticamente (acesso de 1 hora, atualização de 30 dias) e permanece revogável. Sem chave para colar.
Prefere uma chave de API para uso headless ou CI? Adicione --header "Authorization: Bearer cdk_YOUR_API_KEY" ao comando, gerada em CoreDash → Project Settings → API Keys (MCP). Exibida apenas uma vez. Armazenada como hash SHA-256. Somente leitura.
Cursor
# Instale o plugin
/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
Cabeçalho: Authorization: Bearer cdk_YOUR_API_KEY
Funciona com VS Code (modo agente do Copilot), Windsurf, Gemini CLI, Claude Desktop e qualquer cliente MCP HTTP. Um único endpoint MCP de performance web, todos os agentes.
Perguntas frequentes
Preciso do Chrome em execução para usar o CWV Superpowers?
Não. O tracing do Chrome é opcional. Sem ele, você obtém diagnóstico completo de field data, detalhamento de fases, atribuição de elementos e sugestões de correção de código baseadas apenas nos dados do CoreDash. O Chrome adiciona screenshots em filmstrip, waterfall de rede e confirmação visual da causa raiz. Ambos os modos geram relatórios.
Como isso difere de executar o Lighthouse no meu agente de IA?
O Lighthouse executa um único carregamento sintético na sua máquina. O CWV Superpowers usa 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 de usuários reais (o Lighthouse não consegue). Ele compara segmentos (mobile vs desktop, Índia vs EUA). E usa 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 web performance que suporte servidores MCP (Model Context Protocol). O Claude Code tem uma skill dedicada com fluxo de trabalho automatizado de 5 etapas. Cursor, VS Code (modo agente do Copilot), Windsurf, Gemini CLI e Claude Desktop se conectam via endpoint HTTP MCP do CoreDash. Os field data e a atribuição são idênticos em todos os clientes.
O CoreDash é gratuito?
O CoreDash tem 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 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 chaves de API MVP dedicadas ilimitadas . Adicione o CoreDash a cada site de cliente, gere uma chave de API somente leitura e configure seu cliente MCP. O agente vê apenas os dados desse projeto. O CWV Superpowers é licenciado sob a MIT, portanto 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 Chrome tracing e os templates de relatório estão todos no GitHub. Leia como funciona. Faça um fork. Estenda. Contribua.
Comece seu teste gratuito Ver no GitHub