Lighthouse 98 : Les 7 optimisations qui ont tout changé

Un site lent, c'est des utilisateurs frustrés et un référencement pénalisé. Voici comment nous avons transformé les performances d'un site Next.js.

Contexte : le diagnostic initial

Score Lighthouse initial : 45/100

• LCP (Largest Contentful Paint) : 4.2s
• FID (First Input Delay) : 320ms
• CLS (Cumulative Layout Shift) : 0.25

1. Optimisation des images

Les images représentaient 70% du poids de la page. Solutions :

• Passage au format WebP/AVIF
• Lazy loading natif
• Dimensionnement responsive avec srcset

2. Code splitting agressif

Le bundle JavaScript initial pesait 1.2MB. Après code splitting :

• Bundle initial : 180KB
• Chargement dynamique des composants non-critiques

3. Fonts optimisées

Les polices personnalisées causaient un FOIT de 800ms. Solutions :

• Preload des fonts critiques
• font-display: swap
• Subset des caractères utilisés

4. Élimination du CSS inutilisé

40% du CSS n'était jamais utilisé. Avec PurgeCSS :

• CSS avant : 280KB
• CSS après : 45KB

5. Cache HTTP optimal

Configuration des headers Cache-Control pour assets statiques :

• Images : 1 an
• JS/CSS : 1 an (avec hash)
• HTML : no-cache

6. CDN et Edge caching

Migration vers un CDN avec edge caching. Résultat : TTFB divisé par 4.

7. Préchargement intelligent

Prefetch des ressources critiques et preconnect aux domaines tiers.

Résultats

Score Lighthouse final : 98/100

• LCP : 1.1s (-74%)
• FID : 12ms (-96%)
• CLS : 0.02 (-92%)

Impact business : +23% de conversions sur la page principale.