Compresser des fichiers CSS pour améliorer la performance

Les feuilles de style en cascade, généralement appelées CSS (de l’anglais Cascading Style Sheets), constituent un langage informatique dont le but est de définir les contenus Web et leur présentation, leur couleur ou leur mise en page. Les documents HTML et XML contiennent uniquement des données concernant les contenus complexes (arbres, textes riches…) alors que les éléments de mise en page sont présentés dans les données CSS. Si des feuilles de style sont utilisées lors d’un chargement de page, le serveur Web doit les transférer au navigateur en incluant les contenus multimédia implémentés. Cette action a des effets sur le temps de chargement de la page. Plus les données CSS sont grandes et complexes, plus l’internaute va devoir se montrer patient lors du chargement de la page. En compressant les codes des fichiers CSS, vous pouvez très nettement diminuer la taille de ces fichiers et ainsi améliorer la performance de votre site Internet.

Comment optimiser des fichiers CSS

On accorde de plus en plus d’importance au chargement d’un site Internet, notamment depuis la croissance du marché des smartphones et des tablettes. Le champ d’activité du langage CSS s’est agrandi et utilise de plus en plus les fonctionnalités de JavaScript. Les templates de systèmes de gestion de contenu tels que WordPress sont particulièrement concernés par ces fichiers CSS surchargés, qui ralentissent les sites Web. Nous vous présentons ici quelques conseils et astuces qui vous aideront à compresser vos fichiers CSS et qui amélioreront le temps de chargement de votre site Web :

  1. Evitez l’utilisation excessive des valeurs CSS Inline (styles directement stockés dans un élément HTML) dans la mesure où il ne s’agit pas du début de la page HTML.  Il en va de même pour les balises de style (des éléments CSS individuels qui diffèrent des feuilles de style standards).

  2. Combinez plusieurs fichiers CSS dans un script PHP. Ainsi, le fichier PHP est le seul élément à être chargé par le client. Normalement, celui-ci doit envoyer une demande HTTP par feuille de style et attendre.

  3. Si possible, utilisez les codes suivants : body { margin: 20px 10px 5px 10px } Au lieu de cette formulation complète : body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px }

  4. Evitez d’écrire trop. Si certaines balises n’apparaissent que dans un élément, il n’est pas nécessaire de mentionner ce dernier une nouvelle fois.

  5. Utilisez les codes en Hex pour les couleurs à la place des notations RGB.

  6. N’utilisez le sélecteur universel (soit l’astérisque) qu’en cas d’urgence. Celui-ci vaut pour tous les éléments, ce qui signifie que le navigateur doit tous les vérifier.

  7. Rétrécissez les fichiers CSS en supprimant les espaces, les lignes ainsi que les commentaires inutiles. Par exemple, il ne faut aucun espace derrière deux points et un point-virgule. Vous pouvez aussi supprimer le point-virgule après le dernier point de l’énumération. De cette manière, le fichier CSS perdra sa construction systématique ainsi que sa clarté, mais sera bien plus rapidement interprété par votre navigateur.

Etant donné que la minimisation d’un fichier CSS est complexe, il est conseillé dans tous les cas de créer une copie tant que le fichier CSS n’est pas encore clair. Ainsi, vous pourrez procéder à de petites modifications, voire réparer des erreurs. 

Compression CSS : outils en ligne et hors ligne

Il est possible de contourner l’effort d’une optimisation manuelle de fichiers CSS en utilisant des applications Web dont le fonctionnement est en ligne ou hors ligne. Ces outils sont très efficaces pour supprimer les espaces, les tabulations, les commentaires et les sauts de lignes. La plupart de ces programmes prennent également en compte la transformation des codes de couleur. Vous pourrez télécharger le résultat directement en tant que fichier CSS ou en procédant à un copier-coller. Voici une sélection de trois applications :

CSS Minifier

Cette application en ligne est disponible sur https://cssminifier.com/. Copiez votre code CSS dans le champ « Input CSS » et démarrez le processus en cliquant sur « Minify ». Dans le champ « Minify Output », vous trouverez le résultat que vous pourrez ensuite copier et coller manuellement ou alors télécharger. CSS Minifier raccourcit le code des sauts de lignes et des espaces et supprime aussi les points-virgules dans les énumérations. Par ailleurs, l’outil transforme les codes RGB dans sa variante comprimée en Hex.

CSS Compressor

L’application Web CSS Compressor se différencie de CSS Minifier car elle propose plus d’options pour la compression des codes. Chargez le site http://csscompressor.com/ et copiez votre fichier CSS dans le champ « CSS Source Code input ». Ensuite, réglez le niveau de compression. En cliquant sur le lien « Show advandced options », cochez les options désirées telles que les tailles de compression, les couleurs, les espaces… En cliquant sur « Compress », vous démarrez le processus avec CSS Compressor. En plus du résultat, l’outil vous permet également de recevoir des informations sur la taille input et output de votre fichier CSS ainsi que sa minimisation en pourcentage.

Free CSS Toolbox

Free CSS Toolbox est un logiciel gratuit pour les développeurs Web : http://www.blumentals.net/csstool/. Comme son nom l’indique, il s’agit d’un assemblage d’outils qui permet entre autres le formatage ainsi que le test de codes CSS. Dans le menu « CSS Formating Options », sélectionnez le paramètre CSS optimisé et démarrez ensuite la compression via « ReFormat Nox ». Free CSS Toolbox supprime les espaces et le dernier point-virgule tout en faisant en sorte de minimiser la taille des couleurs. Le programme fonctionne sur tous les systèmes d’exploitation Windows en partant de XP.

Des CSS optimisés pour un temps de chargement plus rapide

Si votre site Internet ou votre boutique en ligne est riche en contenu, il vous faut avoir recours à beaucoup de feuilles de style. Le fait que votre serveur Web soit de plus en plus surchargé par le nombre croissant de fichiers CSS n’est pas étonnant. Si une page est ouverte via un client (navigateur), toutes les données CSS doivent être chargées et transférées. C’est pour cette raison que l’optimisation de feuilles de styles est plus que recommandée. Les outils en ligne et hors ligne que nous avons présentés sont destinés aussi bien aux débutants qu’aux experts et permettent de supprimer des informations superflues de votre fichier CSS. Cependant, vous ne pourrez pas atteindre le niveau maximum d’optimisation avec des applications. Pour cela, il vous faudra vous mettre au travail ou alors recourir à des services d’experts.

Cet article vous a-t-il été utile ?