Aller au contenu principal

Module CSS.10 – Performance & bonnes pratiques

Objectif​

Optimiser les performances CSS : comprendre repaint/reflow, organiser les fichiers, créer du CSS propre et performant.

Théorie​

Repaint et Reflow​

Repaint = Redessiner un élément (changement de couleur, visibilité).

Reflow = Recalculer la mise en page (changement de dimensions, position).

Coût :

  • Reflow > Repaint (plus coûteux)
  • Éviter les reflows inutiles

Propriétés qui causent reflow :

  • width, height
  • margin, padding
  • top, left, right, bottom
  • display
  • position

Propriétés qui causent repaint seulement :

  • color
  • background-color
  • visibility
  • outline

Propriétés performantes (GPU) :

  • transform
  • opacity
  • filter

Optimisation :

/* ❌ Mauvais : Cause reflow */
.element {
    width: 100px;
    height: 100px;
    left: 50px;
}

/* ✅ Bon : Utilise GPU */
.element {
    transform: translateX(50px) scale(1.2);
    opacity: 0.8;
}

Organisation des fichiers​

Structure optimale :

css/
├── critical.css      /* CSS critique (above-the-fold) */
├── main.css          /* CSS principal */
└── print.css         /* Styles impression */

Chargement :

<head>
    <!-- CSS critique inliné -->
    <style>
        /* CSS critique */
    </style>
    <!-- CSS principal -->
    <link rel="stylesheet" href="main.css">
</head>

Minification​

CSS minifié :

/* Avant */
.button {
    padding: 10px 20px;
    background-color: blue;
    color: white;
}

/* Après (minifié) */
.button{padding:10px 20px;background-color:blue;color:white}

Outils :

  • CSSNano
  • CleanCSS
  • PostCSS

Critical CSS​

CSS critique = CSS nécessaire pour le rendu initial (above-the-fold).

Extraction :

  1. Identifier le CSS critique
  2. Inliner dans <head>
  3. Charger le reste en async

Exemple :

<head>
    <style>
        /* CSS critique (header, hero) */
        .header { }
        .hero { }
    </style>
    <link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

CSS propre​

1. Éviter les sélecteurs trop spécifiques​

❌ Mauvais :

body div.container section article p.texte { }

✅ Bon :

.texte { }

2. Éviter !important​

❌ Mauvais :

.element {
    color: blue !important;
}

✅ Bon :

.element-specifique {
    color: blue;
}

3. Organiser logiquement​

/* 1. Reset */
* { }

/* 2. Base */
body { }

/* 3. Layout */
.container { }

/* 4. Components */
.card { }

/* 5. Utilities */
.text-center { }

4. Commentaires utiles​

/* ========================================
   COMPONENT: Card
   ======================================== */

.card { }

5. DRY (Don't Repeat Yourself)​

❌ Mauvais :

.button1 { padding: 10px; }
.button2 { padding: 10px; }

✅ Bon :

.button { padding: 10px; }

Optimisations avancées​

1. Utiliser will-change avec parcimonie​

.element-anime {
    will-change: transform;
}

Attention : Retirer will-change après l'animation.

2. Éviter les expressions complexes​

❌ Mauvais :

.element:nth-child(3n+1):not(.exclu):hover { }

✅ Bon :

.element-specifique:hover { }

3. Utiliser contain​

.card {
    contain: layout style paint;
}

Avantages : Isolation, optimisation du rendu.

4. Lazy load CSS non critique​

<link rel="preload" href="non-critique.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Outils de performance​

Lighthouse :

  • Performance score
  • CSS delivery
  • Unused CSS

Chrome DevTools :

  • Performance tab
  • Coverage tab (CSS unused)

PageSpeed Insights :

  • Analyse complète
  • Recommandations

Exercices guidés​

Exercice 1 : Identifier repaint/reflow​

Créez des animations et identifiez :

  • Quelles propriétés causent reflow
  • Quelles propriétés causent repaint
  • Utilisez DevTools Performance

Exercice 2 : Optimiser les animations​

Refactorisez des animations :

  • Remplacer left par transform
  • Utiliser opacity au lieu de visibility
  • Tester les performances

Exercice 3 : Critical CSS​

Extrayez le CSS critique :

  • Identifiez le CSS above-the-fold
  • Inline dans <head>
  • Chargez le reste en async

Exercice 4 : Minification​

Minifiez votre CSS :

  • Utilisez un outil (CSSNano, etc.)
  • Comparez la taille avant/après
  • Vérifiez que ça fonctionne

Exercice 5 : Audit de performance​

Utilisez Lighthouse :

  • Analysez votre site
  • Identifiez les problèmes CSS
  • Corrigez les problèmes

❌ Erreurs fréquentes​

Erreur 1 : Animer des propriétés non performantes​

❌ Mauvais :

.element {
    left: 0;
    transition: left 0.3s;
}
.element:hover {
    left: 100px; /* Reflow */
}

✅ Bon :

.element {
    transform: translateX(0);
    transition: transform 0.3s;
}
.element:hover {
    transform: translateX(100px); /* GPU */
}

Pourquoi : transform utilise le GPU, plus performant.

Erreur 2 : CSS non minifié en production​

❌ Mauvais :

<link rel="stylesheet" href="style.css"> <!-- Non minifié -->

✅ Bon :

<link rel="stylesheet" href="style.min.css"> <!-- Minifié -->

Pourquoi : Réduction de la taille = chargement plus rapide.

Erreur 3 : Trop de CSS non utilisé​

❌ Mauvais :

/* 5000 lignes de CSS, seulement 1000 utilisées */

✅ Bon :

/* CSS utilisé uniquement */
/* Purge CSS, tree-shaking */

Pourquoi : Moins de CSS = chargement plus rapide.

Erreur 4 : CSS bloquant​

❌ Mauvais :

<head>
    <link rel="stylesheet" href="non-critique.css"> <!-- Bloque le rendu -->
</head>

✅ Bon :

<head>
    <style>/* CSS critique */</style>
    <link rel="preload" href="non-critique.css" as="style" onload="...">
</head>

Pourquoi : CSS non critique ne doit pas bloquer le rendu.

Erreur 5 : Sélecteurs trop complexes​

❌ Mauvais :

body div.container section article p.texte a:hover { }

✅ Bon :

.texte a:hover { }

Pourquoi : Sélecteurs simples = parsing plus rapide.

🚀 Mini-projet​

Mission : Optimiser les performances CSS

Prenez un projet et optimisez-le :

Optimisations :

  1. Identifier et corriger les reflows
  2. Extraire le CSS critique
  3. Minifier le CSS
  4. Lazy load CSS non critique
  5. Purger le CSS inutilisé

Tests :

  • Lighthouse (score > 90)
  • DevTools Performance
  • Coverage (CSS unused)

Critères :

  • ✅ Animations performantes (transform, opacity)
  • ✅ CSS critique inliné
  • ✅ CSS minifié
  • ✅ Pas de CSS inutilisé
  • ✅ Chargement optimisé

Objectif : Créer du CSS performant et optimisé.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez l'optimisation CSS et avez créé un site avec des performances optimales.