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.