Lanza un sitio 95+ PageSpeed en menos de 24h con Claude Code

Créame una app React + TypeScript con Vite, Express en backend,

routing simple, páginas estáticas, gestión de contenido en markdown,

base PostgreSQL, Tailwind CSS para el estilo, y hosting en Railway.

En unos segundos, tenía:

- todos los archivos bien organizados

- una base backend funcional

- un frontend responsive estilizado con Tailwind

- los scripts de despliegue listos

Y sobre todo: cero fricción. Donde usualmente pasaba horas configurando el entorno, Claude me impulsó a la creación real del proyecto desde los primeros minutos.

Un Stack Elegido por la Necesidad

No "elegí un stack". Partí de mis restricciones.

Claude propuso la mejor combinación técnica para responderlas.

Esto es lo que conservamos:

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

- Backend: Express.js con PostgreSQL, Drizzle ORM

- Infraestructura: Railway para fullstack, Cloudflare para velocidad y caché

- Analytics: Umami (ligero, sin cookies, GDPR friendly)

Sin extras. Sin framework sobredimensionado.

Solo lo necesario.

Lo Que Claude Realmente Aportó

No es "solo IA que codifica".

Claude:

- preparó componentes UI (cards, modals, botones) con accesibilidad

- generó la base de datos, modelos, CRUDs

- configuró el SEO (helmet, sitemap, JSON-LD, robots.txt)

- optimizó el LCP (hero image en WebP, preload, lazy loading)

- limpió los imports, redujo el JS inicial, evitó rerenders innecesarios

Y todo eso mientras yo continuaba iterando en contenido, UX o animaciones.

¿Cómo Alcanzar 95+ PageSpeed?

1. Code Splitting Agresivo

Antes (bundle monolítico):

// Todo cargado de golpe = 450KB JavaScript

Después (lazy loading):

// Carga bajo demanda = 85KB inicial

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

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

Impacto: LCP reducido de 2.8s a 1.1s.

2. Imágenes Optimizadas

src="/hero.webp"

loading="lazy"

decoding="async"

width="800"

height="600"

/>

Todas las imágenes convertidas a WebP (ahorro del 60% vs PNG/JPEG).

3. CSS Purgado con Tailwind

// tailwind.config.js

export default {

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

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

}

Antes: 450KB de CSS

Después: 8KB de CSS (94% de reducción)

4. Sin Scripts de Terceros Bloqueantes

Umami Analytics:

- Nunca bloquea el rendering

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

- Sin cookies = sin banner GDPR

Railway + Cloudflare: El Combo Ganador

¿Por Qué Railway?

# Despliegue en 2 minutos cronometrados

$ git push origin main

# Railway detecta automáticamente todo

Lo que amo de Railway:

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

- ✅ PostgreSQL incluido

- ✅ Logs en tiempo real súper limpios

- ✅ Escalado horizontal automático

- ✅ $5/mes para empezar

Cloudflare: La Capa de Velocidad

Railway aloja la app, pero Cloudflare cachea todo:

1. Setup DNS: Apuntar el dominio a Railway vía Cloudflare

2. Page Rules: Cache everything para los assets

3. Auto Minify: HTML, CSS, JS automáticamente minificados

4. Brotli Compression: Activado por defecto

5. HTTP/3: Latencia reducida en 30%

Resultado: 180ms TTFB desde Francia.

Sin Cloudflare: 850ms TTFB

Con Cloudflare: 180ms TTFB (-78%)

¿Y los Resultados?

Rendimiento

- 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)

Tamaño del Bundle

- JS gzipped: 85KB

- CSS purgado: 8KB

- Build time: 12s

Costo Mensual

- Railway + dominio + Cloudflare: ~$10/mes

Para comparación:

- Next.js starter: ~250KB

- Gatsby starter: ~180KB

- Mi sitio: 93KB carga inicial

Lo Que Más Me Gustó

La sensación de control.

Sin deuda técnica.

Sin plugins que se rompen.

Sin dependencia de un stack oscuro.

Todo es modificable. Todo es comprensible.

Y puedo continuar iterando solo.

La capacidad de enviar capturas de pantalla y modificar rápidamente.

El multi-terminal es súper eficiente (tenía 3 abiertos en paralelo) para trabajar simultáneamente en diferentes partes del proyecto.

Las Limitaciones

- Claude Code usa rápidamente sus créditos (tuve que pasar a la API de pago para no quedarme bloqueado)

- Necesitas estructurar tus prompts con precisión. De lo contrario, las respuestas pueden ser vagas o inútiles.

Lo Que Aprendí

1. Menos JavaScript = Más Rendimiento

Resistí la tentación de agregar:

- ❌ Framer Motion (animaciones pesadas)

- ❌ Moment.js (¡98KB para fechas!)

- ❌ Lodash completo

Alternativas ligeras:

- ✅ Animaciones CSS nativas

- ✅ date-fns (2KB) en lugar de Moment

- ✅ Vanilla JS para utilities

2. Railway > Vercel para Full-Stack

| Feature | Railway | Vercel |

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

| PostgreSQL incluido | ✅ | ❌ |

| WebSockets | ✅ | ❌ |

| Precio /mes | $5 | $20+ |

| Deploy time | 2min | 1min |

3. Cloudflare es Gratuito y Poderoso

Funcionalidades gratuitas:

- CDN global ilimitado

- Protección DDoS

- SSL auto

- Analytics básico

- Cache API responses

ROI: $0/mes por rendimiento equivalente a un CDN de $50/mes.

4. Claude Code = Multiplicador de Fuerza

Lo que me hubiera tomado 3-4 días solo, hecho en 23h con Claude Code.

El secreto: ser preciso en los prompts.

❌ Mal prompt: "Crea un botón"

✅ Buen prompt: "Crea un componente Button con TypeScript, variants (primary, secondary, ghost), sizes (sm, md, lg), loading state, disabled state, y accesibilidad 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"

}

}