Lance um site 95+ PageSpeed em menos de 24h com o Claude Code

Crie-me uma app React + TypeScript com Vite, Express no backend,

routing simples, páginas estáticas, gestão de conteúdo em markdown,

base PostgreSQL, Tailwind CSS para estilo, e hosting no Railway.

Em alguns segundos, eu tinha:

- todos os arquivos bem organizados

- uma base backend funcional

- um frontend responsivo estilizado com Tailwind

- os scripts de deployment prontos

E acima de tudo: zero fricção. Onde eu costumava passar horas configurando o ambiente, Claude me impulsionou para a criação real do projeto desde os primeiros minutos.

Um Stack Escolhido pela Necessidade

Não "escolhi um stack". Parti das minhas restrições.

Claude propôs a melhor combinação técnica para respondê-las.

Aqui está o que mantivemos:

- Frontend: React 18, Vite, Tailwind CSS, Wouter, MDX

- Backend: Express.js com PostgreSQL, Drizzle ORM

- Infraestrutura: Railway para fullstack, Cloudflare para velocidade e cache

- Analytics: Umami (leve, sem cookies, GDPR friendly)

Sem extras. Sem framework superdimensionado.

Apenas o necessário.

O Que Claude Realmente Trouxe

Não é "apenas IA que codifica".

Claude:

- preparou componentes UI (cards, modals, botões) com acessibilidade

- gerou o banco de dados, modelos, CRUDs

- configurou o SEO (helmet, sitemap, JSON-LD, robots.txt)

- otimizou o LCP (hero image em WebP, preload, lazy loading)

- limpou os imports, reduziu o JS inicial, evitou rerenders desnecessários

E tudo isso enquanto eu continuava iterando no conteúdo, UX ou animações.

Como Alcançar 95+ PageSpeed?

1. Code Splitting Agressivo

Antes (bundle monolítico):

// Tudo carregado de uma vez = 450KB JavaScript

Depois (lazy loading):

// Carregamento sob demanda = 85KB inicial

const Home = lazy(() => import('./pages/Home'));

const About = lazy(() => import('./pages/About'));

Impacto: LCP reduzido de 2.8s para 1.1s.

2. Imagens Otimizadas

src="/hero.webp"

loading="lazy"

decoding="async"

width="800"

height="600"

/>

Todas as imagens convertidas para WebP (economia de 60% vs PNG/JPEG).

3. CSS Purgado com Tailwind

// tailwind.config.js

export default {

content: ['./client/*/.{ts,tsx}'],

// Resultado: 8KB CSS vs 3.5MB em dev

}

Antes: 450KB de CSS

Depois: 8KB de CSS (94% de redução)

4. Sem Scripts de Terceiros Bloqueantes

Umami Analytics:

- Nunca bloqueia o rendering

- Pesa 2KB (vs 45KB do Google Analytics)

- Sem cookies = sem banner GDPR

Railway + Cloudflare: O Combo Vencedor

Por Que Railway?

# Deployment em 2 minutos cronometrados

$ git push origin main

# Railway detecta automaticamente tudo

O que amo no Railway:

- ✅ Deployment Git automático (push to deploy)

- ✅ PostgreSQL incluído

- ✅ Logs em tempo real super limpos

- ✅ Escalonamento horizontal automático

- ✅ $5/mês para começar

Cloudflare: A Camada de Velocidade

Railway hospeda o app, mas Cloudflare cacheia tudo:

1. Setup DNS: Apontar o domínio para Railway via Cloudflare

2. Page Rules: Cache everything para os assets

3. Auto Minify: HTML, CSS, JS automaticamente minificados

4. Brotli Compression: Ativado por padrão

5. HTTP/3: Latência reduzida em 30%

Resultado: 180ms TTFB da França.

Sem Cloudflare: 850ms TTFB

Com Cloudflare: 180ms TTFB (-78%)

E os Resultados?

Performance

- PageSpeed Desktop: 98/100

- PageSpeed Mobile: 95/100

- LCP: 1.1s (✅ Good < 2.5s)

- INP: 45ms (✅ Good < 200ms)

- CLS: 0.02 (✅ Good < 0.1)

- FCP: 0.8s (✅ Good < 1.8s)

- TTFB: 180ms (✅ Good < 600ms)

Tamanho do Bundle

- JS gzipped: 85KB

- CSS purgado: 8KB

- Build time: 12s

Custo Mensal

- Railway + domínio + Cloudflare: ~$10/mês

Para comparação:

- Next.js starter: ~250KB

- Gatsby starter: ~180KB

- Meu site: 93KB carga inicial

O Que Mais Gostei

A sensação de controle.

Sem dívida técnica.

Sem plugins que quebram.

Sem dependência de um stack obscuro.

Tudo é modificável. Tudo é compreensível.

E posso continuar iterando sozinho.

A capacidade de enviar screenshots e modificar rapidamente.

O multi-terminal é super eficiente (tinha 3 abertos em paralelo) para trabalhar simultaneamente em diferentes partes do projeto.

As Limitações

- Claude Code usa rapidamente seus créditos (tive que passar para a API paga para não ficar bloqueado)

- Você precisa estruturar seus prompts com precisão. Caso contrário, as respostas podem ser vagas ou inúteis.

O Que Aprendi

1. Menos JavaScript = Mais Performance

Resisti à tentação de adicionar:

- ❌ Framer Motion (animações pesadas)

- ❌ Moment.js (98KB para datas!)

- ❌ Lodash inteiro

Alternativas leves:

- ✅ Animações CSS nativas

- ✅ date-fns (2KB) ao invés de Moment

- ✅ Vanilla JS para utilities

2. Railway > Vercel para Full-Stack

| Feature | Railway | Vercel |

|---------|---------|--------|

| PostgreSQL incluído | ✅ | ❌ |

| WebSockets | ✅ | ❌ |

| Preço /mês | $5 | $20+ |

| Deploy time | 2min | 1min |

3. Cloudflare é Gratuito e Poderoso

Funcionalidades gratuitas:

- CDN global ilimitado

- Proteção DDoS

- SSL auto

- Analytics básico

- Cache API responses

ROI: $0/mês por performance equivalente a um CDN de $50/mês.

4. Claude Code = Multiplicador de Força

O que me teria levado 3-4 dias sozinho, feito em 23h com Claude Code.

O segredo: ser preciso nos prompts.

❌ Prompt ruim: "Crie um botão"

✅ Bom prompt: "Crie um componente Button com TypeScript, variants (primary, secondary, ghost), sizes (sm, md, lg), loading state, disabled state, e acessibilidade completa (ARIA)"

Stack Técnico Completo

{

"frontend": {

"framework": "React 18",

"bundler": "Vite 5",

"language": "TypeScript",

"styling": "Tailwind CSS 4",

"routing": "Wouter (1.6KB)",

"content": "MDX"

},

"backend": {

"runtime": "Node.js 22",

"framework": "Express.js",

"database": "PostgreSQL",

"orm": "Drizzle ORM"

},

"infrastructure": {

"hosting": "Railway",

"cdn": "Cloudflare",

"analytics": "Umami"

}

}