PauloHFS Checklist Técnico de Pré-Lançamento — Frontend
Checklist de referência para validação antes de qualquer deploy de frontend para produção. Antes de considerar o lançamento aprovado, verifique cada item aplicável ao projeto. Item não verificado = corrigir ou documentar explicitamente por que não se aplica ao contexto.
1. Layout, Responsividade e Cross-Browser
Responsividade Fluid-Grid
- Testar breakpoints: 320px, 375px, 425px, 768px, 1024px, 1440px+
- Garantir ausência de scroll horizontal indesejado (
overflow-x: hidden) - Áreas de toque em mobile ≥ 48×48px por elemento interativo
Compatibilidade entre Motores de Renderização
- Validar execução em Blink (Chrome/Edge), Gecko (Firefox) e WebKit (Safari Desktop/iOS)
- Verificar prefixos de propriedades CSS legadas e polyfills quando aplicável
2. SEO On-Page e Metadados
Tags Críticas no <head>
-
<title>único por rota com no máximo 60 caracteres -
<meta name="description">única por rota (120–160 caracteres) -
<link rel="canonical" href="...">apontando para a URL preferencial -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Social Graph Tags
- Open Graph:
og:title,og:description,og:image,og:url,og:type - Twitter Cards:
twitter:card,twitter:title,twitter:description,twitter:image - Imagem OG dimensionada em 1200×630px servida via HTTPS
Hierarquia Semântica
- Apenas uma tag
<h1>por página - Estrutura correta de cabeçalhos (
<h2>,<h3>) sem saltos de nível - Uso de elementos HTML5 semânticos (
<main>,<nav>,<article>,<aside>,<footer>)
3. Desempenho e Assets
Otimização de Imagens
- Uso de formatos modernos (WebP/AVIF)
- Carregamento diferido (
loading="lazy") para elementos fora do viewport - Atributos
widtheheightexplícitos em tags<img>para evitar CLS
Métricas Core Web Vitals
- Largest Contentful Paint (LCP) < 2.5s
- Interaction to Next Paint (INP) < 200ms
- Cumulative Layout Shift (CLS) < 0.1
Minificação e Bundling
- Remoção de
console.log,debuggere comentários no build de produção - Minificação de CSS, JS e HTML
- Estratégia de Code Splitting para carregamento sob demanda de rotas secundárias
Favicons e PWA Assets
-
favicon.ico, PNGs (16×16, 32×32) eapple-touch-icon.png(180×180) - Ficheiro
site.webmanifestvalidado
4. Acessibilidade (a11y — WCAG 2.1 AA)
Contraste de Cores
- Rácio mínimo 4.5:1 para texto normal, 3:1 para texto grande/elementos de UI
Atributos ARIA e Alt Text
-
altpreenchido em imagens informativas (alt=""em decorativas) -
aria-expanded,aria-labeleroleem componentes dinâmicos customizados
Navegação por Teclado
- Indicador de foco visível (
:focus-visible) - Suporte a
Tab,EntereEscapeem modais e menus suspensos
5. Resiliência, Rastreamento e Formulários
Validação de Formulários Client-Side
- Feedback visual imediato e acessível para erros de validação
- Proteção contra duplo clique (double submit) no envio
- Links diretos para APIs externas (ex: WhatsApp via
https://wa.me/...) testados e comurlencode
Tratamento de Rotas Inexistentes
- Página 404 personalizada com atalho de retorno ao fluxo principal
Analytics, Rastreamento e Consentimento
- Injeção correta de tags de análise (Google Analytics / Tag Manager)
- Banner de consentimento de cookies (LGPD/GDPR) bloqueando scripts até a autorização