Compresser des fichiers CSS pour améliorer la performance

L’optimisation du chargement de vos sites Web passe aussi par une gestion efficace des fichiers CSS. Grâce à une compression ciblée et à l’application de certaines best practices, les performances peuvent être considérablement améliorées, ce qui se traduit par des temps de chargement plus rapides et une meilleure expérience utilisateur.

Qu’est-ce que CSS ?

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 style visuel, comme la couleur ou la mise en page. Les documents HTML et XML contiennent uniquement des données concernant les contenus complexes (structures arborescentes, textes enrichis, etc.) 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 un impact direct 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 réduire significativement la taille de ces fichiers et ainsi améliorer la performance de votre site Internet. Un autre moyen d’améliorer les délais de chargement est ce que l’on appelle le lazy loading, dans lequel les fichiers CSS ne sont chargés que lorsque cela est nécessaire. Cela réduit le temps de chargement initial, car toutes les feuilles de style ne doivent pas être chargées immédiatement, mais seulement lorsqu’elles servent réellement.

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 modèles de systèmes de gestion de contenu tels que WordPress sont particulièrement concernés par ces fichiers CSS surchargés, qui ralentissent le chargement des sites Web. Nous vous présentons ici quelques conseils et astuces qui vous aideront à compresser vos fichiers CSS et qui amélioreront la performance au 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. Notez que HTTP/2 permet désormais de gérer efficacement plusieurs requêtes parallèles, afin de charger plus rapidement des fichiers CSS individuels sans qu’une fusion préalable ne soit obligatoire.
3. Si possible, utilisez les codes suivants : body { margin: 20px 10px 5px 10px } au lieu d’une formulation complète comme body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; }.
4. Evitez d’écrire trop. Si certaines balises apparaissent déjà dans un élément (comme une liste), il n’est pas nécessaire de les mentionner une nouvelle fois.
5. Utilisez les codes en Hex pour les couleurs à la place des notations RGB.
6. N’utilisez le sélecteur universel * qu’en cas d’absolue nécessité. 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.

Étant 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 : les outils en ligne gratuits

Il est possible de contourner l’effort d’une optimisation manuelle de fichiers CSS en utilisant des applications Web gratuites. 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 effectuant un simple copier-coller. Voici une sélection de trois applications :

CSS Minifier

Cette application en ligne est disponible sur 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 télécharger directement. 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 en proposant plus d’options pour la compression des codes. Ouvrez le site csscompressor.com et copiez votre fichier CSS dans le champ « CSS Source Code input ». Ensuite, réglez le niveau de compression. Vous avez le choix entre quatre options préconfigurées, en fonction de la lisibilité que vous désirez pour votre code CSS compressé. En cliquant sur le lien « Show advanced options », cochez les options désirées telles que les tailles de compression, les couleurs (Compress colors), les caractères (Remove unnecessary backslashes), etc. En cliquant sur « Compress », vous démarrez le processus de CSS Compressor. En plus du résultat dans le champ « Compressed JavaScript », 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.

CSS Compressor de Gilmeister Software

Le CSS Compressor de Gilmeister Software est un outil gratuit pour les développeurs Web qui permet de compresser facilement les codes CSS. Le compresseur supprime facilement les espaces et le dernier point-virgule. Les commentaires sont automatiquement supprimés du code CSS. Selon l’éditeur, la réduction globale du code peut atteindre 30 %.

Un CSS optimisé 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 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.