L’optimisation des CSS et JS en production

L’optimisation des CSS et des JavaScript est un étape importante lors de la mise en production d’un site Internet.

Voyons tout d’abord l’intérêt de l’optimisation des CSS.

1. Réduire le poids des fichiers.
2. Permettre un chargement plus rapide des pages.
3. Ne pas charger inutilement des styles non utilisés.

Les navigateurs web sont chargés d’interpréter du code HTML/CSS,  hors la lecture de ces fichiers est faite intégralement.
Les espaces, commentaires, sauts de lignes dans votre code consomment de la ressource au même titre que les instructions html/CSS.

Nous allons aborder ici deux techniques afin d’optimiser cette consommation de ressource :

Faire plusieurs fichiers CSS

Dans un site internet il y a souvent des zones bien particulières.
Si nous prenons comme exemple un site E-commerce nous pouvons distinguer 4 grandes zones :

1. La Homepage
2. La partie catalogue
3. La partie Mon compte
4. La partie Tunnel de commande

Les styles de la partie Mon compte ne sont pas utilisés à d’autre endroits sur le site,  idem pour la partie Tunnel de commande etc.

L’idée est de ne pas avoir un seul fichier css global mais plutôt un fichier par lot, et appeler le bon fichier au bon endroit.

Toujours dans notre exemple nous pourrions imaginer le schéma suivant :

1. global.css qui contient les styles CSS communs sur l’ensemble du site
2. home.css qui contient les styles de la home
3. catalogue.css qui contient les styles du catalogue
4. compte.css qui contient les styles de l’espace mon compte
5. checkout.css qui contient les styles de l’espace tunnel de commande

Procéder ainsi diminue grandement le poids des fichiers CSS et permet en plus de s’y retrouver plus facilement lorsque l’on travaille sur des fichiers qui ont beaucoup de lignes.
Qui ira voir dans le fichier checkout.css pour des bugs sur la home par exemple

Compresser ses fichiers CSS avec Yuicompressor

La compression de fichiers CSS (et JavaScript) permet de supprimer tout ce qui n’est pas utile au navigateur pour sa lecture de notre page web.

Cela concerne les espaces vides, les commentaires, les sauts de lignes.

Voici le processus pour compresser vos fichier sans risques.

En premier lieu il est nécessaire d’avoir dans votre arborescence de fichiers un dossier qui contiendra vos fichiers non compressés.
Cela vous permettra de mettre à jour vos fichiers sans vous faire tomber les yeux sur le clavier à force de chercher le bon style parmi tout ces caractères en vrac.

Télécharger Yuicompressor en cliquant ici
A noter que ce batch utilise la version 2.4.2 de Yui Compressor.
Pour utiliser une version différente, il vous suffit de remplacer le fichier yuicompressor.jar par celui de la version de votre choix

Décompresser l’archive là où vous le souhaitez par exemple à la racine du disque c:/

Allez dans démarrer -> exécuter puis taper « cmd » (Sous Windows XP) dans le champ pour afficher la fenêtre qui permet de saisir des instructions en ligne de commande.

Si vous êtes sous Vista ou Windows 7 faites un Windows + R pour faire apparaitre le champ –> taper cmd pour faire apparaitre la fenêtre

Pour rappel voici comment naviguer en ligne de commande:

cd NomDuDossier permet d’entrer dans un dossier
cd.. correspond à une sortie de dossier
dir correspond à lister le contenu d’un dossier
c: permet d’accéder à la racine du disque C:/
e: permet d’accéder à la racine du disque E:/ etc…
Il n’est pas possible de faire un ctrl+v mais vous pouvez y accéder avec un clic droit
Il est possible de faire des glisser-déposer dans la fenêtre de commande

Aller en ligne de commande chercher le dossier yui compressor
Une fois dans le dossier, indiquer ceci pour compresser les fichiers du dossier en question :

yuicompressor.bat chemin vers le dossier (par exemple yuicompressor.bat C:\yuicompressor\css)
Tout les fichiers du dossier serons compressés, il est important de vous assurer que vous avez bien une copie des fichiers non compressés dans votre arborescence.

Voila votre fichier est maintenant compressé et est prêt a être mis en ligne.

Comment modifier facilement mon fichier compressé

1. Faire la modification sur le fichier source qui n’est pas compressé
2. Copier l’ensemble du contenu du fichier source
3. Le Coller à la place du contenu du fichier compressé
4. Recompresser ce dernier

En espérant que ces astuces vous serons utiles!