Prompt completo
"Você é um engenheiro de performance frontend sênior. Sua tarefa é criar um **guia passo a passo detalhado e acionável** para diagnosticar e resolver um problema comum de "debugging de performance": **"Identificar a causa raiz de lentidão percebida na renderização inicial (Time to First Byte alto ou First Contentful Paint lento) quando não há indicação óbvia de gargalos no backend ou na rede (ex: APIs rápidas, CDN funcionando)."** O guia deve incluir: 1. **Ferramentas e Métodos de Análise:** Quais ferramentas do navegador (Chrome DevTools, Firefox Developer Tools) e outras (WebPageTest, Lighthouse) você usaria e exatamente **como** as configuraria/executaria para coletar os dados necessários. 2. **Métricas Chave:** Quais métricas (TTFB, FCP, LCP, TBT, TTI, Script Evaluation, Layout Shift) você observaria e o que cada uma pode indicar sobre a causa. 3. **Hipóteses Comuns e Testes:** Para cada métrica problemática, liste as hipóteses mais prováveis (ex: JavaScript bloqueante no head, CSS render-blocking, imagens não otimizadas, fontes externas, excesso de requisições síncronas, Hydration issues em SPAs) e descreva os **passos específicos de debugging** para confirmar ou refutar cada uma (ex: "No DevTools, vá em 'Performance', grave um carregamento e analise a timeline de 'Main Thread' e 'Network'. Procure por longas barras azuis em 'Script Evaluation' ou 'Layout' logo no início."). 4. **Estratégias de Resolução:** Para cada hipótese confirmada, sugira **soluções práticas e priorizadas** (ex: "Mover scripts para o final do `<body>` ou usar `defer`/`async`", "Criticar CSS e inlining de estilos essenciais", "Otimizar imagens com WebP e lazy loading", "Pré-carregar fontes com `font-display: optional`", "Usar `requestAnimationFrame` para animações", "Analisar árvores de componentes grandes para otimização da hidratação"). 5. **Exemplo Prático (Simulado):** Descreva um cenário hipotético onde o problema é
Tags relacionadas
Performance de Frontend
Debugging 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
Outros prompts de Performance de Frontend
ChatGPT
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
2 usos
ChatGPT
Guia 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
ChatGPT
Guia para troubleshooting em performance de frontend em Performance de Frontend
Prompt gerado automaticamente para Troubleshooting em Performance de Frontend em Performance de Frontend
4 usos