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 :
- 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).
- 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.
- 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 }
- 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.
- Utilisez les codes en Hex pour les couleurs à la place des notations RGB.
- 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.
- 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.
Articles similaires
Compresser des images : un impératif pour le Web
Le volume de stockage des ordinateurs progresse d’année en année. Toujours plus de giga- ou de téraoctets sont mis à la disposition des utilisateurs. Il est tout de même recommandé de réduire autant que possible le volume de vos données, surtout si vous gérez un site Internet. Les données peu volumineuses induisent des temps de chargement plus courts, des visiteurs plus satisfaits et donc un…
Les bases du Webdesign : la planification
Il est essentiel de suivre un fil d’Ariane et de procéder méthodiquement lorsque l’on veut réaliser son site Web, afin de pouvoir définir quelles fonctionnalités seront proposées et en quoi il apportera une valeur ajoutée. Avant de songer à la mise en page, la planification de votre site Web reste une étape incontournable. Mais que faut-il observer ? À quels aspects faut-il accorder de…
Les meilleures webfonts : voici pourquoi les web safe fonts sont si importants
Les web safe fonts sont des polices qui peuvent être utilisées sur le Web sans aucun problème. Le facteur clé ici est de savoir si les polices respectives peuvent être affichées correctement par le plus grand nombre de navigateurs possible. Découvrez pourquoi le nombre de web safe fonts ne cesse de croître et pourquoi les webfonts jouent un rôle important pour le succès des entreprises sur le Web.
Sinart CreativeShutterstock Présentation des YAML
Si vous souhaitez développer une nouvelle application Web, vous avez le choix entre écrire complètement le code ou utiliser des frameworks. Ces ensembles de codes présentent des structures prêtes à l'emploi, que vous pouvez ensuite adapter à vos propres idées. Le framework CSS YAML donne accès à une bonne structure de framework responsive, qui de plus est déjà optimisée pour différents navigateurs…
Aperçu des meilleurs outils d’analyse de trafic Web
Un outil d’analyse de trafic de site Web vous donne un aperçu rapide du nombre de visiteurs qu’un site Web attire et la façon dont ils accèdent à la page. C’est important pour répondre aux questions suivantes : quel est le succès d’un site ? Une coopération en vaut-elle la peine ? Un contrôle de trafic sur un site Web est particulièrement utile dans le contexte d’une analyse de la concurrence.…