Lancer un site 95+ PageSpeed en moins de 24h avec Claude Code

Crée-moi une app React + TypeScript avec Vite, Express en backend,

routing simple, pages statiques, gestion de contenu en markdown,

base PostgreSQL, Tailwind CSS pour le style, et hébergement sur Railway.

En quelques secondes, j'avais :

- tous les fichiers bien organisés

- une base backend fonctionnelle

- un frontend responsive stylé avec Tailwind

- les scripts de déploiement prêts

Et surtout : zéro friction. Là où je passais habituellement des heures à configurer l'environnement, Claude m'a propulsé dans la création réelle du projet dès les premières minutes.

Une stack choisie par le besoin

Je n'ai pas « choisi une stack ». Je suis parti de mes contraintes.

Claude a proposé la meilleure combinaison technique pour y répondre.

Voici ce qu'on a retenu :

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

- Backend : Express.js avec PostgreSQL, Drizzle ORM

- Infra : Railway pour le fullstack, Cloudflare pour la rapidité et le cache

- Analytics : Umami (léger, sans cookies, RGPD friendly)

Pas d'extra. Pas de framework surdimensionné.

Juste ce qu'il faut.

Ce que Claude a réellement apporté

Ce n'est pas "juste de l'IA qui code".

Claude a :

- préparé les composants UI (cards, modals, boutons) avec accessibilité

- généré la base de données, les modèles, les CRUD

- configuré le SEO (helmet, sitemap, JSON-LD, robots.txt)

- optimisé le LCP (hero image en WebP, preload, lazy loading)

- nettoyé les imports, réduit le JS initial, évité les rerenders inutiles

Et tout ça, pendant que je continuais à itérer sur le contenu, l'UX ou les animations.

Comment atteindre 95+ PageSpeed ?

1. Code Splitting Agressif

Avant (bundle monolithique) :

// Tout chargé d'un coup = 450KB JavaScript

Après (lazy loading) :

// Chargement à la demande = 85KB initial

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

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

Impact : LCP réduit de 2.8s à 1.1s.

2. Images Optimisées

src="/hero.webp"

loading="lazy"

decoding="async"

width="800"

height="600"

/>

Toutes les images converties en WebP (économie de 60% vs PNG/JPEG).

3. CSS Purgé avec Tailwind

// tailwind.config.js

export default {

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

// Résultat : 8KB CSS vs 3.5MB en dev

}

Avant : 450KB de CSS

Après : 8KB de CSS (94% de réduction)

4. Pas de Scripts Tiers Bloquants

Umami Analytics :

- Ne bloque jamais le rendering

- Pèse 2KB (vs 45KB pour Google Analytics)

- Pas de cookies = pas de banner RGPD

Railway + Cloudflare : Le Combo Gagnant

Pourquoi Railway ?

# Déploiement en 2 minutes chrono

$ git push origin main

# Railway détecte automatiquement tout

Ce que j'adore chez Railway :

- ✅ Déploiement Git automatique (push to deploy)

- ✅ PostgreSQL inclus

- ✅ Logs en temps réel super clean

- ✅ Scale horizontal automatique

- ✅ $5/mois pour démarrer

Cloudflare : La Couche de Vitesse

Railway héberge l'app, mais Cloudflare met tout en cache :

1. Setup DNS : Pointer le domaine vers Railway via Cloudflare

2. Page Rules : Cache everything pour les assets

3. Auto Minify : HTML, CSS, JS automatiquement minifiés

4. Brotli Compression : Activé par défaut

5. HTTP/3 : Latence réduite de 30%

Résultat : TTFB de 180ms depuis la France.

Sans Cloudflare : 850ms TTFB

Avec Cloudflare : 180ms TTFB (-78%)

Et les résultats ?

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

- CSS purgé : 8KB

- Build time : 12s

Coût mensuel

- Railway + domaine + Cloudflare : ~10€/mois

Pour comparaison :

- Next.js starter : ~250KB

- Gatsby starter : ~180KB

- Mon site : 93KB initial load

Ce que j'ai préféré

Le sentiment de contrôle.

Pas de dette technique.

Pas de plugin qui pète.

Pas de dépendance à une stack obscure.

Tout est modifiable. Tout est compréhensible.

Et je peux continuer à itérer seul.

Le fait d'envoyer des screens et de modifier rapidement.

Le multi-terminal est ultra-efficace (j'en avais 3 ouverts en parallèle) pour travailler simultanément sur différentes parties du projet.

Les limites

- Claude Code utilise rapidement ses crédits (j'ai dû passer par l'API payante pour ne pas être bloqué)

- Il faut structurer ses prompts avec précision. Sinon, les réponses peuvent être vagues ou inutiles.

Ce que j'ai appris

1. Moins de JavaScript = Plus de Performance

J'ai résisté à la tentation d'ajouter :

- ❌ Framer Motion (animations lourdes)

- ❌ Moment.js (98KB pour des dates !)

- ❌ Lodash entier

Alternatives légères :

- ✅ CSS animations natives

- ✅ date-fns (2KB) au lieu de Moment

- ✅ Vanilla JS pour les utilities

2. Railway > Vercel pour Full-Stack

| Feature | Railway | Vercel |

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

| PostgreSQL inclus | ✅ | ❌ |

| WebSockets | ✅ | ❌ |

| Prix /mois | $5 | $20+ |

| Deploy time | 2min | 1min |

3. Cloudflare est Gratuit et Puissant

Fonctionnalités gratuites :

- CDN global illimité

- DDoS protection

- SSL auto

- Analytics basique

- Cache API responses

ROI : $0/mois pour des perfs équivalentes à un CDN à $50/mois.

4. Claude Code = Force Multiplier

Ce qui m'aurait pris 3-4 jours seul, fait en 23h avec Claude Code.

Le secret : être précis dans les prompts.

❌ Mauvais prompt : "Crée un bouton"

✅ Bon prompt : "Crée un Button component avec TypeScript, variants (primary, secondary, ghost), sizes (sm, md, lg), loading state, disabled state, et full accessibility (ARIA)"

Stack Technique Complète

{

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

}

}