web-perf

Visão geral do skill web-perf

O que o web-perf faz

O skill web-perf ajuda você a auditar e melhorar a velocidade de página usando o Chrome DevTools MCP, em vez de adivinhar com base só em uma captura de tela ou em uma nota do Lighthouse. Ele foca em Core Web Vitals, diagnóstico baseado em trace, waterfalls de rede, bloqueios de renderização, shifts de layout, cache e questões relacionadas de acessibilidade e performance.

Quem deve usar

Use este skill web-perf se você precisa de uma investigação prática de performance para um site real, especialmente quando quer explicar por que uma página parece lenta, por que uma métrica piorou ou qual recurso está prejudicando o carregamento. Ele é uma ótima opção para trabalho de Performance Optimization em que evidência vale mais do que conselho genérico.

O que o torna diferente

O principal valor do web-perf é o viés para obtenção em tempo real de documentação atual e dados do DevTools, e não de modelos mentais desatualizados. Isso o torna melhor para decisões que dependem de definições exatas de métricas, interpretação de traces ou comportamento atual das ferramentas. Ele é menos útil para auditorias amplas de SEO ou críticas de design que não exigem tracing de performance.

Como usar o skill web-perf

Instale e verifique o ambiente

Execute o fluxo web-perf install pelo seu gerenciador de skills e depois confirme que o servidor Chrome DevTools MCP realmente está disponível antes de pedir a análise. O skill espera acesso ao DevTools; se as ferramentas MCP estiverem faltando, o fluxo deve parar cedo em vez de inventar resultados.

Faça um prompt orientado a performance

Um prompt forte de web-perf usage nomeia a página, o sintoma e o contexto que o agente precisa para reproduzir ou inspecionar. Por exemplo: “Audite a home no mobile para regressão de LCP após o último release. Foque em CSS bloqueando renderização, entrega da imagem hero e evidências do trace.” Isso é melhor do que “deixe este site mais rápido”, porque diz ao skill o que medir e onde olhar.

Leia primeiro os arquivos certos

Comece com SKILL.md e depois siga quaisquer docs vinculados no repo que expliquem fontes de retrieval, verificações de ferramentas ou etapas de análise. Neste repo não há pastas auxiliares extras, então os principais pontos de decisão estão no próprio arquivo do skill. Preste atenção especial às seções que instruem o agente a verificar as ferramentas MCP, priorizar retrieval e usar evidências do trace em vez de suposições.

Use um fluxo que corresponda à pergunta

Para diagnóstico, peça uma causa raiz baseada em trace e uma lista curta de correções. Para otimização, peça primeiro os maiores ganhos prováveis, não uma checklist exaustiva. Para caça a regressão, informe a mudança antes/depois, a URL, a classe do dispositivo e se o foco maior é LCP, INP ou CLS. Quanto mais concreto o input, menos o modelo precisa adivinhar qual caminho do web-perf guide seguir.

FAQ do skill web-perf

O web-perf serve só para auditorias no estilo Lighthouse?

Não. Ele é útil para trabalhos relacionados ao Lighthouse, mas o uso mais forte é o debugging baseado em trace com o DevTools MCP. Isso significa que ele pode ajudar você a entender por que uma métrica mudou, e não apenas que ela mudou.

Preciso saber bem o Chrome DevTools?

Não necessariamente. O skill é útil para iniciantes que conseguem descrever o problema com clareza. Você não precisa ser especialista em trace, mas precisa de contexto suficiente para dizer ao agente qual página, dispositivo e sintoma importam.

Quando eu não devo usar o web-perf?

Não use quando você quer um refatoramento frontend genérico, uma revisão visual de design ou uma პასუხa que não dependa de evidência em tempo de execução. Se você não consegue fornecer uma página para inspecionar ou não tem o DevTools MCP disponível, o skill ficará bloqueado.

Em que ele é melhor do que um prompt comum?

Um prompt comum geralmente fica no alto nível. O skill web-perf é mais acionável porque empurra para documentação atual, verificações explícitas de ferramentas e causas mensuráveis como bloqueio de renderização, cadeias de dependência, origens de layout shift e comportamento de cache. Isso o torna mais forte para Performance Optimization do que uma instrução avulsa em chat.

Como melhorar o skill web-perf

Forneça entradas rastreáveis, não objetivos vagos

A melhor forma de melhorar os resultados do web-perf é informar uma URL, o dispositivo-alvo, a condição de teste e a métrica que mais importa. “Melhorar a velocidade do checkout” é fraco. “Auditar o checkout em Android intermediário na rede 4G rápida para LCP e CLS depois que o novo banner hero entrou no ar” é muito melhor.

Compartilhe a janela da mudança e a causa suspeita

Se você sabe o que mudou, diga isso. Release notes, uma atualização recente no CMS, um novo script de terceiros ou um hero redesenhado muitas vezes apontam a investigação na direção certa. Isso ajuda o skill a testar causas prováveis em vez de vasculhar a página inteira no escuro.

Peça evidências e um caminho de correção priorizado

Uma saída útil do web-perf deve separar causas confirmadas de causas prováveis e depois ranquear as correções por impacto no usuário e esforço de implementação. Se a primeira resposta vier ampla demais, peça os dois principais gargalos, as evidências de trace por trás deles e a menor mudança segura para validar a melhoria.

Itere com medições antes/depois

Trate a primeira passada como diagnóstico, não como conclusão. Depois de aplicar uma correção, rode novamente o mesmo fluxo do web-perf com a mesma página e as mesmas condições para que a saída compare evidências de trace e métricas de forma consistente. Essa é a forma mais rápida de transformar um web-perf guide em um ciclo repetível de otimização.