O 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. Performance web agêntica, não um relatório, mas a linha exata de código que precisa ser alterada.
Instalar em 2 Minutos Iniciar 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 num dispositivo simulado que o Google não utiliza para rankings. Um agente de IA de performance web útil começa a partir dos mesmos dados que o Google usa: usuários reais em telefones de baixo custo, conexões instáveis e continentes que a sua máquina de desenvolvimento nunca viu.
O Lighthouse Não é o seu Sinal de Ranking
O Google faz o ranking com base em dados de campo do CrUX de usuários reais do Chrome durante 28 dias. Uma pontuação perfeita no Lighthouse e uma pontuação de campo reprovada acontecem o tempo todo. 52% dos sites móveis reprovam em pelo menos um Core Web Vital em campo.
Agentes Cegos Fazem Correções Cegas
Sem dados de usuários reais, 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 concluído. Os seus usuários reais discordam.
A Investigação Manual Leva Horas
Segmentar os dados. Criar hipóteses. Executar um trace. Confirmar. Rascunhar a correção. Um engenheiro de performance sênior passa de 2 a 4 horas por problema. Multiplique isso por cada página lenta no seu site.
O INP não pode ser simulado num laboratório de forma alguma Interaction to Next Paint mede como usuários reais interagem com a sua página. Nenhuma ferramenta sintética pode replicar o comportamento real do usuário: onde eles tocam, com que rapidez eles rolam, que dispositivo eles seguram. O Lighthouse nem sequer relata o INP. Se o seu agente de IA executa o Lighthouse, ele está cego para os seus piores problemas de interatividade. Os dados de campo são a única fonte.
Duas fontes da verdade: Dados de campo encontram evidências do navegador
O CWV Superpowers combina dados de usuários reais do CoreDash com traces direcionados do Chrome. Os dados de campo dizem o que é lento. O Chrome diz o porquê.
O CoreDash diz ao agente o que é 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 o 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 a partir de milhões de sessões reais.
A skill consulta 25+ dimensões do CoreDash: elemento de LCP, tipo de elemento, estado de prioridade, detalhamento de 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 ser lento
O CWV Superpowers visita a página com emulação móvel: 3G rápido, limitação de CPU em 4x. Ele faz o trace apenas da fase de gargalo que o CoreDash identificou.
Load Delay é o gargalo? O agente examina o waterfall de rede em busca de lacunas de descoberta. Render Delay? Ele procura por scripts bloqueantes e atrasos de carregamento de fontes.
O resultado: capturas de tela em 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 diz-lhe "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 70ms (20%), Processing 80ms (23%), Presentation 200ms (57%). Presentation é o gargalo, mesmo que 200ms pareça bem isoladamente. Corrigi-lo move a agulha. Otimizar o Input Delay mal é notado.
Isso previne o erro mais comum no trabalho de performance: corrigir a coisa errada.
Cinco passos: De "algo está lento" até à correção do código
Faça uma pergunta. Cinco passos depois você tem uma correção apoiada por evidências de usuários reais.
1. Descoberta
Varre os seus dados do CoreDash pelas piores páginas e métricas. Prioriza classificações ruins, dispositivos móveis, páginas de alto tráfego e pontuações no p75 que escondem uma longa cauda de problemas.
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. Trace do Chrome
Visita a página com emulação móvel. Faz o trace apenas da fase de gargalo a partir do passo 2. Captura o waterfall de rede, filmstrip e evidências de recursos bloqueantes.
4. Causa Raiz
Combina ambas as fontes de evidência numa ú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 com o arquivo, linha, elemento, antes/depois. Gere um relatório HTML autônomo com gráficos e evidências. Ou ambos.
25+ dimensões: Todos os ângulos que os seus dados de campo cobrem
Estas são as verdadeiras dimensões 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 do INP Input Delay Processing Presentation Scripts LOAF Estado de carregamentoCLS (Cumulative Layout Shift)
Elemento de deslocamento Causa do deslocamento Tempo do deslocamentoSegmentos
Tipo de dispositivo País Navegador SO Conexão Tipo de visitante Caminho da páginaTendências
Delta de 7 dias Linha de base de 28 dias Detecção de regressõesDiagnóstico: Detalhamento por fases para cada Core Web Vital
Não apenas pontuações. Cada métrica é dividida em fases usando atribuição de usuários reais do CoreDash.
Corrigir 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 de LCP exato, o 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 o lazy loading do hero, otimizar o formato de imagem, corrigir script que bloqueia a renderização.
Corrigir 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 num laboratório. Os dados de campo são a única fonte.
Atribuição de script: O 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, 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, carregamento tardio de recursos, animações de CSS em propriedades de layout.
Multidimensional: compara dispositivos móveis vs desktop, visitantes novos vs recorrentes, redes rápidas vs lentas para limitar 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 Parecem as Declarações de Causa Raiz
Não é "considere otimizar as suas imagens." Esta é a verdadeira saída. Específica o suficiente para revisar e fazer o merge.
Causa raiz:
A imagem de LCP div.hero-banner > img.product-main em /product/running-shoes-42 é descoberta 1.980ms atrasada porque lhe falta uma dica de preload e não tem fetchpriority="high".
Evidência do CoreDash:
O LCP é de 3.820ms (pobre) em dispositivos móveis, p75. O Load Delay é o gargalo com 1.980ms (52% do total). Estado de prioridade: 3 (não tem preload). Tendência: a piorar +340ms nos últimos 7 dias.
Evidência do Chrome:
O waterfall de rede mostra uma lacuna de 1.940ms entre o primeiro byte do HTML e a requisição da imagem. Imagem referenciada apenas em 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 linha 12. Defina fetchpriority="high" no elemento img na linha 47.
Conselho Genérico da IA:
"Considere adicionar fetchpriority à sua imagem de LCP e assegure o preloading adequado dos recursos críticos."
CWV Superpowers:
Elemento: div.hero-banner > img.product-main
Arquivo: templates/product.html, linha 47
Evidência: 52% do tempo de LCP em Load Delay (CoreDash p75). Lacuna de descoberta de 1.940ms (waterfall do Chrome).
Correção: Mudança de código de 2 linhas com diff do antes/depois.
Comparar: Como o CWV Superpowers se posiciona
Ferramentas diferentes resolvem problemas diferentes. Eis o que cada uma delas realmente faz.
| Capacidade | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Fonte de dados | Usuários reais (dados de campo de 28 dias) | Sessão única de laboratório | Carregamento único simulado |
| Medição de INP | ✓ Interações reais | ✗ Sem usuários reais | ✗ Não medido |
| Detalhamento por fases | ✓ Fases de LCP, INP, CLS | ~ Análise manual | ✗ Apenas pontuação |
| Atribuição de elemento | ✓ Elemento exato + prioridade | ~ Se 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 no tempo | ✗ Momento no tempo |
| Trace do Chrome | ✓ Direcionado por fase | ✓ Acesso completo | ✗ Sem navegador |
| Correções de código | ✓ Arquivo + linha + diff | ~ Dependente do agente | ~ Conselho genérico |
Nota: O Chrome DevTools MCP é complementar. O CWV Superpowers usa-o para tracing direcionado depois de os dados de campo identificarem o gargalo. Eles funcionam melhor em conjunto.
Relatórios: Envie-os para o Slack, anexe ao Jira
HTML autônomo. Sem dependências. Sem etapa de build. Um arquivo com tudo em linha.
Relatório Completo (com Chrome)
Cartões de métricas codificados por cores, gráficos de detalhamento 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 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 da verdade.
Funciona com qualquer cliente MCP
Claude Code: Skill completa com fluxo de trabalho automatizado. Descoberta, diagnóstico, trace do Chrome, correções de código e relatórios. Recomendado.
Cursor: Instalação de plugin com 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 conecta-se 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.
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
A Rodar em 2 Minutos
Diagnóstico automatizado de Core Web Vitals no seu terminal. Precisa de uma conta do CoreDash com fluxo de dados. O nível gratuito funciona.
Claude Code
# 1. Adicionar o servidor CoreDash MCP claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. Instalar o CWV Superpowers /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Iniciar com o Chrome (opcional, recomendado) claude --chrome # 4. Ir Encontre o meu maior problema de CWV e corrija-o.
Obtenha a sua chave de API do CoreDash → Configurações do Projeto → Chaves de API (MCP). Mostrada apenas uma vez. Armazenada como hash SHA-256. Apenas leitura.
Cursor
# Instalar 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 de agente do Copilot), Windsurf, Gemini CLI, Claude Desktop, e qualquer cliente HTTP MCP. Um único endpoint de performance web MCP, todos os agentes.
Perguntas Frequentes
Preciso ter o Chrome rodando para usar o CWV Superpowers?
Não. O trace do Chrome é opcional. Sem ele, você obtém um diagnóstico completo de dados de campo, detalhamento por fases, atribuição de elemento e sugestões de correção de código com base apenas nos dados do CoreDash. O Chrome adiciona capturas de tela em filmstrip, waterfall de rede e confirmação visual da causa raiz. Ambos os modos geram relatórios.
Como é que isso é diferente de rodar o Lighthouse no meu agente de IA?
O Lighthouse roda um único carregamento sintético na sua máquina. O CWV Superpowers utiliza dados de usuários reais de 28 dias 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). Compara segmentos (dispositivos móveis vs desktop, Índia vs EUA). E usa 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 performance web que suporte servidores MCP (Model Context Protocol). O Claude Code tem uma skill dedicada com um fluxo de trabalho automatizado de 5 passos. O Cursor, o VS Code (modo de agente do Copilot), o Windsurf, o Gemini CLI e o Claude Desktop conectam-se 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 tem um nível gratuito que funciona com o CWV Superpowers. Precisa de ter fluxo de dados a partir do seu site (adicione a tag de script do CoreDash). O nível gratuito não tem amostragem nem limites de visualizações de página. As chaves de API para acesso ao MCP estão disponíveis em todos os planos.
Posso usar isto em sites de clientes?
Sim. Para cada projeto no CoreDash, você pode criar Chaves de API de MVP dedicadas e ilimitadas . Adicione o CoreDash a cada site de cliente, gere uma chave de API apenas de leitura e configure o seu cliente MCP. O agente vê apenas os dados desse projeto. O CWV Superpowers está licenciado sob MIT, portanto não há restrições ao 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 trace do Chrome e os modelos de relatório estão todos no GitHub. Leia como funciona. Faça um fork. Estenda-o. Contribua.
Inicie o seu Teste Gratuito Ver no GitHub