Aller au contenu principal

Module Tailwind.7 – Performance

Objectif​

Optimiser les performances Tailwind : purge CSS, bundle size, stratégies d'optimisation pour créer des sites Tailwind performants.

Théorie​

Purge CSS (JIT)​

Tailwind 3.0+ = JIT (Just-In-Time) par défaut.

JIT = Génère seulement les classes utilisées.

Avant (AOT - Ahead of Time) :

  • Toutes les classes générées
  • CSS énorme (~3MB)
  • Purge en production

Maintenant (JIT) :

  • Classes générées à la demande
  • CSS petit même en développement
  • Pas besoin de purge manuelle

Configuration content​

Content paths :

// tailwind.config.js
module.exports = {
    content: [
        './src/**/*.{html,js,jsx,ts,tsx,vue}',
        './public/**/*.html',
    ],
}

Important : Tailwind scanne ces fichiers pour trouver les classes.

Patterns :

content: [
    './src/**/*.html',        // Tous les HTML
    './src/**/*.js',          // Tous les JS
    './src/**/*.{js,jsx}',    // JS et JSX
    './src/**/*.{html,js,vue,tsx}', // Multiples extensions
]

Bundle size​

Taille typique :

  • Développement : ~100-200KB (non minifié)
  • Production : 10-50KB (minifié + purge)

Comparaison :

  • Bootstrap : ~150KB (minifié)
  • Tailwind : ~10-50KB (selon utilisation)

Optimisations :

1. Content précis​

❌ Mauvais :

content: [
    './**/*', // Trop large
]

✅ Bon :

content: [
    './src/**/*.{html,js}',
]

2. Safelist minimal​

❌ Mauvais :

safelist: [
    'bg-red-500',
    'bg-blue-500',
    // ... 100 classes
]

✅ Bon :

safelist: [
    {
        pattern: /bg-(red|blue)-(100|500|900)/,
    }
]

3. Imports sélectifs (si possible)​

Si vous n'utilisez pas tout :

/* input.css */
@tailwind base;
@tailwind components;
/* Pas de @tailwind utilities si non utilisé */

Minification​

Production :

tailwindcss -i input.css -o output.css --minify

Résultat : CSS minifié (espaces supprimés).

Critical CSS​

Extraire le CSS critique :

<head>
    <style>
        /* CSS critique (above-the-fold) */
        .navbar { }
        .hero { }
    </style>
    <link rel="preload" href="tailwind.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

Lazy load CSS​

Charger le CSS non critique en async :

<link rel="preload" href="tailwind.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="tailwind.css"></noscript>

Optimisations avancées​

1. Composants vs utilitaires​

Utilitaires partout :

<!-- Plus de classes, mais purge efficace -->
<div class="px-4 py-2 bg-blue-500">

Composants extraits :

/* Moins de classes HTML, mais CSS généré */
.btn { @apply px-4 py-2 bg-blue-500; }

Choix : Selon le projet et préférences.

2. Valeurs arbitraires​

Impact :

<div class="w-[347px]"> <!-- Génère du CSS -->

Alternative :

// Configurer si réutilisé
width: {
    'custom': '347px',
}

Recommandation : Configurer si utilisé 2+ fois.

3. Dark mode​

Mode class :

  • Plus de CSS généré (variantes dark)
  • Plus flexible

Mode media :

  • Moins de CSS (utilise prefers-color-scheme)
  • Moins flexible

Mesurer les performances​

Outils :

  • Lighthouse : Score performance
  • Bundle Analyzer : Taille du CSS
  • DevTools Network : Taille du fichier

Objectifs :

  • CSS final : < 50KB (minifié)
  • First Contentful Paint : < 1.5s
  • Lighthouse score : > 90

Exercices guidés​

Exercice 1 : Purge CSS​

Testez le purge :

  • Mode développement (toutes classes)
  • Mode production (seulement utilisées)
  • Comparez la taille

Exercice 2 : Content paths​

Optimisez les content paths :

  • Paths précis
  • Évitez les patterns trop larges
  • Testez la compilation

Exercice 3 : Bundle size​

Mesurez la taille :

  • CSS développement
  • CSS production
  • Comparez avec autres frameworks

Exercice 4 : Critical CSS​

Extrayez le CSS critique :

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

Exercice 5 : Optimisation complète​

Optimisez un projet :

  • Content paths optimisés
  • Minification
  • Critical CSS
  • Testez avec Lighthouse

❌ Erreurs fréquentes​

Erreur 1 : Content paths trop larges​

❌ Mauvais :

content: [
    './**/*', // Scanne tout, y compris node_modules
]

✅ Bon :

content: [
    './src/**/*.{html,js}',
]

Pourquoi : Paths précis = scan plus rapide.

Erreur 2 : Oublier des fichiers​

❌ Mauvais :

content: [
    './src/**/*.html', // Manque les JS
]

✅ Bon :

content: [
    './src/**/*.{html,js,jsx}',
]

Pourquoi : Classes dans JS = doivent être scannées.

Erreur 3 : Safelist trop large​

❌ Mauvais :

safelist: [
    'bg-red-500',
    'bg-blue-500',
    // ... 1000 classes
]

✅ Bon :

safelist: [
    {
        pattern: /bg-(red|blue)-(100|500|900)/,
    }
]

Pourquoi : Patterns = plus efficace.

Erreur 4 : Pas de minification​

❌ Mauvais :

tailwindcss -i input.css -o output.css

✅ Bon :

tailwindcss -i input.css -o output.css --minify

Pourquoi : Minification = taille réduite.

Erreur 5 : CSS bloquant​

❌ Mauvais :

<link rel="stylesheet" href="tailwind.css">
<!-- Bloque le rendu -->

✅ Bon :

<link rel="preload" href="tailwind.css" as="style" onload="...">

Pourquoi : Non bloquant = meilleur FCP.

🚀 Mini-projet​

Mission : Optimiser les performances Tailwind

Optimisez un projet Tailwind :

Optimisations :

  1. Content paths précis
  2. Minification activée
  3. Critical CSS extrait
  4. Bundle size mesuré
  5. Lighthouse score > 90

Tests :

  • Taille du CSS (dev vs prod)
  • Lighthouse performance
  • Network tab (taille du fichier)

Critères :

  • ✅ CSS < 50KB (production)
  • ✅ Content paths optimisés
  • ✅ Minification activée
  • ✅ Performance optimale
  • ✅ Lighthouse > 90

Objectif : Créer des sites Tailwind performants avec un bundle optimisé.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez l'optimisation Tailwind et avez un CSS final < 50KB.