Optimisation des performances avec Claude Code : mesure et Core Web Vitals

Optimiser les performances ne consiste pas à rendre une application “un peu plus rapide” au hasard. Il s’agit de mesurer ce que l’utilisateur attend, ce qui bloque une interaction, ce qui déplace la mise en page et ce qui gaspille des ressources côté serveur, puis de réduire ces coûts avec des changements vérifiables.

Claude Code est utile parce qu’il peut lire le code, suivre des pistes de goulot d’étranglement, proposer des correctifs et écrire les étapes de vérification. La séquence reste essentielle : mesurer, formuler une hypothèse, modifier une seule chose, puis mesurer à nouveau.

Gardez les références officielles sous la main : web.dev Core Web Vitals, Lighthouse docs et MDN Performance API.

Définir La Vitesse

La performance web n’est pas un seul score. Le LCP, Largest Contentful Paint, mesure l’apparition du contenu principal. L’INP, Interaction to Next Paint, mesure la réactivité après un clic, un tap ou une frappe. Le CLS, Cumulative Layout Shift, mesure les déplacements inattendus de la page.

Dans une application, il faut aussi regarder la latence p75 des API, le nombre de requêtes base de données, la taille des bundles JavaScript, le poids des images et le travail synchrone sur le thread principal. La moyenne masque souvent les utilisateurs lents ; p75 décrit mieux l’expérience normale mais défavorable.

flowchart LR
  Measure["Mesurer"] --> Hypothesis["Émettre une hypothèse"]
  Hypothesis --> Patch["Modifier petit"]
  Patch --> Verify["Mesurer encore"]
  Verify --> Keep["Garder le prouvé"]

Métrique	Signification	Première cible
LCP	Contenu principal visible	2.5s ou moins
INP	Réactivité des interactions	200ms ou moins
CLS	Déplacement inattendu	0.1 ou moins
API p75	Latence ressentie par la majorité	À définir par écran
JS transféré	JavaScript chargé au départ	Comparer par route

Donner De Bons Éléments À Claude Code

Une demande efficace contient le symptôme, la reproduction, les mesures actuelles et les contraintes.

La page /products de ce dépôt est lente.
L'objectif est de réduire le LCP mobile et le p75 de /api/products.

Mesures actuelles:
- Lighthouse mobile Performance: 58
- LCP: 4.2s
- INP: 180ms
- CLS: 0.04
- /api/products p75: 920ms

Merci de:
1. Vérifier images, bundle, API et accès base de données.
2. Ne pas modifier le code sur simple intuition.
3. Prioriser les changements petits et mesurables.
4. Inclure les commandes de vérification.

Vous pouvez compléter avec le guide de débogage Claude Code, le guide React avec Claude Code et le guide d’optimisation des images.

Script De Mesure Exécutable

Avec Node.js 18 ou plus, ce script mesure une page ou une API et affiche moyenne et p75.

// measure-url.mjs
import { performance } from "node:perf_hooks";

const url = process.argv[2] ?? "https://example.com/";
const runs = Number(process.argv[3] ?? 5);

async function measureOnce() {
  const start = performance.now();
  const res = await fetch(url, { cache: "no-store" });
  await res.arrayBuffer();
  return {
    status: res.status,
    ms: performance.now() - start,
  };
}

const samples = [];
for (let i = 0; i < runs; i += 1) {
  samples.push(await measureOnce());
}

samples.sort((a, b) => a.ms - b.ms);
const avg = samples.reduce((sum, s) => sum + s.ms, 0) / samples.length;
const p75Index = Math.floor((samples.length - 1) * 0.75);
const p75 = samples[p75Index].ms;

console.table(
  samples.map((sample, index) => ({
    run: index + 1,
    status: sample.status,
    ms: sample.ms.toFixed(1),
  }))
);
console.log(`avg=${avg.toFixed(1)}ms p75=${p75.toFixed(1)}ms`);

node measure-url.mjs http://localhost:3000/api/products 7

Donnez cette sortie à Claude Code avant et après le correctif. Le débat devient une comparaison reproductible.

Cas D’usage Réalistes

Cas	Cause fréquente	Demande utile à Claude Code
Dashboard SaaS lent	Tous les widgets chargent au départ; grosse librairie de graphiques	Différer les widgets secondaires et séparer le code de graphiques
Liste e-commerce lente	Images trop lourdes et requêtes N+1 de stock ou avis	Corriger les tailles d’images et les include/select
Article média avec mauvais LCP	Image héro tardive et scripts publicitaires précoces	Prioriser l’image principale et différer les tiers
Recherche admin bloquée	Filtrage synchrone sur de gros tableaux	Réduire la complexité, paginer ou déplacer le travail

N+1 signifie qu’une liste est chargée une fois, puis qu’une requête supplémentaire part pour chaque ligne. Le cache réutilise un résultat pendant une courte durée, mais les données personnelles, prix sensibles, permissions et stocks exigent des clés et expirations claires.

Exemple De Cache Exécutable

Cet exemple Express compare une API volontairement lente avec une API mise en cache. En production on utilisera souvent Redis ou un CDN, mais la mémoire locale rend le mécanisme visible.

npm init -y
npm install express
node cached-api.mjs

// cached-api.mjs
import express from "express";
import { performance } from "node:perf_hooks";

const app = express();
const cache = new Map();
const ttlMs = 30_000;

async function loadProducts() {
  await new Promise((resolve) => setTimeout(resolve, 800));
  return [
    { id: 1, name: "Starter Plan", price: 1200 },
    { id: 2, name: "Pro Plan", price: 4800 },
  ];
}

async function cached(key, loader) {
  const now = Date.now();
  const hit = cache.get(key);
  if (hit && hit.expiresAt > now) return { data: hit.data, cache: "hit" };

  const data = await loader();
  cache.set(key, { data, expiresAt: now + ttlMs });
  return { data, cache: "miss" };
}

app.get("/api/products/raw", async (_req, res) => {
  const start = performance.now();
  const data = await loadProducts();
  res.json({ cache: "none", ms: performance.now() - start, data });
});

app.get("/api/products/cached", async (_req, res) => {
  const start = performance.now();
  const result = await cached("products", loadProducts);
  res.json({ ...result, ms: performance.now() - start });
});

app.listen(3000, () => {
  console.log("Open http://localhost:3000/api/products/raw");
});

node measure-url.mjs http://localhost:3000/api/products/raw 3
node measure-url.mjs http://localhost:3000/api/products/cached 3

Quand vous demandez du cache, précisez le périmètre : produits populaires pendant 30 secondes, pas de cache pour le stock, userId dans la clé pour les données utilisateur.

Exemple D’algorithme Exécutable

Le réseau n’est pas toujours le problème. Du JavaScript synchrone lourd peut dégrader l’INP. Ici, des scans répétés avec includes sont remplacés par un Set.

// compare-lookup.mjs
import { performance } from "node:perf_hooks";

const a = Array.from({ length: 40_000 }, (_, i) => i);
const b = Array.from({ length: 40_000 }, (_, i) => i * 2);

function slowIntersection(left, right) {
  return left.filter((item) => right.includes(item));
}

function fastIntersection(left, right) {
  const rightSet = new Set(right);
  return left.filter((item) => rightSet.has(item));
}

function time(label, fn) {
  const start = performance.now();
  const result = fn();
  const ms = performance.now() - start;
  console.log(`${label}: ${ms.toFixed(1)}ms (${result.length} hits)`);
}

time("slow", () => slowIntersection(a, b));
time("fast", () => fastIntersection(a, b));

node compare-lookup.mjs

Pièges Courants

Ne poursuivez pas uniquement le score Lighthouse. Lighthouse est une mesure de laboratoire ; les utilisateurs réels ont d’autres appareils, réseaux et états de cache. Combinez-le avec Search Console, RUM et logs serveur.

N’ajoutez pas de cache sans règles de correction. Prix, stock, permissions et données personnelles nécessitent clés, TTL et invalidation.

N’ajoutez pas useMemo partout. La mémoïsation React doit protéger des chemins chauds mesurés, pas compliquer tout le code.

Ne donnez pas la priorité à toutes les images. L’image au-dessus de la ligne de flottaison peut nécessiter une priorité ; les images plus bas doivent souvent rester lazy.

Ne découpez pas les bundles à l’aveugle. Servez-vous de l’analyse de bundle Claude Code et du code splitting Claude Code pour comparer par route.

Règles CLAUDE.md

## Performance rules
- Before optimizing, record the current metric and target metric.
- Prefer small, measurable changes over broad rewrites.
- Do not introduce shared cache for user-specific data.
- Avoid N+1 queries; use select/include or batching.
- Keep above-the-fold images sized and stable.
- After changes, report commands used for verification.

Ces règles gardent Claude Code concentré sur des améliorations prouvables.

CTA Conseil

ClaudeCodeLab peut vous aider à auditer une application web avec Claude Code, améliorer les Core Web Vitals, isoler les latences API/DB et produire un runbook d’optimisation. Pour un premier diagnostic, préparez l’URL, les écrans clés, le rapport Lighthouse, les logs d’API lentes et la date cible.

Résultat Vérifié

En local, /api/products/raw reste autour de 800ms grâce au délai volontaire, tandis que /api/products/cached descend à quelques millisecondes après la première requête. compare-lookup.mjs montre aussi un gain net avec Set. Les vrais projets sont moins propres, mais la méthode tient : mesurer p75, changer une seule chose, puis mesurer de la même façon.