Audit & Refactoring Performance
Utilise l'IA pour identifier et corriger les goulots d'étranglement des Core Web Vitals, du rapport Lighthouse à la solution en quelques minutes.
5.1Le HUD des performances
Les Core Web Vitals sont au nombre de trois principaux :
LCP
Largest Contentful Paint - vitesse d'affichage du contenu principal. Cible : < 2,5s.
INP
Interaction to Next Paint - réactivité aux interactions. Cible : < 200ms.
CLS
Cumulative Layout Shift - stabilité visuelle. Cible : < 0,1.
5.2Le prompt "analyse mon rapport Lighthouse"
Lance Lighthouse (DevTools → Lighthouse → Analyser), prends le rapport JSON ou copie les opportunités, et utilise ce prompt :
Prompt : Audit Lighthouse → Plan d'actionmarkdown
Tu es un expert Next.js / performance web.
Voici mon rapport Lighthouse (opportunités et diagnostics) :
[COLLE LE RAPPORT OU LES OPPORTUNITÉS]
Mon stack : Next.js 15 App Router, Tailwind CSS, WordPress headless.
Pour chaque problème identifié :
1. Explique en 2 lignes la cause réelle
2. Donne la solution concrète avec le code exact à modifier
3. Indique le gain de performance estimé (ms ou points)
4. Trie par ordre d'impact décroissant
Sois concret, ne répète pas les recommandations génériques sans code.5.3Les 5 corrections les plus générées
1. Images non optimisées (LCP)
Avant → Après : Image optimiséetsx
// ❌ Avant : img HTML basique
<img src={post.featured_image} alt={post.title} />
// ✅ Après : Next.js Image avec priority sur le LCP
<Image
src={post.featured_image}
alt={post.title}
width={800}
height={450}
priority // Précharge l'image LCP
sizes="(max-width: 768px) 100vw, 800px"
className="object-cover"
/>2. Fonts bloquantes (LCP)
Avant → Après : Police non bloquantetsx
// ❌ Avant : Google Fonts en <link> dans le head
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
// ✅ Après : next/font avec preload automatique
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap', // Affiche une police de substitution pendant le chargement
variable: '--font-inter',
});3. Composants clients inutiles (INP)
Avant → Après : Réduire le bundle clienttsx
// ❌ Avant : toute la page est un Client Component
'use client';
import { ArticleCard } from '@/components/ArticleCard';
// ✅ Après : Server Component + isolation du client
// page.tsx (Server Component par défaut)
import { ArticleCard } from '@/components/ArticleCard'; // Server Component
import { LikeButton } from '@/components/LikeButton'; // Client Component isolé
// Seul LikeButton a 'use client' - ArticleCard est rendu côté serveur4. Layout shift sur images (CLS)
Avant → Après : Dimensions explicitestsx
// ❌ Avant : pas de dimensions → CLS au chargement
<Image src={url} alt="..." fill /> // sans conteneur de taille fixe
// ✅ Après : conteneur avec aspect-ratio explicite
<div className="relative aspect-video overflow-hidden rounded-xl">
<Image src={url} alt="..." fill className="object-cover" />
</div>5. Render-blocking JS (LCP)
Avant → Après : Scripts tiers optimiséstsx
// ❌ Avant : script tiers bloquant
<script src="https://analytics.example.com/script.js" />
// ✅ Après : next/script avec strategy afterInteractive
import Script from 'next/script';
<Script
src="https://analytics.example.com/script.js"
strategy="afterInteractive" // Chargé après l'interactivité de la page
/>Résumé : workflow d'audit assisté
- 1. Lance Lighthouse en mode Incognito (sans extensions)
- 2. Copie les "Opportunités" et "Diagnostics"
- 3. Colle dans l'IA avec ton stack
- 4. Applique les corrections dans l'ordre du plus grand impact
- 5. Relance Lighthouse pour mesurer le gain