Recursos

PageSpeed 95+ e SEO 100

Checklist completo de performance, SEO e qualidade + um prompt universal para otimizar qualquer site.

Para qualquer stack

Funciona em qualquer projeto: Next.js, React, Vue, Svelte, Astro, WordPress, Webflow exportado, HTML/CSS puro, PHP, Django, Rails. Use o checklist para conferir e o prompt para pedir as otimizações à sua IA.

Checklist de Performance, SEO e Qualidade

Imagens

  • Todas as imagens raster (PNG/JPG) convertidas para WebP
  • Imagens originais (PNG/JPG) removidas do projeto
  • Todas as referências no código apontam para .webp
  • Imagem do hero (acima do fold) NÃO tem loading lazy
  • Imagens abaixo do fold têm loading lazy
  • Imagem crítica do hero tem fetchpriority high
  • Existe uma OG image de exatamente 1200x630px

Fontes

  • Todas as fontes têm font-display: swap
  • No máximo 2 famílias tipográficas no projeto
  • Fontes em woff2 quando possível (não ttf/otf)

Animações e Scripts

  • Animações em loop infinito estão em CSS @keyframes, não em JS
  • Bibliotecas de animação só quando há interação ou scroll
  • Scripts de terceiros têm async ou defer
  • Nenhum script bloqueia a renderização inicial

HTML — Acessibilidade e Estrutura

  • html lang definido com o idioma correto
  • Imagens decorativas com alt vazio e aria-hidden true
  • Imagens de conteúdo com alt descritivo real
  • Contraste de texto mínimo 4.5:1 (WCAG AA)
  • Botões e links com texto ou aria-label descritivo
  • Headings hierárquicos (H1 → H2 → H3, sem pular níveis)

SEO — Meta Tags

  • title descritivo com até 60 caracteres
  • meta description entre 120 e 160 caracteres
  • link canonical com URL absoluta
  • meta robots index, follow
  • meta author preenchido

SEO — Open Graph e Twitter

  • og:type, og:url, og:title, og:description
  • og:image com URL absoluta (1200x630) e og:image:alt
  • og:site_name e og:locale
  • twitter:card summary_large_image
  • twitter:title, twitter:description, twitter:image

SEO — Dados Estruturados e Favicons

  • JSON-LD Schema.org no head com o tipo correto
  • favicon.ico (16/32/48) + favicon-32x32 e 16x16
  • apple-touch-icon 180x180
  • meta theme-color na cor principal

Segurança e Best Practices

  • Todos os target blank com rel noopener noreferrer
  • Site servido em HTTPS
  • Nenhum erro no console do browser
  • Nenhuma biblioteca com vulnerabilidade conhecida

Prompt Universal de Otimização

Cole na sua IA (Claude, ChatGPT, Cursor, Copilot) no início ou fim do desenvolvimento. Substitua os valores entre [colchetes] pelos do seu projeto.

Quero que este projeto alcance nota 95+ em Performance e 100 em SEO no Google PageSpeed Insights e no Lighthouse. Aplique todas as otimizações abaixo, adaptando os comandos e ferramentas à stack do projeto atual (identifique sozinho o framework e a linguagem).

1. IMAGENS - converta para WebP
- Encontre todas as imagens PNG e JPG no projeto.
- Converta cada uma para WebP com qualidade 85.
- Use a ferramenta apropriada para o ambiente (Node: sharp/imagemin-webp; Python: Pillow; PHP: Imagick/GD; CLI: cwebp -q 85).
- Atualize TODAS as referências no código (.png/.jpg -> .webp).
- Delete os arquivos originais após confirmar a conversão.
- Reporte o ganho de tamanho de cada arquivo.

2. IMAGENS - lazy loading e prioridade
- Adicione loading="lazy" em todas as imagens abaixo do primeiro scroll.
- NÃO use loading="lazy" em imagens do hero ou acima do fold.
- Adicione fetchpriority="high" na imagem mais importante do hero.
- Adicione width e height explícitos em toda imagem para evitar layout shift (CLS).

3. IMAGEM DE COMPARTILHAMENTO (Open Graph)
- Gere uma imagem de exatamente 1200x630 pixels.
- Salve como og-image.webp na raiz pública do projeto.

4. FONTES
- Em toda regra @font-face, adicione font-display: swap.
- Se possível, converta fontes .ttf/.otf para .woff2.
- Carregue no máximo 2 famílias e os pesos realmente usados.

5. CSS
- Use overflow-x: clip (não hidden) em html e body.
- Animações em loop infinito devem ser em @keyframes CSS puro, nunca em JavaScript.
- Use will-change: transform apenas em elementos que serão animados.

6. JAVASCRIPT
- Bibliotecas de animação só para animações que respondem a scroll ou interação.
- Scripts de terceiros com async ou defer.
- Remova bibliotecas não utilizadas do bundle final.

7. HTML - atributos obrigatórios
- html lang correto do site.
- Imagens decorativas: alt vazio e aria-hidden true. Imagens de conteúdo: alt real.
- Todos os links target blank com rel noopener noreferrer.
- Hierarquia de headings sem pular níveis.

8. HEAD - implemente o bloco completo (title, description, author, robots, canonical, Open Graph, Twitter Card, favicons, theme-color e JSON-LD Schema.org). Substitua os valores entre [colchetes] pelos do projeto.

9. FAVICONS - gere a partir de um PNG quadrado (mínimo 512x512): favicon-16x16, favicon-32x32, apple-touch-icon 180x180 e favicon.ico (16/32/48).

10. ENTREGA FINAL - rode o build de produção e entregue: arquivos adicionados, modificados e removidos; comparativo de tamanho antes/depois das imagens; e confirmação de cada item do checklist.