De 88 à 100 PSI : Claude Code pour l'optimisation du front-end

Un développeur a utilisé Claude Code comme partenaire de débogage et d'implémentation pour faire passer le score mobile PageSpeed Insights de son site de 88 à 100 (un modèle d'article est passé de 74 à 100). Le post sur r/ClaudeAI détaille le workflow pratique — pas une solution unique, mais une série d'interventions ciblées.

Optimisations clés réalisées

• Images responsives + srcset : Claude a identifié que l'image hero mobile était trop grande, puis a généré des variantes responsives et ajouté des attributs srcset.
• Préchargement LCP : Ajout d'un préchargement responsive pour l'image LCP avec <link rel="preload" as="image" imagesrcset="...">.
• Correction du reflow forcé : Remplacement d'un écouteur de défilement d'en-tête (provoquant une mise en page forcée au défilement) par IntersectionObserver.
• Audit des polices : Identification des poids de police réellement utilisés et suppression des inutilisés.
• Dimensions d'images au build : Ajout des attributs width et height aux images markdown lors de la construction pour éliminer les décalages de mise en page.
• Suppression des préchargements de polices sur les pages articles : Contre-intuitif mais efficace — les polices préchargées entraient en concurrence avec l'image hero pour la bande passante sur mobile limité. Comme les polices utilisaient font-display: swap, la suppression des préchargements a permis à l'image LCP de se charger plus rapidement.

Modèle de prompting efficace

Le développeur a constaté que Claude Code fonctionne mieux avec des threads de diagnostic spécifiques. Au lieu de prompts vagues, il faut lui fournir les résultats PSI et demander le plus petit correctif sûr. Exemple de modèle : fournir le constat PageSpeed Insights, demander à Claude d'inspecter le composant concerné, puis demander une correction minimale plutôt qu'un refactor global.

Le jugement humain reste nécessaire

Certaines optimisations semblaient visuellement trop agressives — l'auteur a remonté la qualité du logo tout en restant à 100. Les images sous la ligne de flottaison et les compromis de style nécessitaient des décisions humaines. Claude Code a accéléré l'itération, mais le développeur a dû équilibrer performance, accessibilité et qualité de design.

Article complet

L'auteur a publié une version technique plus longue avec les modifications spécifiques des Core Web Vitals et les chiffres avant/après sur goodrich.digital.