Cours Web Performances & SEO
Session 2 • Module 6 • 12 min

Optimisation CSS

Minification, CSS critique, purge

1) Minification CSS

La minification consiste à supprimer tous les espaces, retours à la ligne et commentaires du CSS. Le fichier devient plus léger et se télécharge plus rapidement. C'est une optimisation de base que tous les sites devraient appliquer.

Minification CSS en action
CSS Original 
 
 
 
 
 CSS Minifié  
  
 
 
 
  
 
 Avant - 
 
    
 
 Après - 
 
 Gain - 
 
 

La minification supprime espaces, retours à la ligne et commentaires sans changer le fonctionnement du CSS.

 
   
Outils de minification CSS
 
La bonne nouvelle : la plupart des frameworks modernes minifient automatiquement en production. Sinon, voici les options :
 
     
  • Frameworks avec minification native : Vite, Next.js, Nuxt, Astro, Webpack (mode production)
    •  
  • Outils en ligne : CSS Minifier, cssnano
    •  
  • WordPress : WP Rocket, Autoptimize, LiteSpeed Cache
    •  
  • Build tools : PostCSS avec cssnano, clean-css
    •  
 
 
 
2) CSS Critique (Critical CSS)
 
Le CSS critique est une technique plus avancée : on extrait uniquement les styles nécessaires à l'affichage du contenu visible au premier écran (above the fold), puis le reste se charge en arrière-plan sans bloquer le rendu.
 
 
CSS Critique : où le placer dans le HTML ?
 
  
 
 🐢 Chargement classique Bloquant 
 
 
     Écran blanc pendant ~2-3s 
 
  
 
 🚀 Avec CSS critique Recommandé 
 
 
    Affichage immédiat (~0.3s) 
 
 
 
 Le CSS critique contient uniquement les styles du contenu visible au chargement (header, hero). Le reste du CSS se charge en arrière-plan avec media="print" puis bascule sur media="all" une fois chargé.

 
   
Outils pour générer le CSS critique
 
     
  • Critical : package Node.js créé par Addy Osmani (Google). S'intègre dans Gulp, Webpack ou en CLI
    •  
  • Penthouse : générateur CSS critique utilisant Puppeteer. Très précis mais plus lent
    •  
  • CriticalCSS.com : service en ligne gratuit pour tester rapidement
    •  
  • WordPress : WP Rocket génère automatiquement le CSS critique, Perfmatters aussi
    •  
 
 💡 
 
Attention : le CSS critique doit être régénéré à chaque modification de design. En production, automatise ce processus dans ton pipeline de build.
 
 
 
 
 
3) Supprimer le CSS inutilisé
 
Supprimer le CSS inutilisé (unused CSS) évite de charger du code mort. C'est particulièrement important avec les frameworks CSS comme Bootstrap ou Tailwind qui incluent des milliers de classes.
 
     
  • PurgeCSS : analyse ton HTML/JS et supprime les classes CSS non utilisées
    •  
  • Tailwind CSS : PurgeCSS intégré nativement depuis la v2
    •  
  • UnCSS : alternative plus ancienne mais toujours efficace
    •  
  • Chrome DevTools : onglet Coverage pour identifier le CSS non utilisé
    •  
 
 📋 
 
Comment utiliser Coverage dans Chrome : DevTools → onglet "Coverage" (Ctrl+Shift+P → "Coverage") → recharger la page → voir le % de CSS utilisé par fichier.
 
 
 
  
Question 1/4
Qu'est-ce que la minification CSS ?
La minification supprime espaces, retours a la ligne et commentaires pour reduire la taille du fichier.