Bonjour à tous ! 

Je profite d'un article de Prélude sur l'optimisation par compression ou par minimisation pour présenter les différents moyens existants pour minimiser (ou minifier en mauvais français) les fichiers CSS et JS de votre site. 

Performances des pages web

Mais déjà, pourquoi faudrait-il minimiser vos fichiers ? Au débuts de l'Internet, on avait des débits ridicules, et il fallait donc réduire au maximum le poids de nos pages. Et puis, l'ADSL est arrivé et on a petit à petit oublié les limitations liées au débit. Ce fut une erreur, parce que les internautes détestent attendre. Aujourd'hui, on entend dire que Google va prendre en compte le temps de chargement des pages pour ses algorithmes de recherche. C'est une bonne chose, car cela ramène la question de la vitesse de chargement sur le devant de la scène du développement web. 

Vous trouverez déjà beaucoup d'articles sur le web qui parlent de performance. Il y a des sites entièrement dédiés à ce pan du développement, et Google saura vous les indiquer. Je ne vais donc pas répéter ce que d'autres expliquent mieux que moi, mais je vais vous présenter une façon d'améliorer ses performances que j'apprécie. 

Compression à la volée

Si vous suivez mon blog et mes projets, vous avez vu mon plugin Minifier pour Atomik Framework. Ce plugin permet de minimiser ses fichiers CSS au moment où ils sont demandés par l'internaute. Plusieurs intérêts à ça : réduire le nombre de requêtes HTTP, réduire la taille des fichiers CSS. Au final, l'utilisateur télécharge beaucoup moins de données inutiles, pour le même résultat affiché. 

J'avais découvert cette technique sur le blog de LateralCode (Stunningly Simple CSS Minifier), et j'ai vite accroché. Je ne suis pas fan de la minimisation avant l'envoi des fichiers sur le serveur, parce que ça oblige à avoir deux versions du code (une normale, une réduite), et surtout, ça oblige à re-minimiser les fichiers à chaque changement. Comme tout développeur, je suis faignant, donc ça ne me convient pas. 

La technique proposée par LateralCode consiste donc en une compression via un script PHP, donc directement sur le serveur. On spécifie les fichiers CSS à charger, le script PHP les ouvre, les compresse et les concatène, puis renvoie le résultat. C'est ce que j'ai fait avec Minifier, en ajoutant une fonctionnalité de mise en cache. 

Mise en pratique

Prenons un exemple pratique pour bien voir tout l'intérêt de ce système : j'ai un site avec trois pages. Sur chaque page, j'ai trois fichiers CSS communs : reset.css (un système de reset CSS comme celui d'Eric Meyer), global.css (qui définit des attributs sur mes éléments HTML, comme img { border: none; }) et main.css (qui définit le design général des pages). Ensuite, sur chaque page je charge un fichier particulier, correspondant au nom de la page, qui définit le style des éléments spécifiques à cette page. J'ai donc, sur chaque page, au moins 4 fichiers CSS différents. Ceci me permet d'avoir des fichiers proprement séparés, un code CSS réparti et donc mieux organisé, etc. Seulement, au niveau des performances, c'est pas le top, car 4 requêtes HTTP sont nécessaires pour charger le CSS de la page. 

L'utilisation du plugin Minifier, ou de tout autre système similaire, permet de faire ceci : 

  • génération du nom du fichier cache correspondant aux fichiers CSS demandés
  • si le fichier cache existe, et que les fichiers CSS sont moins récents que le fichier cache, on renvoi directement le fichier cache
  • sinon, compression de chaque fichier séparément (retrait des espaces, des retours à la ligne, des commentaires... )
  • concaténation des fichiers
  • enregistrement du résultat dans un fichier cache
  • renvoi du fichier cache

Au final, on aura donc sur notre serveur des fichiers toujours aussi propres, et on aura en cache un fichier CSS compressé par page. Les internautes ne reçoivent donc qu'un fichier compressé correspondant au code de la page visitée. 

Problématiques

Les systèmes de compression à la volée existent depuis quelques temps, mais je ne crois pas qu'ils soient très connus. L'inconvénient majeur, c'est le temps de compression et de mise en cache nécessaire quand on change un des fichiers. Cependant, la mise en cache permet de diminuer très fortement l'impact de ce comportement. Et puis, quand vous faites un changement sur votre site, vous vérifiez bien toutes les pages, non ? ;-)

Il y a cependant un gros reproche fait à la compression des fichiers en général : ça casse une des bases du web, le fait qu'il soit ouvert. Ainsi, on ne pourra que difficilement reprendre le code CSS d'un site qui compresse, et c'est donc un frein à l'innovation. Faut-il donc perdre en ouverture et en respect du web pour gagner en performance ? 

Je propose une solution simple pour répondre à cette problématique, mais qui ne marche que dans le cadre du système que je viens de présenter. Il suffit, au moment de la concaténation des fichiers compressés, d'ajouter un commentaire contenant des liens absolus vers les fichiers originaux. Ainsi, l'internaute qui s'intéresse à notre code pourra accéder aux fichiers CSS originaux, et récupérer, analyser, comprendre ce code. Les performances sont là (au dur prix de trois ou quatre lignes de commentaire), et le web est sauvé. 

J'envisage d'implémenter ceci dans la prochaine version de Minifier. Que pensez-vous de cette solution ? Avez-vous d'autres idées pour résoudre ce problème ?

Minifiers

Bon, je suis bien d'accord, mon plugin Minifier est absolument génial (lol), mais il n'est disponible que pour Atomik Framework. Sachez donc qu'il existe d'autres projets permettant de mettre en place le même genre de comportement sur votre site. Certains sont plus simples, d'autres bien plus complets. Je ne sais pas si ils fonctionnent exactement comme Minifier, je vous invite donc à les étudier avant de les implémenter.

Voici donc une liste de projets de minimisation de vos fichiers CSS ou JS à la volée : 

Je me rend compte que je n'en connais pas beaucoup, donc si vous en avez d'autres, faites m'en part en commentaire ! :)

N'hésitez pas non plus à troller intelligemment sur les avantages et les inconvénients de la compression des fichiers CSS et JS, ainsi que sur les différentes méthodes disponibles. 

Belle fin de journée à tous ! 

Crédits : Photo "Astronomical Clock" par simpologist