Com­pres­ser des fichiers CSS pour améliorer la per­for­mance

L’op­ti­mi­sa­tion du char­ge­ment de vos sites Web passe aussi par une gestion efficace des fichiers CSS. Grâce à une com­pres­sion ciblée et à l’ap­pli­ca­tion de certaines best practices, les per­for­mances peuvent être con­si­dé­ra­ble­ment amé­lio­rées, ce qui se traduit par des temps de char­ge­ment plus rapides et une meilleure ex­pé­rience uti­li­sa­teur.

Qu’est-ce que CSS ?

Les feuilles de style en cascade, gé­né­ra­le­ment appelées CSS (de l’anglais Cascading Style Sheets), cons­ti­tuent un langage in­for­ma­tique 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 con­tien­nent uni­que­ment des données con­cer­nant les contenus complexes (struc­tures ar­bo­res­centes, 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 char­ge­ment de page, le serveur Web doit les trans­fé­rer au na­vi­ga­teur en incluant les contenus mul­ti­mé­dia im­plé­men­tés. Cette action a un impact direct sur le temps de char­ge­ment de la page.

Plus les données CSS sont grandes et complexes, plus l’in­ter­naute va devoir se montrer patient lors du char­ge­ment de la page. En com­pres­sant les codes des fichiers CSS, vous pouvez très nettement réduire sig­ni­fi­ca­ti­ve­ment la taille de ces fichiers et ainsi améliorer la per­for­mance de votre site Internet. Un autre moyen d’améliorer les délais de char­ge­ment est ce que l’on appelle le lazy loading, dans lequel les fichiers CSS ne sont chargés que lorsque cela est né­ces­saire. Cela réduit le temps de char­ge­ment initial, car toutes les feuilles de style ne doivent pas être chargées im­mé­dia­te­ment, mais seulement lorsqu’elles servent réel­le­ment.

Comment optimiser des fichiers CSS

On accorde de plus en plus d’im­por­tance au char­ge­ment d’un site Internet, notamment depuis la crois­sance du marché des smart­phones et des tablettes. Le champ d’activité du langage CSS s’est agrandi et utilise de plus en plus les fonc­tion­na­li­tés de Ja­vaS­cript. Les modèles de systèmes de gestion de contenu tels que WordPress sont par­ti­cu­liè­re­ment concernés par ces fichiers CSS sur­char­gés, qui ra­len­tis­sent le char­ge­ment des sites Web. Nous vous pré­sen­tons ici quelques conseils et astuces qui vous aideront à com­pres­ser vos fichiers CSS et qui amé­lio­re­ront la per­for­mance au char­ge­ment de votre site Web :

1. Evitez l’uti­li­sa­tion excessive des valeurs CSS inline (styles di­rec­te­ment 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 in­di­vi­duels 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. Nor­ma­le­ment, celui-ci doit envoyer une demande HTTP par feuille de style et attendre. Notez que HTTP/2 permet désormais de gérer ef­fi­ca­ce­ment plusieurs requêtes pa­ral­lèles, afin de charger plus ra­pi­de­ment des fichiers CSS in­di­vi­duels sans qu’une fusion préalable ne soit obli­ga­toire.
3. Si possible, utilisez les codes suivants : body { margin: 20px 10px 5px 10px } au lieu d’une for­mu­la­tion complète comme body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; }.
4. Evitez d’écrire trop. Si certaines balises ap­pa­rais­sent déjà dans un élément (comme une liste), il n’est pas né­ces­saire de les men­tion­ner 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 na­vi­ga­teur doit tous les vérifier.
7. Ré­tré­cis­sez les fichiers CSS en sup­pri­mant les espaces, les lignes ainsi que les com­men­taires 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’énu­mé­ra­tion. De cette manière, le fichier CSS perdra sa cons­truc­tion sys­té­ma­tique ainsi que sa clarté, mais sera bien plus ra­pi­de­ment in­ter­prété par votre na­vi­ga­teur.

Étant donné que la mi­ni­mi­sa­tion 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 mo­di­fi­ca­tions, voire réparer des erreurs.

Com­pres­sion CSS : les outils en ligne gratuits

Il est possible de con­tour­ner l’effort d’une op­ti­mi­sa­tion manuelle de fichiers CSS en utilisant des ap­pli­ca­tions Web gratuites. Ces outils sont très efficaces pour supprimer les espaces, les ta­bu­la­tions, les com­men­taires et les sauts de lignes. La plupart de ces pro­grammes prennent également en compte la trans­for­ma­tion des codes de couleur. Vous pourrez té­lé­char­ger le résultat di­rec­te­ment en tant que fichier CSS ou en ef­fec­tuant un simple copier-coller. Voici une sélection de trois ap­pli­ca­tions :

CSS Minifier

Cette ap­pli­ca­tion en ligne est dis­po­nible sur css­mi­ni­fier.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é­char­ger di­rec­te­ment. CSS Minifier rac­cour­cit le code des sauts de lignes et des espaces et supprime aussi les points-virgules dans les énu­mé­ra­tions. Par ailleurs, l’outil trans­forme les codes RGB dans sa variante comprimée en Hex.

CSS Com­pres­sor

L’ap­pli­ca­tion Web CSS Com­pres­sor se dif­fé­ren­cie de CSS Minifier en proposant plus d’options pour la com­pres­sion des codes. Ouvrez le site css­com­pres­sor.com et copiez votre fichier CSS dans le champ « CSS Source Code input ». Ensuite, réglez le niveau de com­pres­sion. Vous avez le choix entre quatre options pré­con­fi­gu­rées, en fonction de la li­si­bi­lité 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 com­pres­sion, les couleurs (Compress colors), les ca­rac­tères (Remove un­ne­ces­sary backs­lashes), etc. En cliquant sur « Compress », vous démarrez le processus de CSS Com­pres­sor. En plus du résultat dans le champ « Com­pres­sed Ja­vaS­cript », l’outil vous permet également de recevoir des in­for­ma­tions sur la taille input et output de votre fichier CSS ainsi que sa mi­ni­mi­sa­tion en pour­cen­tage.

CSS Com­pres­sor de Gil­meis­ter Software

Le CSS Com­pres­sor de Gil­meis­ter Software est un outil gratuit pour les dé­ve­lop­peurs Web qui permet de com­pres­ser fa­ci­le­ment les codes CSS. Le com­pres­seur supprime fa­ci­le­ment les espaces et le dernier point-virgule. Les com­men­taires sont au­to­ma­ti­que­ment supprimés du code CSS. Selon l’éditeur, la réduction globale du code peut atteindre 30 %.

Un CSS optimisé pour un temps de char­ge­ment 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 (na­vi­ga­teur), toutes les données CSS doivent être chargées et trans­fé­rées. C’est pour cette raison que l’op­ti­mi­sa­tion de feuilles de styles est plus que re­com­man­dée. Les outils en ligne que nous avons présentés sont destinés aussi bien aux débutants qu’aux experts et per­met­tent de supprimer des in­for­ma­tions su­per­flues de votre fichier CSS. Cependant, vous ne pourrez pas atteindre le niveau maximum d’op­ti­mi­sa­tion avec des ap­pli­ca­tions. Pour cela, il vous faudra vous mettre au travail ou alors recourir à des services d’experts.