Build a 95+ PageSpeed Site in Under 24h with Claude Code

Create me a React + TypeScript app with Vite, Express backend,

simple routing, static pages, markdown content management,

PostgreSQL database, Tailwind CSS for styling, and hosting on Railway.

In a few seconds, I had:

- all files well organized

- a functional backend base

- a responsive frontend styled with Tailwind

- deployment scripts ready

And above all: zero friction. Where I usually spent hours configuring the environment, Claude propelled me into the actual project creation from the first minutes.

A Stack Chosen by Need

I didn't "choose a stack". I started from my constraints.

Claude proposed the best technical combination to address them.

Here's what we kept:

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

- Backend: Express.js with PostgreSQL, Drizzle ORM

- Infrastructure: Railway for fullstack, Cloudflare for speed and cache

- Analytics: Umami (lightweight, no cookies, GDPR friendly)

No extras. No oversized framework.

Just what's needed.

What Claude Actually Brought

It's not "just AI that codes".

Claude:

- prepared UI components (cards, modals, buttons) with accessibility

- generated the database, models, CRUDs

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

- optimized LCP (hero image in WebP, preload, lazy loading)

- cleaned imports, reduced initial JS, avoided unnecessary rerenders

And all that while I continued iterating on content, UX, or animations.

How to Reach 95+ PageSpeed?

1. Aggressive Code Splitting

Before (monolithic bundle):

// Everything loaded at once = 450KB JavaScript

After (lazy loading):

// On-demand loading = 85KB initial

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

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

Impact: LCP reduced from 2.8s to 1.1s.

2. Optimized Images

src="/hero.webp"

loading="lazy"

decoding="async"

width="800"

height="600"

/>

All images converted to WebP (60% savings vs PNG/JPEG).

3. Purged CSS with Tailwind

// tailwind.config.js

export default {

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

// Result: 8KB CSS vs 3.5MB in dev

}

Before: 450KB of CSS

After: 8KB of CSS (94% reduction)

4. No Blocking Third-Party Scripts

Umami Analytics:

- Never blocks rendering

- Weighs 2KB (vs 45KB for Google Analytics)

- No cookies = no GDPR banner

Railway + Cloudflare: The Winning Combo

Why Railway?

# Deployment in 2 minutes flat

$ git push origin main

# Railway automatically detects everything

What I love about Railway:

- ✅ Automatic Git deployment (push to deploy)

- ✅ PostgreSQL included

- ✅ Super clean real-time logs

- ✅ Automatic horizontal scaling

- ✅ $5/month to start

Cloudflare: The Speed Layer

Railway hosts the app, but Cloudflare caches everything:

1. DNS Setup: Point domain to Railway via Cloudflare

2. Page Rules: Cache everything for assets

3. Auto Minify: HTML, CSS, JS automatically minified

4. Brotli Compression: Enabled by default

5. HTTP/3: 30% reduced latency

Result: 180ms TTFB from France.

Without Cloudflare: 850ms TTFB

With Cloudflare: 180ms TTFB (-78%)

And the Results?

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)

Bundle Size

- JS gzipped: 85KB

- Purged CSS: 8KB

- Build time: 12s

Monthly Cost

- Railway + domain + Cloudflare: ~$10/month

For comparison:

- Next.js starter: ~250KB

- Gatsby starter: ~180KB

- My site: 93KB initial load

What I Liked Most

The feeling of control.

No technical debt.

No breaking plugins.

No dependency on an obscure stack.

Everything is modifiable. Everything is understandable.

And I can continue iterating alone.

The ability to send screenshots and quickly modify.

The multi-terminal is super efficient (I had 3 open in parallel) to work simultaneously on different parts of the project.

The Limitations

- Claude Code quickly uses its credits (I had to switch to the paid API to not be blocked)

- You need to structure your prompts precisely. Otherwise, answers can be vague or useless.

What I Learned

1. Less JavaScript = More Performance

I resisted the temptation to add:

- ❌ Framer Motion (heavy animations)

- ❌ Moment.js (98KB for dates!)

- ❌ Entire Lodash

Lightweight alternatives:

- ✅ Native CSS animations

- ✅ date-fns (2KB) instead of Moment

- ✅ Vanilla JS for utilities

2. Railway > Vercel for Full-Stack

| Feature | Railway | Vercel |

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

| PostgreSQL included | ✅ | ❌ |

| WebSockets | ✅ | ❌ |

| Price /month | $5 | $20+ |

| Deploy time | 2min | 1min |

3. Cloudflare is Free and Powerful

Free features:

- Unlimited global CDN

- DDoS protection

- Auto SSL

- Basic analytics

- Cache API responses

ROI: $0/month for performance equivalent to a $50/month CDN.

4. Claude Code = Force Multiplier

What would have taken me 3-4 days alone, done in 23h with Claude Code.

The secret: be precise in prompts.

❌ Bad prompt: "Create a button"

✅ Good prompt: "Create a Button component with TypeScript, variants (primary, secondary, ghost), sizes (sm, md, lg), loading state, disabled state, and full accessibility (ARIA)"

Complete Technical Stack

{

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

}

}