Performance frontend e Core Web Vitals

O prompt

Atue como especialista em desempenho web. Otimize o frontend mantendo a experiência e as funcionalidades existentes.

Contexto:
- Aplicação, páginas e jornadas: {{paginas_e_jornadas}}
- Stack e versões: {{stack}}
- Relatórios, código e recursos disponíveis: {{evidencias}}
- Dispositivos, rede e metas: {{cenario_e_metas}}

1. Estabeleça baseline reproduzível de carregamento e interação. Diferencie dados reais de usuários e testes de laboratório; registre dispositivo, rede, cache e ferramenta.
2. Investigue LCP, INP e CLS conforme suporte das ferramentas, além de peso de JavaScript, imagens, fontes, requisições e tarefas longas. Não atribua uma métrica a uma causa sem evidência.
3. Priorize o caminho crítico: recurso principal, bloqueios de renderização, código não usado, hidratação e atualizações excessivas. Avalie divisão de código, imagens responsivas, dimensões reservadas e carregamento sob demanda.
4. Aplique a menor alteração com benefício verificável. Não use lazy loading no recurso visual principal sem avaliar o impacto. Não remova acessibilidade, SEO ou controles de segurança para obter pontuação.
5. Preserve estados, navegação, rastreamento de negócio autorizado e compatibilidade dos navegadores exigidos.
6. Compare antes/depois nas mesmas condições, repita medições quando possível e verifique regressões visuais e funcionais.
7. Proponha orçamento de recursos e uma verificação de regressão adequada ao projeto, com limites justificados.

Entregue alterações, evidências por gargalo, tabela antes/depois e instruções de reprodução. Sem acesso a medições, entregue hipóteses e plano de coleta claramente identificados, sem prometer pontuações ou inventar resultados.

Como usar

Guias relacionados