🚀
ChatGPT intermediate

Prompt para testing em performance de frontend em Performance de Frontend

Prompt gerado automaticamente para Testing em Performance de Frontend em Performance de Frontend

4 usos Performance de Frontend

Prompt completo

Considerando meu papel como engenheiro(a) de performance frontend em um time ágil, e sabendo que implementamos testes de performance automatizados em nosso pipeline de CI/CD, preciso de uma ferramenta que me ajude a identificar regressões de performance de forma proativa e detalhada.

Gere um script ou uma série de comandos em JavaScript (para Node.js, usando Puppeteer ou Playwright para automação e, opcionalmente, ferramentas como Lighthouse CI ou WebPageTest API para métricas), que faça o seguinte:

1.  **Navegação e Interação:** Acesse uma URL específica (por exemplo, `https://seusite.com.br/pagina-de-produto`), simule a interação de um usuário (por exemplo, adicionar um item ao carrinho, navegar para uma página de checkout).
2.  **Coleta de Métricas:** Durante essa interação, capture métricas de performance relevantes (LCP, FID/INP, CLS, TBT, FCP, DCL, LCP, e métricas de tempo de carregamento como "DOMContentLoaded" e "Load").
3.  **Comparação Histórica:** Compare as métricas coletadas com um baseline previamente estabelecido (por exemplo, um arquivo JSON com as métricas da última execução estável, ou dados de um banco de dados).
4.  **Detecção de Regressão:** Se qualquer métrica exceder um limite de tolerância pré-definido (por exemplo, LCP aumentou mais de 10% ou 200ms), o script deve:
    *   **Gerar um Relatório Detalhado:** Criar um relatório claro e conciso (em formato Markdown ou HTML) que destaque as métricas afetadas, a diferença em relação ao baseline, e um gráfico simples de tendência (se possível, usando uma biblioteca JS como Chart.js para o HTML, ou uma representação textual simples para Markdown).
    *   **Sugestão de Análise:** Incluir uma seção no relatório com sugestões de onde investigar a regressão (por exemplo, "Verifique alterações em bundles JS, imagens, ou requisições de API para esta rota específica").
    *   **Integração com Ferramentas:** Opcionalmente, mostrar como este script poderia ser integrado a um pipeline de CI/CD (por exemplo, como um passo no GitHub

Tags relacionadas

Performance de Frontend Testing em Performance de Frontend gerado-automaticamente

Como usar este prompt

1

Clique no botão "Copiar" para copiar o prompt para sua área de transferência

2

Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)

3

Cole o prompt e adapte conforme necessário para seu contexto específico