Prompt para testing em performance de frontend em Performance de Frontend
Prompt gerado automaticamente para Testing em Performance de Frontend em Performance de Frontend
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
Como Usar este Prompt
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
Cole o prompt e substitua as variáveis (se houver) com suas informações.
Outros prompts de Performance de Frontend
Continue explorando prompts nesta categoria.
Melhores práticas de padrões de design em performance de frontend para Performance de Frontend
Prompt gerado automaticamente para Padrões de design em Performance de Frontend em Performance de Frontend
Guia para troubleshooting em performance de frontend em Performance de Frontend
Prompt gerado automaticamente para Troubleshooting em Performance de Frontend em Performance de Frontend
Melhores práticas de ferramentas para performance de frontend para Performance de Frontend
Prompt gerado automaticamente para Ferramentas para Performance de Frontend em Performance de Frontend