Réduire la taille des ressources CSS

Demián Renzulli
Demián Renzulli
X GitHub Glitch

Les fichiers CSS peuvent contenir des caractères inutiles, tels que des commentaires, des espaces blancs et des retraits. En production, ces caractères peuvent être supprimés en toute sécurité afin de réduire la taille du fichier sans affecter la façon dont le navigateur traite les styles. Cette technique est appelée minification.

Chargement du code CSS réduit

Examinez le bloc CSS suivant:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

Ce contenu est facile à lire, mais le fichier sera plus volumineux que nécessaire:

  • Il utilise les espaces à des fins de mise en retrait et contient des commentaires, qui sont ignorés par le navigateur, de sorte qu'ils peuvent être supprimés.
  • Les éléments <h1> et <h2> ont le même style: au lieu de les déclarer séparément : "h1 {...} h2 {...}" elles peuvent être exprimées sous la forme "h1, h2{...}".
  • background-color, #000000 peut être exprimé uniquement sous la forme #000.

Une fois ces modifications effectuées, vous obtiendrez une version plus compacte des mêmes styles:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

Vous ne souhaiterez probablement pas écrire du code CSS de cette manière. À la place, vous pouvez écrire du code CSS comme d'habitude et ajouter une étape de minimisation à votre processus de compilation. Dans ce guide, vous allez apprendre à effectuer cette opération à l'aide d'un outil de compilation connu: webpack.

Mesurer

Vous allez appliquer la minimisation CSS à un site qui a été utilisé dans d'autres guides: Fav Kitties. Cette version du site utilise une bibliothèque CSS très pratique: animate.css, pour animer différents éléments de la page lorsqu'un utilisateur vote pour un chat fare.

Pour commencer, vous devez comprendre quelles seraient les opportunités après avoir réduit la taille de ce fichier:

  1. Ouvrez la page des mesures.
  2. Saisissez l'URL https://fav-kitties-animated.glitch.me, puis cliquez sur Exécuter l'audit.
  3. Cliquez sur Afficher le rapport.
  4. Cliquez sur Performances, puis accédez à la section Opportunités.

Le rapport obtenu montre que vous pouvez enregistrer jusqu'à 16 Ko à partir du fichier animate.css:

Lighthouse: réduction de la taille des opportunités CSS

Inspectez maintenant le contenu du CSS:

  1. Ouvrez le site Fav Kitties dans Chrome. Les serveurs Glitch peuvent mettre un certain temps à répondre la première fois.
  2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  3. Cliquez sur l'onglet Réseau.
  4. Cliquez sur le filtre CSS.
  5. Cochez la case Disable cache (Désactiver le cache).
  6. Actualisez l'application.

Trace CSS non optimisée dans les outils de développement

La page demande deux fichiers CSS, respectivement de 1,9 Ko et de 76,2 Ko.

  1. Cliquez sur animate.css.
  2. Cliquez sur l'onglet Response (Réponse) pour afficher le contenu du fichier.

Notez que la feuille de style contient des caractères pour les espaces blancs et les retraits:

Réponse CSS non optimisée des outils de développement

Vous allez maintenant ajouter des plug-ins webpack à votre processus de compilation afin de réduire la taille de ces fichiers.

Minimiser la taille de CSS avec webpack

Avant de vous lancer dans les optimisations, prenez le temps de comprendre le fonctionnement du processus de création pour le site Fav Kitties:

Par défaut, le bundle JS généré par webpack contiendrait le contenu des fichiers CSS. Comme nous voulons gérer des fichiers CSS distincts, nous utilisons deux plug-ins complémentaires:

  • mini-css-extract-plugin extrait chaque feuille de style dans son propre fichier. Il s'agit de l'une des étapes du processus de compilation.
  • webpack-fix-style-only-entries est utilisé pour corriger un problème dans le wepback 4, afin d'éviter de générer un fichier JS supplémentaire pour chaque fichier CSS répertorié dans webpack-config.js.

Vous allez maintenant apporter quelques modifications au projet:

  1. Ouvrez le projet Fav Kitties dans Glitch.
  2. Pour afficher la source, appuyez sur Afficher la source.
  3. Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
  4. Cliquez sur Terminal (remarque: si le bouton Terminal ne s'affiche pas, vous devrez peut-être utiliser l'option plein écran).

Pour réduire la taille du CSS obtenu, utilisez optimize-css-assets-webpack-plugin:

  1. Dans la console Glitch, exécutez npm install --save-dev optimize-css-assets-webpack-plugin.
  2. Exécutez refresh pour synchroniser les modifications avec l'éditeur Glitch.

Revenez ensuite à l'éditeur Glitch, ouvrez le fichier webpack.config.js et apportez les modifications suivantes:

Chargez le module au début du fichier: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

Ensuite, transmettez une instance du plug-in au tableau plugins: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] Une fois les modifications effectuées, une recompilation du projet est déclenchée. Le fichier webpack.config.js obtenu se présentera comme suit:

Vous allez maintenant vérifier les résultats de cette optimisation à l'aide d'outils dédiés aux performances.

Valider

  • Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran plein écran

Si vous vous êtes perdu au cours d'une étape précédente, vous pouvez cliquer sur ici, pour ouvrir un du site.

Pour inspecter la taille et le contenu des fichiers:

  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  2. Cliquez sur l'onglet Réseau.
  3. Cliquez sur le filtre CSS.
  4. Cochez la case Désactiver le cache si ce n'est pas déjà fait.
  5. Actualisez l'application.

Réponse CSS non optimisée des outils de développement

Vous pouvez inspecter ces fichiers et constater que les nouvelles versions ne contiennent aucun espace blanc. Les deux fichiers sont beaucoup plus petits. En particulier, le fichier animate.css a été réduit à ~26%, ce qui vous permet d'économiser ~20 Ko.

Pour finir:

  1. Ouvrez la page des mesures.
  2. Saisissez l'URL du site optimisé.
  3. Cliquez sur Afficher le rapport.
  4. Cliquez sur Performances, puis accédez à la section Opportunités.

Le rapport n'affiche pas "Réduire la taille des ressources CSS". par "Opportunité" et a été déplacé vers la catégorie "Audits réussis" :

Audits Lighthouse réussis pour la page optimisée.

Étant donné que les fichiers CSS sont des ressources qui bloquent l'affichage, si vous appliquez la minimisation sur les sites qui utilisent des fichiers CSS volumineux, vous pouvez constater des améliorations sur des métriques telles que First Contentful Paint.

Étapes suivantes et ressources

Dans ce guide, nous avons abordé la minimisation de CSS avec webpack, mais vous pouvez adopter la même approche avec d'autres outils de compilation, comme gulp-clean-css pour Gulp, ou grunt-contrib-cssmin pour Grunt

La minimisation peut également être appliquée à d'autres types de fichiers. Consultez le guide Minifier et compresser les charges utiles réseau pour en savoir plus sur les outils permettant de réduire la taille des ressources JS, ainsi que sur certaines techniques complémentaires, telles que la compression.