Réduire la taille des ressources CSS

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é pour 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 non 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 nécessite un fichier plus volumineux que nécessaire:

• Elle utilise des espaces pour la mise en retrait et contient des commentaires, qui sont ignorés par le navigateur et peuvent donc être supprimés.
• Les éléments <h1> et <h2> ont le même style : au lieu de les déclarer séparément (par exemple, "h1 {...} h2 {...}"), ils pourraient être exprimés sous la forme "h1, h2{...}".
• Le champ background-color et #000000 peut être exprimé simplement par #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}

Il est préférable de ne pas écrire de code CSS de ce type. À 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 à le faire à l'aide d'un outil de création courant: 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 intéressante: animate.css, pour animer différents éléments de page lorsqu'un utilisateur vote pour un chat Google.

Dans un premier temps, vous devez comprendre à quoi pourrait ressembler une fois la minimisation de ce fichier:

1. Ouvrez la page de mesure.
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 qu'il est possible d'enregistrer jusqu'à 16 Ko à partir du fichier animate.css:

À présent, inspectez le contenu du CSS:

1. Ouvrez le site Fav Kitties dans Chrome. Notez que la première réponse des serveurs Glitch peut prendre un certain temps.
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 Désactiver le cache.
6. Actualisez l'application.

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 Réponse pour afficher le contenu du fichier.

Notez que la feuille de style contient des caractères d'espacement et de retrait:

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

Minification CSS avec webpack

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

Par défaut, le bundle JS généré par webpack contiendrait le contenu des fichiers CSS intégré. 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, lors de l'une des étapes du processus de compilation.
• webpack-fix-style-only-entries permet de corriger un problème dans wepback 4 et 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 Remixer pour modifier pour rendre le projet modifiable.
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 code CSS obtenu, vous utiliserez 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");

Transmettez ensuite 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 résultat webpack.config.js se présentera comme suit:

Vous allez maintenant vérifier le résultat de cette optimisation à l'aide d'outils d'optimisation des performances.

Valider

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

Si vous avez été perdu lors d'une étape précédente, vous pouvez cliquer ici pour ouvrir une version optimisée 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.

Vous pouvez inspecter ces fichiers et vérifier que les nouvelles versions ne contiennent aucun espace blanc. Ces deux fichiers sont beaucoup plus petits. Par exemple, le fichier animate.css a été réduit d'~26%, ce qui représente un gain d'~26%.

Pour finir:

1. Ouvrez la page de mesure.
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 plus "Réduire la taille des ressources CSS" comme "Opportunité". Il a été déplacé dans la section "Audits réussis" :

Les fichiers CSS étant des ressources qui bloquent l'affichage, vous pouvez constater des améliorations dans des métriques telles que First Contentful Paint lorsque vous appliquez une minimisation à des sites qui utilisent des fichiers CSS volumineux.

Étapes suivantes et ressources

Dans ce guide, nous avons abordé la minimisation CSS avec webpack, mais la même approche peut être suivie avec d'autres outils de compilation, tels que 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 du réseau pour en savoir plus sur les outils de réduction de la taille des ressources JS et sur certaines techniques complémentaires, telles que la compression.