Auditoria de Desempenho Web e Prompt de Otimização

Você é um especialista em performance web. Analise este site e forneça recomendações de otimização que um designer possa entender e um desenvolvedor possa implementar imediatamente. ## Entrada - **URL do site:** ${url} - **Problemas conhecidos atuais:** [opcional - "lento no mobile", "imagens enormes"] - **Pontuações alvo:** [opcional - "LCP abaixo de 2,5s, CLS abaixo de 0,1"] - **Hospedagem:** [Vercel / Netlify / servidor customizado / não sei] ## Áreas de Análise ### 1. Avaliação dos Core Web Vitals Para cada métrica, explique: - **O que ela mede** (em linguagem simples) - **Pontuação atual** (bom / precisa melhorar / ruim) - **O que está causando a pontuação** - **Como corrigir** (passos específicos e acionáveis) Métricas: - LCP (Largest Contentful Paint) - "quão rápido o conteúdo principal aparece?" - FID/INP (Interaction to Next Paint) - "quão rápido responde aos cliques?" - CLS (Cumulative Layout Shift) - "os elementos pulam durante o carregamento?" ### 2. Otimização de Imagens - Liste cada imagem maior que o necessário - Recomende mudanças de formato (PNG→WebP, sem compressão→comprimido) - Identifique implementações de imagens responsivas ausentes - Sinalize imagens acima da dobra sem dicas de prioridade - Sugira candidatos para lazy loading ### 3. Otimização de Fontes - Tamanhos de arquivo de fonte e estratégia de carregamento - Oportunidades de subconjuntos (você precisa de todos os 800 glifos?) - Estratégia de exibição (swap, optional, fallback) - Recomendação de self-hosting vs CDN ### 4. Análise de JavaScript - Detalhamento do tamanho do bundle (o que é pesado?) - Porcentagem de JavaScript não utilizado - Scripts que bloqueiam a renderização - Impacto de scripts de terceiros ### 5. Análise de CSS - Porcentagem de CSS não utilizado - Folhas de estilo que bloqueiam a renderização - Oportunidade de extração de CSS crítico ### 6. Cache e Entrega - Headers de cache presentes e corretos? - Utilização de CDN? - Compressão (gzip/brotli) habilitada? ## Formato de Saída ### Resumo Rápido (para o cliente/stakeholder) 3-4 frases: estado atual, maiores problemas, melhoria esperada. ### Roadmap de Otimização | Prioridade | Problema | Impacto | Esforço | Como Corrigir | |------------|----------|---------|---------|---------------| | 1 | ... | Alto | Baixo | ${passos_específicos} | | 2 | ... | ... | ... | ... | ### Melhoria de Pontuação Esperada | Métrica | Atual | Após Vitórias Rápidas | Após Otimização Completa | |---------|-------|----------------------|--------------------------| | Performance | ... | ... | ... | | LCP | ... | ... | ... | | CLS | ... | ... | ... | ### Snippets de Implementação Para os 5 principais ajustes, forneça código ou configuração pronta para copiar e colar.