Audit de performance

Ton site rame ? On va trouver les coupables et les éliminer un par un.

1. Images : le coupable numéro 1

Les images représentent souvent 50 à 80% du poids d'une page. C'est le premier levier d'optimisation.

TSXtsx

// Avant : image brute de 2 Mo
<img src="/hero.png" alt="Hero" />

// Après : image optimisée avec Next.js Image
import Image from 'next/image'

<Image
  src="/hero.webp"
  alt="Hero section"
  width={1200}
  height={600}
  priority           // LCP : pas de lazy loading pour l'image principale
  quality={85}       // compression légère
/>

// Pour les images sous le fold :
<Image
  src="/feature.webp"
  alt="Fonctionnalité"
  width={800}
  height={400}
  loading="lazy"     // chargement différé
  placeholder="blur" // placeholder flou pendant le chargement
  blurDataURL="data:image/jpeg;base64,/9j..."
/>

2. JavaScript : le thread principal

Trop de JavaScript bloque le thread principal du navigateur. Résultat : la page ne répond plus aux clics (mauvais INP).

TSXtsx

// Anti-pattern : tout charger en même temps
import HeavyChart from 'chart-library'     // 200 Ko
import VideoPlayer from 'video-library'    // 150 Ko
import AnimationLib from 'animation-lib'   // 100 Ko

// Pattern : import dynamique (code splitting)
import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('chart-library'), {
  loading: () => <p>Chargement du graphique...</p>,
  ssr: false,  // pas besoin côté serveur
})

// Le composant ne sera chargé que quand il est rendu
// → économie de 200 Ko au chargement initial

Analyser le bundle

Bashbash

# Installer l'analyseur de bundle
npm install @next/bundle-analyzer

# Dans next.config.ts :
# const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: true })
# module.exports = withBundleAnalyzer(nextConfig)

# Lancer l'analyse
ANALYZE=true npm run build

# Résultat : une page interactive montrant la taille de chaque module

3. Fonts : le rendu invisible

Les polices web peuvent bloquer le rendu ou causer du CLS :

TSXtsx

// Bonne pratique Next.js : next/font (auto-hébergé)
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',    // affiche du texte immédiatement (pas de FOIT)
  preload: true,
})

// Dans le layout :
<body className={inter.className}>

// Avantages :
//, pas de requête externe (auto-hébergé)
//, pas de layout shift (taille réservée)
// - Chargement optimal automatique

4. Stratégie de chargement

Le waterfall

Ouvre l'onglet Network des DevTools et regarde le waterfall (cascade). Tu veux que les ressources critiques se chargent en parallèle, pas en série.

HTMLhtml

<!-- Preload : charger en priorité les ressources critiques -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

<!-- Prefetch : préparer la prochaine page -->
<link rel="prefetch" href="/cours/chapitre-2">

<!-- DNS Prefetch : résoudre le DNS à l'avance -->
<link rel="dns-prefetch" href="https://api.supabase.co">

La règle du Above the Fold

5. Checklist performance rapide

Bashbash

# Checklist performance express
# [ ] Images en WebP/AVIF avec dimensions explicites
# [ ] Image hero avec priority (pas de lazy)
# [ ] Import dynamique pour les composants lourds
# [ ] next/font pour les polices (display: swap)
# [ ] Pas de bibliothèque JS inutilisée (vérifier le bundle)
# [ ] Preload des ressources critiques
# [ ] Lighthouse Performance >= 90

Utiliser l'IA pour l'audit de performance

Bashbash

# Prompt pour l'IA après un audit Lighthouse :
# "Voici mon rapport Lighthouse :
# - LCP : 3.8s (image hero de 1.2 Mo)
# - INP : 320ms
# - CLS : 0.18
# - Bundle JS total : 450 Ko
#
# Stack : Next.js 15, React 19, Tailwind CSS
# Hébergement : Cloudflare Pages
#
# Propose-moi les 5 optimisations les plus impactantes,
# classées par gain estimé, avec le code concret pour chacune."

Ce que tu as débloqué

Optimiser les images (WebP, priority, lazy loading)
Réduire le JavaScript (code splitting, dynamic imports)
Charger les fonts correctement (next/font, display: swap)
La stratégie above the fold (preload, prefetch)
Utiliser l'IA pour analyser un rapport Lighthouse

Verifie tes acquis

5 questions pour valider ce chapitre

1. Quel est le coupable numero 1 du poids d'une page web ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

Commencer l'aventure

Déjà membre ?Connecte-toi