Auditoria de qualidade web
Revisão abrangente de qualidade baseada em auditorias do Google Lighthouse. Cobre Performance, Acessibilidade, SEO e Melhores Práticas em mais de 150 verificações.
Como funciona
- Analisar o código/projeto fornecido em busca de problemas de qualidade
- Categorizar descobertas por severidade (Crítica, Alta, Média, Baixa)
- Fornecer recomendações específicas e acionáveis
- Incluir exemplos de código para correções
Categorias de auditoria
Performance (40% dos problemas típicos)
Core Web Vitals — Devem passar para boa experiência de página:
- LCP (Largest Contentful Paint) < 2.5s. O maior elemento visível deve renderizar rapidamente. Otimize imagens, fontes e tempo de resposta do servidor.
- INP (Interaction to Next Paint) < 200ms. Interações do usuário devem parecer instantâneas. Reduza o tempo de execução do JavaScript e divida tarefas longas.
- CLS (Cumulative Layout Shift) < 0.1. Conteúdo não deve se mover. Defina dimensões explícitas em imagens, embeds e anúncios.
Otimização de recursos:
- Comprimir imagens. Use WebP/AVIF com fallbacks. Distribua imagens redimensionadas corretamente via
srcset.
- Minimizar JavaScript. Remova código não utilizado. Use code splitting. Adia scripts não críticos.
- Otimizar CSS. Extraia CSS crítico. Remova estilos não utilizados. Evite
@import.
- Fontes eficientes. Use
font-display: swap. Precarregue fontes críticas. Reduza a subconjuntos de caracteres necessários.
Estratégia de carregamento:
- Pré-conectar a origens. Adicione
<link rel="preconnect"> para domínios de terceiros.
- Pré-carregar assets críticos. Imagens LCP, fontes e CSS acima da dobra.
- Carregamento lazy para conteúdo abaixo da dobra. Imagens, iframes e componentes pesados.
- Cache eficaz. TTLs de cache longa para assets estáticos. Caching imutável para arquivos com hash.
Acessibilidade (30% dos problemas típicos)
Perceptível:
- Alternativas de texto. Toda
<img> tem alt text significativo. Imagens decorativas usam alt="".
- Contraste de cor. Mínimo 4.5:1 para texto normal, 3:1 para texto grande (WCAG AA).
- Não dependa apenas de cor. Use ícones, padrões ou texto junto com indicadores de cor.
- Legendas e transcrições. Vídeos têm legendas. Áudio tem transcrições.
Operável:
- Acessível por teclado. Toda funcionalidade disponível via teclado. Sem armadilhas de teclado.
- Foco visível. Indicadores de foco claros em todos os elementos interativos.
- Links de salto. Forneça "Pular para conteúdo principal" para usuários de teclado.
- Tempo suficiente. Usuários podem estender limites de tempo. Sem conteúdo avançando automaticamente sem controles.
Compreensível:
- Idioma da página. Defina atributo
lang em <html>.
- Navegação consistente. Mesma estrutura de navegação entre páginas.
- Identificação de erro. Erros de formulário descritos claramente e associados a campos.
- Labels e instruções. Todos os inputs de formulário têm labels associadas.
Robusto:
- HTML válido. Sem IDs duplicados. Elementos adequadamente aninhados.
- ARIA utilizado corretamente. Prefira elementos nativos. Roles ARIA correspondem ao comportamento.
- Nome, role, valor. Elementos interativos têm nomes acessíveis e roles corretos.
SEO (15% dos problemas típicos)
Rastreabilidade:
- robots.txt válido. Não bloqueia recursos importantes.
- Sitemap XML. Lista todas as páginas importantes. Submetido ao Search Console.
- URLs canônicas. Previna problemas de conteúdo duplicado.
- Sem noindex em páginas importantes. Verifique meta robots e headers.
SEO On-Page:
- Title tags únicos. 50-60 caracteres. Palavra-chave primária incluída.
- Meta descriptions. 150-160 caracteres. Atrativas e únicas.
- Hierarquia de headings. Um único
<h1>. Estrutura lógica de headings.
- Texto de link descritivo. Não "clique aqui" ou "leia mais".
SEO técnico:
- Mobile-friendly. Design responsivo. Alvos de toque ≥ 48px.
- HTTPS. Conexão segura obrigatória.
- Carregamento rápido. Performance impacta classificação diretamente.
- Dados estruturados. JSON-LD para rich snippets (Article, Product, FAQ, etc.).
Melhores práticas (15% dos problemas típicos)
Segurança:
- HTTPS em todo lugar. Sem conteúdo misto. HSTS ativado.
- Sem bibliotecas vulneráveis. Mantenha dependências atualizadas.
- Headers CSP. Content Security Policy para prevenir XSS.
- Source maps não expostos. Em builds de produção.
Padrões modernos:
- Sem APIs deprecadas. Substitua
document.write, XHR síncrono, etc.
- Doctype válido. Use
<!DOCTYPE html>.
- Charset declarado.
<meta charset="UTF-8"> como primeiro elemento em <head>.
- Sem erros do navegador. Console limpo. Sem problemas CORS.
Padrões UX:
- Sem interstitiais intrusivos. Especialmente em mobile.
- Requisições de permissão claras. Peça apenas quando necessário, com contexto.
- Sem botões enganosos. Botões fazem o que dizem.
Níveis de severidade
| Nível |
Descrição |
Ação |
| Crítica |
Vulnerabilidades de segurança, falhas completas |
Corrigir imediatamente |
| Alta |
Falhas de Core Web Vitals, barreiras de a11y maiores |
Corrigir antes do lançamento |
| Média |
Oportunidades de performance, melhorias SEO |
Corrigir dentro da sprint |
| Baixa |
Otimizações menores, qualidade de código |
Corrigir quando conveniente |
Formato de saída da auditoria
Ao executar uma auditoria, estruture as descobertas assim:
## Resultados da auditoria
### Problemas críticos (X encontrados)
- **[Categoria]** Descrição do problema. Arquivo: `path/to/file.js:123`
- **Impacto:** Por que isso importa
- **Correção:** Mudança de código específica ou recomendação
### Alta prioridade (X encontrados)
...
### Resumo
- Performance: X problemas (Y críticos)
- Acessibilidade: X problemas (Y críticos)
- SEO: X problemas
- Melhores Práticas: X problemas
### Prioridade recomendada
1. Corrigir isso primeiro porque...
2. Depois abordar...
3. Finalmente otimizar...
Checklist rápido
Antes de cada deploy
Revisão semanal
Deep dive mensal
Referências
Para diretrizes detalhadas em áreas específicas:
1---2name: web-quality-audit3description: Auditoria abrangente de qualidade web cobrindo performance, acessibilidade, SEO e melhores práticas. Use quando solicitado para "auditar meu site", "revisar qualidade web", "executar auditoria lighthouse", "verificar qualidade de página" ou "otimizar meu website".4license: MIT5---67# Auditoria de qualidade web89Revisão abrangente de qualidade baseada em auditorias do Google Lighthouse. Cobre Performance, Acessibilidade, SEO e Melhores Práticas em mais de 150 verificações.1011## Como funciona12131. Analisar o código/projeto fornecido em busca de problemas de qualidade142. Categorizar descobertas por severidade (Crítica, Alta, Média, Baixa)153. Fornecer recomendações específicas e acionáveis164. Incluir exemplos de código para correções1718## Categorias de auditoria1920### Performance (40% dos problemas típicos)2122**Core Web Vitals** — Devem passar para boa experiência de página:23* **LCP (Largest Contentful Paint) < 2.5s.** O maior elemento visível deve renderizar rapidamente. Otimize imagens, fontes e tempo de resposta do servidor.24* **INP (Interaction to Next Paint) < 200ms.** Interações do usuário devem parecer instantâneas. Reduza o tempo de execução do JavaScript e divida tarefas longas.25* **CLS (Cumulative Layout Shift) < 0.1.** Conteúdo não deve se mover. Defina dimensões explícitas em imagens, embeds e anúncios.2627**Otimização de recursos:**28* **Comprimir imagens.** Use WebP/AVIF com fallbacks. Distribua imagens redimensionadas corretamente via `srcset`.29* **Minimizar JavaScript.** Remova código não utilizado. Use code splitting. Adia scripts não críticos.30* **Otimizar CSS.** Extraia CSS crítico. Remova estilos não utilizados. Evite `@import`.31* **Fontes eficientes.** Use `font-display: swap`. Precarregue fontes críticas. Reduza a subconjuntos de caracteres necessários.3233**Estratégia de carregamento:**34* **Pré-conectar a origens.** Adicione `<link rel="preconnect">` para domínios de terceiros.35* **Pré-carregar assets críticos.** Imagens LCP, fontes e CSS acima da dobra.36* **Carregamento lazy para conteúdo abaixo da dobra.** Imagens, iframes e componentes pesados.37* **Cache eficaz.** TTLs de cache longa para assets estáticos. Caching imutável para arquivos com hash.3839### Acessibilidade (30% dos problemas típicos)4041**Perceptível:**42* **Alternativas de texto.** Toda `<img>` tem `alt` text significativo. Imagens decorativas usam `alt=""`.43* **Contraste de cor.** Mínimo 4.5:1 para texto normal, 3:1 para texto grande (WCAG AA).44* **Não dependa apenas de cor.** Use ícones, padrões ou texto junto com indicadores de cor.45* **Legendas e transcrições.** Vídeos têm legendas. Áudio tem transcrições.4647**Operável:**48* **Acessível por teclado.** Toda funcionalidade disponível via teclado. Sem armadilhas de teclado.49* **Foco visível.** Indicadores de foco claros em todos os elementos interativos.50* **Links de salto.** Forneça "Pular para conteúdo principal" para usuários de teclado.51* **Tempo suficiente.** Usuários podem estender limites de tempo. Sem conteúdo avançando automaticamente sem controles.5253**Compreensível:**54* **Idioma da página.** Defina atributo `lang` em `<html>`.55* **Navegação consistente.** Mesma estrutura de navegação entre páginas.56* **Identificação de erro.** Erros de formulário descritos claramente e associados a campos.57* **Labels e instruções.** Todos os inputs de formulário têm labels associadas.5859**Robusto:**60* **HTML válido.** Sem IDs duplicados. Elementos adequadamente aninhados.61* **ARIA utilizado corretamente.** Prefira elementos nativos. Roles ARIA correspondem ao comportamento.62* **Nome, role, valor.** Elementos interativos têm nomes acessíveis e roles corretos.6364### SEO (15% dos problemas típicos)6566**Rastreabilidade:**67* **robots.txt válido.** Não bloqueia recursos importantes.68* **Sitemap XML.** Lista todas as páginas importantes. Submetido ao Search Console.69* **URLs canônicas.** Previna problemas de conteúdo duplicado.70* **Sem noindex em páginas importantes.** Verifique meta robots e headers.7172**SEO On-Page:**73* **Title tags únicos.** 50-60 caracteres. Palavra-chave primária incluída.74* **Meta descriptions.** 150-160 caracteres. Atrativas e únicas.75* **Hierarquia de headings.** Um único `<h1>`. Estrutura lógica de headings.76* **Texto de link descritivo.** Não "clique aqui" ou "leia mais".7778**SEO técnico:**79* **Mobile-friendly.** Design responsivo. Alvos de toque ≥ 48px.80* **HTTPS.** Conexão segura obrigatória.81* **Carregamento rápido.** Performance impacta classificação diretamente.82* **Dados estruturados.** JSON-LD para rich snippets (Article, Product, FAQ, etc.).8384### Melhores práticas (15% dos problemas típicos)8586**Segurança:**87* **HTTPS em todo lugar.** Sem conteúdo misto. HSTS ativado.88* **Sem bibliotecas vulneráveis.** Mantenha dependências atualizadas.89* **Headers CSP.** Content Security Policy para prevenir XSS.90* **Source maps não expostos.** Em builds de produção.9192**Padrões modernos:**93* **Sem APIs deprecadas.** Substitua `document.write`, XHR síncrono, etc.94* **Doctype válido.** Use `<!DOCTYPE html>`.95* **Charset declarado.** `<meta charset="UTF-8">` como primeiro elemento em `<head>`.96* **Sem erros do navegador.** Console limpo. Sem problemas CORS.9798**Padrões UX:**99* **Sem interstitiais intrusivos.** Especialmente em mobile.100* **Requisições de permissão claras.** Peça apenas quando necessário, com contexto.101* **Sem botões enganosos.** Botões fazem o que dizem.102103## Níveis de severidade104105| Nível | Descrição | Ação |106|-------|-----------|------|107| **Crítica** | Vulnerabilidades de segurança, falhas completas | Corrigir imediatamente |108| **Alta** | Falhas de Core Web Vitals, barreiras de a11y maiores | Corrigir antes do lançamento |109| **Média** | Oportunidades de performance, melhorias SEO | Corrigir dentro da sprint |110| **Baixa** | Otimizações menores, qualidade de código | Corrigir quando conveniente |111112## Formato de saída da auditoria113114Ao executar uma auditoria, estruture as descobertas assim:115116```markdown117## Resultados da auditoria118119### Problemas críticos (X encontrados)120- **[Categoria]** Descrição do problema. Arquivo: `path/to/file.js:123`121 - **Impacto:** Por que isso importa122 - **Correção:** Mudança de código específica ou recomendação123124### Alta prioridade (X encontrados)125...126127### Resumo128- Performance: X problemas (Y críticos)129- Acessibilidade: X problemas (Y críticos)130- SEO: X problemas131- Melhores Práticas: X problemas132133### Prioridade recomendada1341. Corrigir isso primeiro porque...1352. Depois abordar...1363. Finalmente otimizar...137```138139## Checklist rápido140141### Antes de cada deploy142- [ ] Core Web Vitals passando143- [ ] Sem erros de acessibilidade (axe/Lighthouse)144- [ ] Sem erros no console145- [ ] HTTPS funcionando146- [ ] Meta tags presentes147148### Revisão semanal149- [ ] Verificar Search Console para problemas150- [ ] Revisar tendências de Core Web Vitals151- [ ] Atualizar dependências152- [ ] Testar com leitor de tela153154### Deep dive mensal155- [ ] Auditoria completa do Lighthouse156- [ ] Profiling de performance157- [ ] Auditoria de acessibilidade com usuários reais158- [ ] Revisão de palavras-chave SEO159160## Referências161162Para diretrizes detalhadas em áreas específicas:163- [Performance Optimization](../performance/SKILL.md)164- [Core Web Vitals](../core-web-vitals/SKILL.md)165- [Accessibility](../accessibility/SKILL.md)166- [SEO](../seo/SKILL.md)167- [Best Practices](../best-practices/SKILL.md)
artubss