Optimisation CSS : Performance, Taille et Vitesse de Chargement

Pourquoi la performance CSS importe

CSS est une ressource bloquante pour le rendu. Le navigateur ne peut pas rendre la page sans charger le CSS. Les gros fichiers CSS augmentent le temps de First Contentful Paint (FCP).

Le CSS inutilisé augmente la taille de la page et prolonge le temps de chargement. Typiquement 60-80% du CSS sur un site web n'est pas utilisé.

L'optimisation CSS améliore les métriques Core Web Vitals (surtout LCP et CLS). Le CSS optimisé offre une expérience utilisateur plus rapide et plus fluide.

Minification CSS

La minification réduit la taille du fichier de 20 à 40% en supprimant les espaces, commentaires et caractères inutiles du CSS.

Outils : cssnano, clean-css, Terser (support CSS). Utilisez le plugin de minification dans votre pipeline de build (Webpack, Vite, Rollup).

Combinée à la compression Gzip/Brotli, la minification peut réduire la taille du fichier CSS de 70 à 80%.

Utilisez toujours du CSS minifié dans les builds de production. Utilisez du CSS lisible en développement.

CSS Critique

Le CSS critique est le CSS nécessaire pour le contenu above-the-fold (première vue). Ajoutez ce CSS inline dans <head>.

Chargez le CSS non critique de manière asynchrone : <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">.

Outils : Critical (paquet npm), Penthouse, Critters (plugin Webpack). Ces outils extraient automatiquement le CSS critique.

Taille du CSS critique : Gardez sous 14KB (TCP slow start window). Un CSS critique plus grand gonfle le payload initial.

Suppression du CSS Inutilisé

PurgeCSS supprime les sélecteurs CSS inutilisés. Utilisé avec des frameworks comme Tailwind CSS, Bootstrap.

Configuration PurgeCSS : Définissez content (fichiers HTML/JS à scanner) et safelist (sélecteurs à conserver).

Chrome DevTools Coverage tab : Détectez le CSS inutilisé. Le rapport Coverage montre combien de chaque fichier est utilisé.

CSS-in-JS : Des bibliothèques comme Styled Components, Emotion ne rendent que les styles utilisés. Le CSS inutilisé est automatiquement supprimé.

Stratégies de Chargement CSS

Code splitting : Créez un fichier CSS séparé pour chaque page. Utilisez Webpack CSS code splitting ou le splitting automatique de Vite.

Lazy loading : Lazy load le CSS pour des composants spécifiques (modal, tooltip). Chargez le fichier CSS à la demande avec dynamic import().

Chargement des polices : Utilisez font-display: swap avec @font-face. Minimisez les problèmes de FOIT et FOUT.

Media queries : Divisez le CSS conditionnel (impression, dark mode) en fichiers séparés : <link rel="stylesheet" href="print.css" media="print">.

Preconnect : Utilisez <link rel="preconnect" href="https://fonts.googleapis.com"> pour les sources CSS externes (Google Fonts).

Meilleures Pratiques CSS

Gardez la spécificité CSS basse. Les chaînes de sélecteurs profondes (div > ul > li > a) réduisent la performance. Utilisez des sélecteurs plats.

Utilisez Flexbox et Grid. Les layouts basés sur float nécessitent plus de CSS et se rendent plus lentement.

CSS containment : Limitez la portée de rendu de l'élément avec contain: layout paint style. Cela permet au navigateur d'optimiser la zone de rendu.

Will-change : Utilisez will-change: transform sur les éléments animés. Mais une utilisation excessive réduit la performance.

Utilisez les CSS custom properties (variables). Gérez les valeurs répétées (couleur, taille) avec des variables.